@charset "UTF-8";
/**
 Mango Foundation
 */
/* The Light theme is the main Soundtrap theme */
/* Lifecycle status: production */
.st-light-theme, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover, .synth84enginegui .container .control-container .control-area .button-wrapper button {
  --font-family: "Matter", sans-serif;
}

.st-light-theme, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover, .synth84enginegui .container .control-container .control-area .button-wrapper button,
.st-light-theme .st-base-set,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-base-set,
.st-light-theme .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .st-light-theme .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-message,
.horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .status-area.ok .artwork-title-container .status-message,
.st-light-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .st-light-theme .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-message,
.horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .status-area:not(.ok) .artwork-title-container .status-message,
.st-light-theme .mididialog2 > .st-dialog-body .status-area .status-description,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .st-light-theme .status-description,
.mididialog2 > .st-dialog-body .status-area .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-description,
.horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .status-area .artwork-title-container .status-description,
.st-light-theme .save-preset-dialog .inner .body,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .save-preset-dialog .inner .body,
.save-preset-dialog .inner .st-light-theme .body,
.save-preset-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .body,
.horizontal-paywall-dialog .save-preset-dialog .inner .body .artwork-background .artwork-title-container .body,
.st-light-theme .save-preset-dialog .inner .closer,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .st-light-theme .closer,
.save-preset-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .closer,
.horizontal-paywall-dialog .save-preset-dialog .inner .body .artwork-background .artwork-title-container .closer,
.st-light-theme .radio-dialog.new-dialog .inner .closer,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .st-light-theme .closer,
.radio-dialog.new-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .closer,
.horizontal-paywall-dialog .radio-dialog.new-dialog .inner .body .artwork-background .artwork-title-container .closer,
.st-light-theme .key-selector-menu button[aria-checked=false],
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .key-selector-menu button[aria-checked=false],
.key-selector-menu .st-light-theme button[aria-checked=false],
.key-selector-menu .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container button[aria-checked=false],
.horizontal-paywall-dialog .inner .body .artwork-background .key-selector-menu .artwork-title-container button[aria-checked=false],
.st-light-theme .st-curved-slider-container .st-curved-slider .thumb-visual,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .st-light-theme .thumb-visual,
.st-curved-slider-container .st-curved-slider .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .thumb-visual,
.horizontal-paywall-dialog .inner .body .artwork-background .st-curved-slider-container .st-curved-slider .artwork-title-container .thumb-visual,
.st-light-theme .st-curved-slider-container,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-curved-slider-container,
.st-light-theme .st-slider::-webkit-slider-runnable-track,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-slider::-webkit-slider-runnable-track,
.st-light-theme .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .st-light-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container button.st-button.button_circular,
.horizontal-paywall-dialog .inner .body .artwork-background .playable-waveform-preview.waveform-base-theme .artwork-title-container button.st-button.button_circular,
.st-light-theme .playable-waveform-preview.waveform-base-theme,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playable-waveform-preview.waveform-base-theme,
.st-light-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .st-light-theme .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .subheading,
.horizontal-paywall-dialog .inner .body .artwork-background .sampler-ui-create-instrument-container .sampler-create-instrument-button .artwork-title-container .subheading,
.st-light-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .st-light-theme .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.horizontal-paywall-dialog .inner .body .artwork-background .sampler-ui-create-instrument-container .artwork-title-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.st-light-theme .sampler-ui-bottom-buttons .sampler-ui-delete,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-ui-bottom-buttons .st-light-theme .sampler-ui-delete,
.sampler-ui-bottom-buttons .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-ui-delete,
.horizontal-paywall-dialog .inner .body .artwork-background .sampler-ui-bottom-buttons .artwork-title-container .sampler-ui-delete,
.st-light-theme .tab-button,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab-button,
.st-light-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-light-theme .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .selected,
.horizontal-paywall-dialog .inner .body .artwork-background .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .artwork-title-container .selected,
.st-light-theme .dnd-sampler-engine-gui .dnd-sampler-options,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .dnd-sampler-engine-gui .dnd-sampler-options,
.dnd-sampler-engine-gui .st-light-theme .dnd-sampler-options,
.dnd-sampler-engine-gui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .dnd-sampler-options,
.horizontal-paywall-dialog .inner .body .artwork-background .dnd-sampler-engine-gui .artwork-title-container .dnd-sampler-options,
.st-light-theme .bass808enginegui .octaveselector .lblinline,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .bass808enginegui .octaveselector .lblinline,
.bass808enginegui .octaveselector .st-light-theme .lblinline,
.bass808enginegui .octaveselector .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .lblinline,
.horizontal-paywall-dialog .inner .body .artwork-background .bass808enginegui .octaveselector .artwork-title-container .lblinline,
.st-light-theme .bass808enginegui .boxed,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .bass808enginegui .boxed,
.bass808enginegui .st-light-theme .boxed,
.bass808enginegui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .boxed,
.horizontal-paywall-dialog .inner .body .artwork-background .bass808enginegui .artwork-title-container .boxed,
.st-light-theme .bass808enginegui,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .bass808enginegui,
.st-light-theme .sampler1enginegui .octaveselector .lblinline,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler1enginegui .octaveselector .lblinline,
.sampler1enginegui .octaveselector .st-light-theme .lblinline,
.sampler1enginegui .octaveselector .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .lblinline,
.horizontal-paywall-dialog .inner .body .artwork-background .sampler1enginegui .octaveselector .artwork-title-container .lblinline,
.st-light-theme .sampler1enginegui .boxed,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler1enginegui .boxed,
.sampler1enginegui .st-light-theme .boxed,
.sampler1enginegui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .boxed,
.horizontal-paywall-dialog .inner .body .artwork-background .sampler1enginegui .artwork-title-container .boxed,
.st-light-theme .sampler1enginegui,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler1enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-base-set,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-message,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-message,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-description,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .save-preset-dialog .inner .body,
.save-preset-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .body,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .closer,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .closer,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .key-selector-menu button[aria-checked=false],
.key-selector-menu .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed button[aria-checked=false],
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .thumb-visual,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-curved-slider-container,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-slider::-webkit-slider-runnable-track,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed button.st-button.button_circular,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playable-waveform-preview.waveform-base-theme,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .subheading,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-ui-bottom-buttons .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-ui-delete,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab-button,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .selected,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .dnd-sampler-engine-gui .dnd-sampler-options,
.dnd-sampler-engine-gui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .dnd-sampler-options,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .bass808enginegui .octaveselector .lblinline,
.bass808enginegui .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .lblinline,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .bass808enginegui .boxed,
.bass808enginegui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .bass808enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler1enginegui .octaveselector .lblinline,
.sampler1enginegui .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .lblinline,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler1enginegui .boxed,
.sampler1enginegui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler1enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-base-set,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .status-message,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .status-message,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .status-description,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .save-preset-dialog .inner .body,
.save-preset-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .body,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .closer,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .closer,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .key-selector-menu button[aria-checked=false],
.key-selector-menu .synth84enginegui .container .control-container .control-area .button-wrapper button:hover button[aria-checked=false],
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .thumb-visual,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-curved-slider-container,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-slider::-webkit-slider-runnable-track,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .synth84enginegui .container .control-container .control-area .button-wrapper button:hover button.st-button.button_circular,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .playable-waveform-preview.waveform-base-theme,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .subheading,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-ui-bottom-buttons .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-ui-delete,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tab-button,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .selected,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .dnd-sampler-engine-gui .dnd-sampler-options,
.dnd-sampler-engine-gui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .dnd-sampler-options,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .bass808enginegui .octaveselector .lblinline,
.bass808enginegui .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .lblinline,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .bass808enginegui .boxed,
.bass808enginegui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .bass808enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler1enginegui .octaveselector .lblinline,
.sampler1enginegui .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .lblinline,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler1enginegui .boxed,
.sampler1enginegui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler1enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button .st-base-set,
.synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .synth84enginegui .container .control-container .control-area .button-wrapper button .status-message,
.synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .synth84enginegui .container .control-container .control-area .button-wrapper button .status-message,
.synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .synth84enginegui .container .control-container .control-area .button-wrapper button .status-description,
.synth84enginegui .container .control-container .control-area .button-wrapper button .save-preset-dialog .inner .body,
.save-preset-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .body,
.synth84enginegui .container .control-container .control-area .button-wrapper button .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .closer,
.synth84enginegui .container .control-container .control-area .button-wrapper button .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .closer,
.synth84enginegui .container .control-container .control-area .button-wrapper button .key-selector-menu button[aria-checked=false],
.key-selector-menu .synth84enginegui .container .control-container .control-area .button-wrapper button button[aria-checked=false],
.synth84enginegui .container .control-container .control-area .button-wrapper button .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .synth84enginegui .container .control-container .control-area .button-wrapper button .thumb-visual,
.synth84enginegui .container .control-container .control-area .button-wrapper button .st-curved-slider-container,
.synth84enginegui .container .control-container .control-area .button-wrapper button .st-slider::-webkit-slider-runnable-track,
.synth84enginegui .container .control-container .control-area .button-wrapper button .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .synth84enginegui .container .control-container .control-area .button-wrapper button button.st-button.button_circular,
.synth84enginegui .container .control-container .control-area .button-wrapper button .playable-waveform-preview.waveform-base-theme,
.synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .synth84enginegui .container .control-container .control-area .button-wrapper button .subheading,
.synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-ui-bottom-buttons .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-ui-delete,
.synth84enginegui .container .control-container .control-area .button-wrapper button .tab-button,
.synth84enginegui .container .control-container .control-area .button-wrapper button .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .synth84enginegui .container .control-container .control-area .button-wrapper button .selected,
.synth84enginegui .container .control-container .control-area .button-wrapper button .dnd-sampler-engine-gui .dnd-sampler-options,
.dnd-sampler-engine-gui .synth84enginegui .container .control-container .control-area .button-wrapper button .dnd-sampler-options,
.synth84enginegui .container .control-container .control-area .button-wrapper button .bass808enginegui .octaveselector .lblinline,
.bass808enginegui .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper button .lblinline,
.synth84enginegui .container .control-container .control-area .button-wrapper button .bass808enginegui .boxed,
.bass808enginegui .synth84enginegui .container .control-container .control-area .button-wrapper button .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper button .bass808enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button .sampler1enginegui .octaveselector .lblinline,
.sampler1enginegui .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper button .lblinline,
.synth84enginegui .container .control-container .control-area .button-wrapper button .sampler1enginegui .boxed,
.sampler1enginegui .synth84enginegui .container .control-container .control-area .button-wrapper button .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper button .sampler1enginegui,
.st-light-theme .synth84enginegui,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth84enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .synth84enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .synth84enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button .synth84enginegui,
.st-light-theme .synth78enginegui .boxed,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth78enginegui .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .synth78enginegui .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .synth78enginegui .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper button .synth78enginegui .boxed,
.synth78enginegui .st-light-theme .boxed,
.synth78enginegui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .boxed,
.horizontal-paywall-dialog .inner .body .artwork-background .synth78enginegui .artwork-title-container .boxed,
.synth78enginegui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper .synth78enginegui .button-pressed .boxed,
.synth78enginegui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper .synth78enginegui button:hover .boxed,
.synth78enginegui .synth84enginegui .container .control-container .control-area .button-wrapper button .boxed,
.synth84enginegui .container .control-container .control-area .button-wrapper .synth78enginegui button .boxed,
.st-light-theme .synth78enginegui,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth78enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .synth78enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .synth78enginegui,
.synth84enginegui .container .control-container .control-area .button-wrapper button .synth78enginegui,
.st-light-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper button .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-light-theme .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab.deemphasised,
.horizontal-paywall-dialog .inner .body .artwork-background .rightsidebar.collapsed .rightsidebarwrapper .tabbar .artwork-title-container .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.collapsed .rightsidebarwrapper .tabbar .button-pressed .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.collapsed .rightsidebarwrapper .tabbar button:hover .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.collapsed .rightsidebarwrapper .tabbar button .tab.deemphasised,
.st-light-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper button .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-light-theme .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab.deemphasised,
.horizontal-paywall-dialog .inner .body .artwork-background .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .artwork-title-container .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .button-pressed .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar button:hover .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button .tab.deemphasised,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar button .tab.deemphasised,
.st-light-theme .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.synth84enginegui .container .control-container .control-area .button-wrapper button .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .st-light-theme .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab,
.horizontal-paywall-dialog .inner .body .artwork-background .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .artwork-title-container .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .button-pressed .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar button:hover .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button .tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar button .tab,
.st-light-theme .new-ribbon,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .new-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .new-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .new-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper button .new-ribbon,
.st-light-theme .looptab .results .addtrackshortcut .playityourself,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .results .addtrackshortcut .playityourself,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .results .addtrackshortcut .playityourself,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .results .addtrackshortcut .playityourself,
.synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .results .addtrackshortcut .playityourself,
.looptab .results .addtrackshortcut .st-light-theme .playityourself,
.looptab .results .addtrackshortcut .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playityourself,
.horizontal-paywall-dialog .inner .body .artwork-background .looptab .results .addtrackshortcut .artwork-title-container .playityourself,
.looptab .results .addtrackshortcut .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playityourself,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .addtrackshortcut .button-pressed .playityourself,
.looptab .results .addtrackshortcut .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .playityourself,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .addtrackshortcut button:hover .playityourself,
.looptab .results .addtrackshortcut .synth84enginegui .container .control-container .control-area .button-wrapper button .playityourself,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .addtrackshortcut button .playityourself,
.st-light-theme .looptab .results .addtrackshortcut,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .results .addtrackshortcut,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .results .addtrackshortcut,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .results .addtrackshortcut,
.synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .results .addtrackshortcut,
.looptab .results .st-light-theme .addtrackshortcut,
.looptab .results .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .addtrackshortcut,
.horizontal-paywall-dialog .inner .body .artwork-background .looptab .results .artwork-title-container .addtrackshortcut,
.looptab .results .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .addtrackshortcut,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .button-pressed .addtrackshortcut,
.looptab .results .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .addtrackshortcut,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results button:hover .addtrackshortcut,
.looptab .results .synth84enginegui .container .control-container .control-area .button-wrapper button .addtrackshortcut,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results button .addtrackshortcut,
.st-light-theme .looptab .loop-results-tabs-container .loop-results-tab-selected,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .loop-results-tabs-container .loop-results-tab-selected,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .loop-results-tabs-container .loop-results-tab-selected,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .loop-results-tabs-container .loop-results-tab-selected,
.synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .loop-results-tabs-container .loop-results-tab-selected,
.looptab .loop-results-tabs-container .st-light-theme .loop-results-tab-selected,
.looptab .loop-results-tabs-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .loop-results-tab-selected,
.horizontal-paywall-dialog .inner .body .artwork-background .looptab .loop-results-tabs-container .artwork-title-container .loop-results-tab-selected,
.looptab .loop-results-tabs-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .loop-results-tab-selected,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .loop-results-tabs-container .button-pressed .loop-results-tab-selected,
.looptab .loop-results-tabs-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .loop-results-tab-selected,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .loop-results-tabs-container button:hover .loop-results-tab-selected,
.looptab .loop-results-tabs-container .synth84enginegui .container .control-container .control-area .button-wrapper button .loop-results-tab-selected,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .loop-results-tabs-container button .loop-results-tab-selected,
.st-light-theme .looptab .loop-results-tabs-container .loop-results-tab,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .loop-results-tabs-container .loop-results-tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .loop-results-tabs-container .loop-results-tab,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .loop-results-tabs-container .loop-results-tab,
.synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .loop-results-tabs-container .loop-results-tab,
.looptab .loop-results-tabs-container .st-light-theme .loop-results-tab,
.looptab .loop-results-tabs-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .loop-results-tab,
.horizontal-paywall-dialog .inner .body .artwork-background .looptab .loop-results-tabs-container .artwork-title-container .loop-results-tab,
.looptab .loop-results-tabs-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .loop-results-tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .loop-results-tabs-container .button-pressed .loop-results-tab,
.looptab .loop-results-tabs-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .loop-results-tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .loop-results-tabs-container button:hover .loop-results-tab,
.looptab .loop-results-tabs-container .synth84enginegui .container .control-container .control-area .button-wrapper button .loop-results-tab,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .loop-results-tabs-container button .loop-results-tab,
.st-light-theme .looptab .loop-results-tabs-container,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .loop-results-tabs-container,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .loop-results-tabs-container,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .loop-results-tabs-container,
.synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .loop-results-tabs-container,
.looptab .st-light-theme .loop-results-tabs-container,
.looptab .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .loop-results-tabs-container,
.horizontal-paywall-dialog .inner .body .artwork-background .looptab .artwork-title-container .loop-results-tabs-container,
.looptab .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .loop-results-tabs-container,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab .button-pressed .loop-results-tabs-container,
.looptab .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .loop-results-tabs-container,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab button:hover .loop-results-tabs-container,
.looptab .synth84enginegui .container .control-container .control-area .button-wrapper button .loop-results-tabs-container,
.synth84enginegui .container .control-container .control-area .button-wrapper .looptab button .loop-results-tabs-container,
.st-light-theme .keyboardinstrumentgui .row2 .octaveselector .lbl,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .keyboardinstrumentgui .row2 .octaveselector .lbl,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .keyboardinstrumentgui .row2 .octaveselector .lbl,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .keyboardinstrumentgui .row2 .octaveselector .lbl,
.synth84enginegui .container .control-container .control-area .button-wrapper button .keyboardinstrumentgui .row2 .octaveselector .lbl,
.keyboardinstrumentgui .row2 .octaveselector .st-light-theme .lbl,
.keyboardinstrumentgui .row2 .octaveselector .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .lbl,
.horizontal-paywall-dialog .inner .body .artwork-background .keyboardinstrumentgui .row2 .octaveselector .artwork-title-container .lbl,
.keyboardinstrumentgui .row2 .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .lbl,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardinstrumentgui .row2 .octaveselector .button-pressed .lbl,
.keyboardinstrumentgui .row2 .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .lbl,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardinstrumentgui .row2 .octaveselector button:hover .lbl,
.keyboardinstrumentgui .row2 .octaveselector .synth84enginegui .container .control-container .control-area .button-wrapper button .lbl,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardinstrumentgui .row2 .octaveselector button .lbl,
.st-light-theme .effects-editor-carousel__container .stomp .name-ribbon,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effects-editor-carousel__container .stomp .name-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effects-editor-carousel__container .stomp .name-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effects-editor-carousel__container .stomp .name-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper button .effects-editor-carousel__container .stomp .name-ribbon,
.effects-editor-carousel__container .stomp .st-light-theme .name-ribbon,
.effects-editor-carousel__container .stomp .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .name-ribbon,
.horizontal-paywall-dialog .inner .body .artwork-background .effects-editor-carousel__container .stomp .artwork-title-container .name-ribbon,
.effects-editor-carousel__container .stomp .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .name-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper .effects-editor-carousel__container .stomp .button-pressed .name-ribbon,
.effects-editor-carousel__container .stomp .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .name-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper .effects-editor-carousel__container .stomp button:hover .name-ribbon,
.effects-editor-carousel__container .stomp .synth84enginegui .container .control-container .control-area .button-wrapper button .name-ribbon,
.synth84enginegui .container .control-container .control-area .button-wrapper .effects-editor-carousel__container .stomp button .name-ribbon,
.st-light-theme .mediumknob,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mediumknob,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mediumknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mediumknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button .mediumknob,
.st-light-theme .miniknob,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .miniknob,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .miniknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .miniknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button .miniknob,
.st-light-theme .miniled,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .miniled,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .miniled,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .miniled,
.synth84enginegui .container .control-container .control-area .button-wrapper button .miniled,
.st-light-theme .mango-button.disabled,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button.disabled,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button.disabled,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button.disabled,
.synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button.disabled,
.st-light-theme .disabled.mango-button-spotlight,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-spotlight,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-spotlight,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-spotlight,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-spotlight,
.st-light-theme .disabled.mango-button-weak-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-weak-XL,
.st-light-theme .disabled.mango-icon-button-emphasized-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-emphasized-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-emphasized-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-emphasized-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-emphasized-XL,
.st-light-theme .disabled.mango-icon-button-weak-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-weak-XL,
.st-light-theme .disabled.mango-button-weak-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-weak-L,
.st-light-theme .disabled.mango-icon-button-emphasized-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-emphasized-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-emphasized-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-emphasized-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-emphasized-L,
.st-light-theme .disabled.mango-icon-button-weak-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-weak-L,
.st-light-theme .disabled.mango-button-weak-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-weak-M,
.st-light-theme .disabled.mango-icon-button-emphasized-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-emphasized-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-emphasized-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-emphasized-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-emphasized-M,
.st-light-theme .disabled.mango-icon-button-weak-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-weak-M,
.st-light-theme .disabled.mango-button-weak-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-weak-S,
.st-light-theme .disabled.mango-icon-button-emphasized-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-emphasized-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-emphasized-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-emphasized-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-emphasized-S,
.st-light-theme .disabled.mango-icon-button-weak-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-weak-S,
.st-light-theme .disabled.mango-button-emphasised-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-emphasised-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-emphasised-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-emphasised-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-emphasised-XL,
.st-light-theme .disabled.mango-button-emphasised-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-emphasised-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-emphasised-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-emphasised-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-emphasised-L,
.st-light-theme .disabled.mango-button-emphasised-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-emphasised-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-emphasised-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-emphasised-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-emphasised-M,
.st-light-theme .disabled.mango-button-emphasised-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-emphasised-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-emphasised-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-emphasised-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-emphasised-S,
.st-light-theme .disabled.mango-button-regular-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-regular-XL,
.st-light-theme .disabled.mango-icon-button-regular-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-regular-XL,
.st-light-theme .disabled.mango-button-regular-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-regular-L,
.st-light-theme .disabled.mango-icon-button-regular-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-regular-L,
.st-light-theme .disabled.mango-button-regular-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-regular-M,
.st-light-theme .disabled.mango-icon-button-regular-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-regular-M,
.st-light-theme .disabled.mango-button-regular-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-regular-S,
.st-light-theme .disabled.mango-icon-button-regular-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-regular-S,
.st-light-theme .disabled.mango-button-special-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-special-S,
.st-light-theme .disabled.mango-icon-button-special-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-special-S,
.st-light-theme .disabled.mango-button-negative-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-negative-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-negative-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-negative-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-negative-S,
.st-light-theme .disabled.mango-button-spotlight-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-spotlight-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-spotlight-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-spotlight-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-spotlight-S,
.st-light-theme .disabled.mango-button-special-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-special-M,
.st-light-theme .disabled.mango-icon-button-special-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-special-M,
.st-light-theme .disabled.mango-button-negative-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-negative-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-negative-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-negative-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-negative-M,
.st-light-theme .disabled.mango-button-spotlight-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-spotlight-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-spotlight-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-spotlight-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-spotlight-M,
.st-light-theme .disabled.mango-button-special-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-special-L,
.st-light-theme .disabled.mango-icon-button-special-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-special-L,
.st-light-theme .disabled.mango-button-negative-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-negative-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-negative-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-negative-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-negative-L,
.st-light-theme .disabled.mango-button-spotlight-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-spotlight-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-spotlight-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-spotlight-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-spotlight-L,
.st-light-theme .disabled.mango-button-special-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-special-XL,
.st-light-theme .disabled.mango-icon-button-special-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-icon-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-icon-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-icon-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-icon-button-special-XL,
.st-light-theme .disabled.mango-button-negative-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-negative-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-negative-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-negative-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-negative-XL,
.st-light-theme .disabled.mango-button-spotlight-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-spotlight-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-spotlight-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-spotlight-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-spotlight-XL,
.st-light-theme .disabled.mango-button-weak,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-weak,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-weak,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-weak,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-weak,
.st-light-theme .disabled.mango-button-regular,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-regular,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-regular,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-regular,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-regular,
.st-light-theme .disabled.mango-button-special,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled.mango-button-special,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled.mango-button-special,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled.mango-button-special,
.synth84enginegui .container .control-container .control-area .button-wrapper button .disabled.mango-button-special,
.st-light-theme .mango-button[disabled],
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button[disabled],
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button[disabled],
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button[disabled],
.synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button[disabled],
.st-light-theme [disabled].mango-button-spotlight,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-spotlight,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-spotlight,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-spotlight,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-spotlight,
.st-light-theme [disabled].mango-button-weak-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-weak-XL,
.st-light-theme [disabled].mango-icon-button-emphasized-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-emphasized-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-emphasized-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-emphasized-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-emphasized-XL,
.st-light-theme [disabled].mango-icon-button-weak-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-weak-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-weak-XL,
.st-light-theme [disabled].mango-button-weak-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-weak-L,
.st-light-theme [disabled].mango-icon-button-emphasized-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-emphasized-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-emphasized-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-emphasized-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-emphasized-L,
.st-light-theme [disabled].mango-icon-button-weak-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-weak-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-weak-L,
.st-light-theme [disabled].mango-button-weak-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-weak-M,
.st-light-theme [disabled].mango-icon-button-emphasized-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-emphasized-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-emphasized-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-emphasized-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-emphasized-M,
.st-light-theme [disabled].mango-icon-button-weak-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-weak-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-weak-M,
.st-light-theme [disabled].mango-button-weak-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-weak-S,
.st-light-theme [disabled].mango-icon-button-emphasized-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-emphasized-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-emphasized-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-emphasized-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-emphasized-S,
.st-light-theme [disabled].mango-icon-button-weak-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-weak-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-weak-S,
.st-light-theme [disabled].mango-button-emphasised-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-emphasised-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-emphasised-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-emphasised-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-emphasised-XL,
.st-light-theme [disabled].mango-button-emphasised-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-emphasised-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-emphasised-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-emphasised-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-emphasised-L,
.st-light-theme [disabled].mango-button-emphasised-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-emphasised-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-emphasised-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-emphasised-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-emphasised-M,
.st-light-theme [disabled].mango-button-emphasised-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-emphasised-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-emphasised-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-emphasised-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-emphasised-S,
.st-light-theme [disabled].mango-button-regular-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-regular-XL,
.st-light-theme [disabled].mango-icon-button-regular-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-regular-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-regular-XL,
.st-light-theme [disabled].mango-button-regular-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-regular-L,
.st-light-theme [disabled].mango-icon-button-regular-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-regular-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-regular-L,
.st-light-theme [disabled].mango-button-regular-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-regular-M,
.st-light-theme [disabled].mango-icon-button-regular-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-regular-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-regular-M,
.st-light-theme [disabled].mango-button-regular-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-regular-S,
.st-light-theme [disabled].mango-icon-button-regular-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-regular-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-regular-S,
.st-light-theme [disabled].mango-button-special-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-special-S,
.st-light-theme [disabled].mango-icon-button-special-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-special-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-special-S,
.st-light-theme [disabled].mango-button-negative-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-negative-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-negative-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-negative-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-negative-S,
.st-light-theme [disabled].mango-button-spotlight-S,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-spotlight-S,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-spotlight-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-spotlight-S,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-spotlight-S,
.st-light-theme [disabled].mango-button-special-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-special-M,
.st-light-theme [disabled].mango-icon-button-special-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-special-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-special-M,
.st-light-theme [disabled].mango-button-negative-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-negative-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-negative-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-negative-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-negative-M,
.st-light-theme [disabled].mango-button-spotlight-M,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-spotlight-M,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-spotlight-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-spotlight-M,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-spotlight-M,
.st-light-theme [disabled].mango-button-special-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-special-L,
.st-light-theme [disabled].mango-icon-button-special-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-special-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-special-L,
.st-light-theme [disabled].mango-button-negative-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-negative-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-negative-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-negative-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-negative-L,
.st-light-theme [disabled].mango-button-spotlight-L,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-spotlight-L,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-spotlight-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-spotlight-L,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-spotlight-L,
.st-light-theme [disabled].mango-button-special-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-special-XL,
.st-light-theme [disabled].mango-icon-button-special-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-icon-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-icon-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-icon-button-special-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-icon-button-special-XL,
.st-light-theme [disabled].mango-button-negative-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-negative-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-negative-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-negative-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-negative-XL,
.st-light-theme [disabled].mango-button-spotlight-XL,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-spotlight-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-spotlight-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-spotlight-XL,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-spotlight-XL,
.st-light-theme [disabled].mango-button-weak,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-weak,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-weak,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-weak,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-weak,
.st-light-theme [disabled].mango-button-regular,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-regular,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-regular,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-regular,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-regular,
.st-light-theme [disabled].mango-button-special,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container [disabled].mango-button-special,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed [disabled].mango-button-special,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover [disabled].mango-button-special,
.synth84enginegui .container .control-container .control-area .button-wrapper button [disabled].mango-button-special {
  --background-base: #ffffff; /* The default background color of the base set. */
  --background-highlight: #f6f6f6; /* A background color that indicates the hover state of a component. */
  --background-press: #b7b7b7; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #ffffff; /* The default background color for elevated elements in the base set. */
  --background-elevated-highlight: #f6f6f6; /* For hover states of elevated elements */
  --background-elevated-press: #b7b7b7; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */
  --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */
  --text-base: #2d2d2d; /* The default text and icon color of the base set. */
  --text-subdued: #606060; /* For text and icons that are less prominent. */
  --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --text-spotlight: #a94c00; /* A text and icon color associated with subscriptions and purchasing. */
  --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --text-positive: #00773c; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --essential-base: #2d2d2d; /* The default essential color of the base set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #848484; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --essential-spotlight: #d76100; /* An essential color associated with with subscriptions and purchasing. */
  --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --decorative-base: #2d2d2d; /* The default decorative color of the base set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-secondary-base-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-secondary-base-set, .st-light-theme .rtc-beta-onboarding-tips, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rtc-beta-onboarding-tips, .st-light-theme .basicdialog, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .basicdialog, .st-light-theme .fxtoggle, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .fxtoggle, .st-light-theme .rounded-fxtoggle-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rounded-fxtoggle-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-secondary-base-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rtc-beta-onboarding-tips, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .basicdialog, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .fxtoggle, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rounded-fxtoggle-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-secondary-base-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .rtc-beta-onboarding-tips, .synth84enginegui .container .control-container .control-area .button-wrapper button .basicdialog, .synth84enginegui .container .control-container .control-area .button-wrapper button .fxtoggle, .synth84enginegui .container .control-container .control-area .button-wrapper button .rounded-fxtoggle-wrapper, .st-light-theme .miniknob, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .miniknob, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .miniknob, .synth84enginegui .container .control-container .control-area .button-wrapper button .miniknob,
.st-light-theme .smallknob,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .smallknob,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .smallknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button .smallknob,
.st-light-theme .mediumknob,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mediumknob,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mediumknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button .mediumknob,
.st-light-theme .bigknob,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .bigknob,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .bigknob,
.synth84enginegui .container .control-container .control-area .button-wrapper button .bigknob {
  --background-base: #f8f8f8; /* The default background color of the secondaryBase set. */
  --background-highlight: #efefef; /* A background color that indicates the hover state of a component. */
  --background-press: #b2b2b2; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #fdfdfd; /* The default background color for elevated elements in the secondaryBase set. */
  --background-elevated-highlight: #f4f4f4; /* For hover states of elevated elements */
  --background-elevated-press: #b6b6b6; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */
  --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */
  --text-base: #2d2d2d; /* The default text and icon color of the secondaryBase set. */
  --text-subdued: #5c5c5c; /* For text and icons that are less prominent. */
  --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --text-spotlight: #a34900; /* A text and icon color associated with subscriptions and purchasing. */
  --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --text-positive: #00733a; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --essential-base: #2d2d2d; /* The default essential color of the secondaryBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #7f7f7f; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --essential-spotlight: #d05d00; /* An essential color associated with with subscriptions and purchasing. */
  --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --decorative-base: #2d2d2d; /* The default decorative color of the secondaryBase set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #d8d8d8; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-primary-set, .st-light-theme .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .st-light-theme .button-cta, .st-light-theme .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-light-theme .list-icon, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-primary-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .artwork-background .artwork-title-container .button-cta, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .artwork-background .artwork-title-container .list-icon, .st-light-theme .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-light-theme .list-icon, .vertical-paywall-dialog .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .artwork-background .artwork-title-container .list-icon, .horizontal-paywall-dialog .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .artwork-background .artwork-title-container .list-icon, .vertical-paywall-dialog .horizontal-paywall-dialog .inner .body .artwork-background .body-wrapper .content .content-list li .artwork-title-container .list-icon, .horizontal-paywall-dialog .vertical-paywall-dialog .inner .body .artwork-background .body-wrapper .content .content-list li .artwork-title-container .list-icon, .st-light-theme .soundsetupwizard .bullets .bullet .circled, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .st-light-theme .circled, .soundsetupwizard .bullets .bullet .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .circled, .horizontal-paywall-dialog .inner .body .artwork-background .soundsetupwizard .bullets .bullet .artwork-title-container .circled, .st-light-theme .add-loop-dialog .input-row input[type=checkbox], .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .st-light-theme input[type=checkbox], .add-loop-dialog .input-row .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container input[type=checkbox], .horizontal-paywall-dialog .inner .body .artwork-background .add-loop-dialog .input-row .artwork-title-container input[type=checkbox],
.st-light-theme .edit-loop-dialog .input-row input[type=checkbox],
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .st-light-theme input[type=checkbox],
.edit-loop-dialog .input-row .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container input[type=checkbox],
.horizontal-paywall-dialog .inner .body .artwork-background .edit-loop-dialog .input-row .artwork-title-container input[type=checkbox], .st-light-theme .add-loop-dialog .inner .header, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .add-loop-dialog .inner .header, .add-loop-dialog .inner .st-light-theme .header, .add-loop-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .header, .horizontal-paywall-dialog .add-loop-dialog .inner .body .artwork-background .artwork-title-container .header,
.st-light-theme .edit-loop-dialog .inner .header,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .st-light-theme .header,
.edit-loop-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .header,
.horizontal-paywall-dialog .edit-loop-dialog .inner .body .artwork-background .artwork-title-container .header, .st-light-theme .create-from-template-dialog-2 .inner .project-template .tooltip, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .st-light-theme .tooltip, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .project-template .body .artwork-background .artwork-title-container .tooltip, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .project-template .body .artwork-background .artwork-title-container .tooltip, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .project-template .artwork-title-container .tooltip, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .project-template .artwork-title-container .tooltip, .st-light-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .st-light-theme .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .project-template.project-template-type-template.project-template-kind-music, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .artwork-title-container .project-template.project-template-type-template.project-template-kind-music, .st-light-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .st-light-theme .project-template-icon.musicstudio, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .project-template .body .artwork-background .artwork-title-container .project-template-icon.musicstudio, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .project-template .body .artwork-background .artwork-title-container .project-template-icon.musicstudio, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .project-template .artwork-title-container .project-template-icon.musicstudio, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .project-template .artwork-title-container .project-template-icon.musicstudio, .st-light-theme body.ff-handheld .new-dialog-large .title, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .st-light-theme .title, body.ff-handheld .new-dialog-large .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .title, .horizontal-paywall-dialog .inner .body .artwork-background body.ff-handheld .new-dialog-large .artwork-title-container .title, .st-light-theme .new-dialog-purple .title, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .new-dialog-purple .title, .new-dialog-purple .st-light-theme .title, .new-dialog-purple .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .title, .horizontal-paywall-dialog .inner .body .artwork-background .new-dialog-purple .artwork-title-container .title, .st-light-theme .new-dialog .closer, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .new-dialog .closer, .new-dialog .st-light-theme .closer, .new-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .closer, .horizontal-paywall-dialog .inner .body .artwork-background .new-dialog .artwork-title-container .closer, .st-light-theme .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .st-light-theme button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container button.selected-pattern, .horizontal-paywall-dialog .inner .body .artwork-background .arpeggiator-transform-controls__pattern-buttons .artwork-title-container button.selected-pattern, .st-light-theme .key-selector-menu button[aria-checked=true], .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .key-selector-menu button[aria-checked=true], .key-selector-menu .st-light-theme button[aria-checked=true], .key-selector-menu .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container button[aria-checked=true], .horizontal-paywall-dialog .inner .body .artwork-background .key-selector-menu .artwork-title-container button[aria-checked=true], .st-light-theme .threshold-control .threshold-thumb, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .threshold-control .threshold-thumb, .threshold-control .st-light-theme .threshold-thumb, .threshold-control .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .threshold-thumb, .horizontal-paywall-dialog .inner .body .artwork-background .threshold-control .artwork-title-container .threshold-thumb, .st-light-theme .vocal-clarity-gui .vocal-clarity-visualization, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .st-light-theme .vocal-clarity-visualization, .vocal-clarity-gui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocal-clarity-visualization, .horizontal-paywall-dialog .inner .body .artwork-background .vocal-clarity-gui .artwork-title-container .vocal-clarity-visualization, .st-light-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .st-light-theme .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-create-instrument-button.button-search, .horizontal-paywall-dialog .inner .body .artwork-background .sampler-ui-create-instrument-container .artwork-title-container .sampler-create-instrument-button.button-search, .st-light-theme .loop-tab-search-type-selector .option .st-radio, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .st-light-theme .st-radio, .loop-tab-search-type-selector .option .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-radio, .horizontal-paywall-dialog .inner .body .artwork-background .loop-tab-search-type-selector .option .artwork-title-container .st-radio, .st-light-theme .chatbubble-bubble.right, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .chatbubble-bubble.right, .st-light-theme .st-beta-tag, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-beta-tag, .st-light-theme .notification-area .notification, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .notification-area .notification, .notification-area .st-light-theme .notification, .notification-area .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .notification, .horizontal-paywall-dialog .inner .body .artwork-background .notification-area .artwork-title-container .notification, .st-light-theme .tempo-tapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tempo-tapper, .st-light-theme .st-anchored-tool-tip, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-anchored-tool-tip, .st-light-theme .sync-area, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sync-area, .st-light-theme .tippopup.theme-toggle-popup, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tippopup.theme-toggle-popup, .st-light-theme .tippopup, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tippopup, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-primary-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .button-cta, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .list-icon, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .list-icon, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .circled, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed input[type=checkbox],
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed input[type=checkbox], .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .add-loop-dialog .inner .header, .add-loop-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .header,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .header, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tooltip, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .project-template.project-template-type-template.project-template-kind-music, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .project-template-icon.musicstudio, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .title, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .new-dialog-purple .title, .new-dialog-purple .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .title, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .new-dialog .closer, .new-dialog .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed button.selected-pattern, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .key-selector-menu button[aria-checked=true], .key-selector-menu .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed button[aria-checked=true], .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .threshold-control .threshold-thumb, .threshold-control .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .threshold-thumb, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocal-clarity-visualization, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-create-instrument-button.button-search, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-radio, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .chatbubble-bubble.right, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-beta-tag, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .notification-area .notification, .notification-area .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .notification, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tempo-tapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-anchored-tool-tip, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sync-area, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tippopup.theme-toggle-popup, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tippopup, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-primary-set, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .button-cta, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .list-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .list-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .circled, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .synth84enginegui .container .control-container .control-area .button-wrapper button:hover input[type=checkbox],
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .synth84enginegui .container .control-container .control-area .button-wrapper button:hover input[type=checkbox], .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .add-loop-dialog .inner .header, .add-loop-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .header,
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .header, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tooltip, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .project-template.project-template-type-template.project-template-kind-music, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .project-template-icon.musicstudio, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .title, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .new-dialog-purple .title, .new-dialog-purple .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .title, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .new-dialog .closer, .new-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .closer, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .synth84enginegui .container .control-container .control-area .button-wrapper button:hover button.selected-pattern, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .key-selector-menu button[aria-checked=true], .key-selector-menu .synth84enginegui .container .control-container .control-area .button-wrapper button:hover button[aria-checked=true], .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .threshold-control .threshold-thumb, .threshold-control .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .threshold-thumb, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .vocal-clarity-visualization, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-create-instrument-button.button-search, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-radio, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .chatbubble-bubble.right, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-beta-tag, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .notification-area .notification, .notification-area .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .notification, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tempo-tapper, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-anchored-tool-tip, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sync-area, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tippopup.theme-toggle-popup, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tippopup, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-primary-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .synth84enginegui .container .control-container .control-area .button-wrapper button .button-cta, .synth84enginegui .container .control-container .control-area .button-wrapper button .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .synth84enginegui .container .control-container .control-area .button-wrapper button .list-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .synth84enginegui .container .control-container .control-area .button-wrapper button .list-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .synth84enginegui .container .control-container .control-area .button-wrapper button .circled, .synth84enginegui .container .control-container .control-area .button-wrapper button .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .synth84enginegui .container .control-container .control-area .button-wrapper button input[type=checkbox],
.synth84enginegui .container .control-container .control-area .button-wrapper button .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .synth84enginegui .container .control-container .control-area .button-wrapper button input[type=checkbox], .synth84enginegui .container .control-container .control-area .button-wrapper button .add-loop-dialog .inner .header, .add-loop-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .header,
.synth84enginegui .container .control-container .control-area .button-wrapper button .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .header, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper button .tooltip, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .project-template.project-template-type-template.project-template-kind-music, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper button .project-template-icon.musicstudio, .synth84enginegui .container .control-container .control-area .button-wrapper button body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .synth84enginegui .container .control-container .control-area .button-wrapper button .title, .synth84enginegui .container .control-container .control-area .button-wrapper button .new-dialog-purple .title, .new-dialog-purple .synth84enginegui .container .control-container .control-area .button-wrapper button .title, .synth84enginegui .container .control-container .control-area .button-wrapper button .new-dialog .closer, .new-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button .closer, .synth84enginegui .container .control-container .control-area .button-wrapper button .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .synth84enginegui .container .control-container .control-area .button-wrapper button button.selected-pattern, .synth84enginegui .container .control-container .control-area .button-wrapper button .key-selector-menu button[aria-checked=true], .key-selector-menu .synth84enginegui .container .control-container .control-area .button-wrapper button button[aria-checked=true], .synth84enginegui .container .control-container .control-area .button-wrapper button .threshold-control .threshold-thumb, .threshold-control .synth84enginegui .container .control-container .control-area .button-wrapper button .threshold-thumb, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .synth84enginegui .container .control-container .control-area .button-wrapper button .vocal-clarity-visualization, .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-create-instrument-button.button-search, .synth84enginegui .container .control-container .control-area .button-wrapper button .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .synth84enginegui .container .control-container .control-area .button-wrapper button .st-radio, .synth84enginegui .container .control-container .control-area .button-wrapper button .chatbubble-bubble.right, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-beta-tag, .synth84enginegui .container .control-container .control-area .button-wrapper button .notification-area .notification, .notification-area .synth84enginegui .container .control-container .control-area .button-wrapper button .notification, .synth84enginegui .container .control-container .control-area .button-wrapper button .tempo-tapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-anchored-tool-tip, .synth84enginegui .container .control-container .control-area .button-wrapper button .sync-area, .synth84enginegui .container .control-container .control-area .button-wrapper button .tippopup.theme-toggle-popup, .synth84enginegui .container .control-container .control-area .button-wrapper button .tippopup, .st-light-theme .effect-picker__search-tag.active, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effect-picker__search-tag.active, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effect-picker__search-tag.active, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effect-picker__search-tag.active, .synth84enginegui .container .control-container .control-area .button-wrapper button .effect-picker__search-tag.active, .st-light-theme .assistant .MessageBubble--right, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .assistant .MessageBubble--right, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .assistant .MessageBubble--right, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .assistant .MessageBubble--right, .synth84enginegui .container .control-container .control-area .button-wrapper button .assistant .MessageBubble--right, .assistant .st-light-theme .MessageBubble--right, .assistant .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .MessageBubble--right, .horizontal-paywall-dialog .inner .body .artwork-background .assistant .artwork-title-container .MessageBubble--right, .assistant .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .MessageBubble--right, .synth84enginegui .container .control-container .control-area .button-wrapper .assistant .button-pressed .MessageBubble--right, .assistant .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .MessageBubble--right, .synth84enginegui .container .control-container .control-area .button-wrapper .assistant button:hover .MessageBubble--right, .assistant .synth84enginegui .container .control-container .control-area .button-wrapper button .MessageBubble--right, .synth84enginegui .container .control-container .control-area .button-wrapper .assistant button .MessageBubble--right, .st-light-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .synth84enginegui .container .control-container .control-area .button-wrapper button .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-light-theme .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab, .horizontal-paywall-dialog .inner .body .artwork-background .rightsidebar.collapsed .rightsidebarwrapper .tabbar .artwork-title-container .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.collapsed .rightsidebarwrapper .tabbar .button-pressed .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.collapsed .rightsidebarwrapper .tabbar button:hover .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.collapsed .rightsidebarwrapper .tabbar button .tab, .st-light-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .synth84enginegui .container .control-container .control-area .button-wrapper button .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-light-theme .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab, .horizontal-paywall-dialog .inner .body .artwork-background .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .artwork-title-container .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .button-pressed .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar button:hover .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .synth84enginegui .container .control-container .control-area .button-wrapper button .tab, .synth84enginegui .container .control-container .control-area .button-wrapper .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar button .tab, .st-light-theme .instrument-loading-progress, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .instrument-loading-progress, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .instrument-loading-progress, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .instrument-loading-progress, .synth84enginegui .container .control-container .control-area .button-wrapper button .instrument-loading-progress, .st-light-theme .transport-controls__button.selected, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .transport-controls__button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .transport-controls__button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .transport-controls__button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper button .transport-controls__button.selected, .st-light-theme .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .synth84enginegui .container .control-container .control-area .button-wrapper button .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .st-light-theme .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tracklistheader__localOverrideButtonArea:before, .horizontal-paywall-dialog .inner .body .artwork-background .tracklistheader__localOverride--enabled .artwork-title-container .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tracklistheader__localOverrideButtonArea:before, .synth84enginegui .container .control-container .control-area .button-wrapper .tracklistheader__localOverride--enabled .button-pressed .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tracklistheader__localOverrideButtonArea:before, .synth84enginegui .container .control-container .control-area .button-wrapper .tracklistheader__localOverride--enabled button:hover .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .synth84enginegui .container .control-container .control-area .button-wrapper button .tracklistheader__localOverrideButtonArea:before, .synth84enginegui .container .control-container .control-area .button-wrapper .tracklistheader__localOverride--enabled button .tracklistheader__localOverrideButtonArea:before, .st-light-theme .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .st-light-theme .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .local-overlay.local-mute-solo:before, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .controls-row-local-override .artwork-title-container .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .local-overlay.local-mute-solo:before, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .controls-row-local-override .button-pressed .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .local-overlay.local-mute-solo:before, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .controls-row-local-override button:hover .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .synth84enginegui .container .control-container .control-area .button-wrapper button .local-overlay.local-mute-solo:before, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .controls-row-local-override button .local-overlay.local-mute-solo:before, .st-light-theme .notificationmessage, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .notificationmessage, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .notificationmessage, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .notificationmessage, .synth84enginegui .container .control-container .control-area .button-wrapper button .notificationmessage, .st-light-theme .effects-editor-card__movement-controls, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effects-editor-card__movement-controls, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effects-editor-card__movement-controls, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effects-editor-card__movement-controls, .synth84enginegui .container .control-container .control-area .button-wrapper button .effects-editor-card__movement-controls, .st-light-theme .st-tooltip2-callout, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-tooltip2-callout, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-tooltip2-callout, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-tooltip2-callout, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-tooltip2-callout, .st-light-theme .st-toggle-button-wrapper.base.on .st-toggle-button, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-toggle-button-wrapper.base.on .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-toggle-button-wrapper.base.on .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-toggle-button-wrapper.base.on .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-toggle-button-wrapper.base.on .st-toggle-button, .st-toggle-button-wrapper.base.on .st-light-theme .st-toggle-button, .st-toggle-button-wrapper.base.on .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-toggle-button, .horizontal-paywall-dialog .inner .body .artwork-background .st-toggle-button-wrapper.base.on .artwork-title-container .st-toggle-button, .st-toggle-button-wrapper.base.on .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .st-toggle-button-wrapper.base.on .button-pressed .st-toggle-button, .st-toggle-button-wrapper.base.on .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .st-toggle-button-wrapper.base.on button:hover .st-toggle-button, .st-toggle-button-wrapper.base.on .synth84enginegui .container .control-container .control-area .button-wrapper button .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .st-toggle-button-wrapper.base.on button .st-toggle-button, .st-light-theme .mango-button-special-S, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-special-S, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-special-S, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-special-S, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-special-S, .st-light-theme .mango-icon-button-special-S, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-icon-button-special-S, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-icon-button-special-S, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-icon-button-special-S, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-icon-button-special-S, .st-light-theme .mango-button-negative-S, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-S, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-S, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-negative-S, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-S, .st-light-theme .mango-button-spotlight-S, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-S, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-S, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-spotlight-S, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-S, .st-light-theme .mango-button-special-M, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-special-M, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-special-M, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-special-M, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-special-M, .st-light-theme .mango-icon-button-special-M, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-icon-button-special-M, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-icon-button-special-M, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-icon-button-special-M, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-icon-button-special-M, .st-light-theme .mango-button-negative-M, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-M, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-M, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-negative-M, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-M, .st-light-theme .mango-button-spotlight-M, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-M, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-M, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-spotlight-M, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-M, .st-light-theme .mango-button-special-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-special-L, .st-light-theme .mango-icon-button-special-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-icon-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-icon-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-icon-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-icon-button-special-L, .st-light-theme .mango-button-negative-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-L, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-negative-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-L, .st-light-theme .mango-button-spotlight-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-L, .st-light-theme .mango-button-special-XL, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-special-XL, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-special-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-special-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-special-XL, .st-light-theme .mango-icon-button-special-XL, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-icon-button-special-XL, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-icon-button-special-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-icon-button-special-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-icon-button-special-XL, .st-light-theme .mango-button-negative-XL, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-XL, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-negative-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-XL, .st-light-theme .mango-button-spotlight-XL, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-XL, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .mango-button-spotlight-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-XL {
  --background-base: #430877; /* The default background color of the primary set. */
  --background-highlight: #360661; /* A background color that indicates the hover state of a component. */
  --background-press: #280547; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #430877; /* fallback */
  --background-elevated-highlight: #430877; /* fallback */
  --background-elevated-press: #430877; /* fallback */
  --background-tinted-base: #430877; /* fallback */
  --background-tinted-highlight: #430877; /* fallback */
  --background-tinted-press: #430877; /* fallback */
  --text-base: #ffffff; /* The default text and icon color of the primary set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the primary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the primary set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #5b0ba1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-spotlight-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-spotlight-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-spotlight-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-spotlight-set, .st-light-theme .cyclemarker.selected.spotlight, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .cyclemarker.selected.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .cyclemarker.selected.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper button .cyclemarker.selected.spotlight, .st-light-theme .pianoroll .piano-roll-cycle-marker, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .pianoroll .piano-roll-cycle-marker, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .pianoroll .piano-roll-cycle-marker, .synth84enginegui .container .control-container .control-area .button-wrapper button .pianoroll .piano-roll-cycle-marker, .pianoroll .st-light-theme .piano-roll-cycle-marker, .pianoroll .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .piano-roll-cycle-marker, .horizontal-paywall-dialog .inner .body .artwork-background .pianoroll .artwork-title-container .piano-roll-cycle-marker, .pianoroll .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .piano-roll-cycle-marker, .synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .button-pressed .piano-roll-cycle-marker, .pianoroll .synth84enginegui .container .control-container .control-area .button-wrapper button .piano-roll-cycle-marker, .synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll button .piano-roll-cycle-marker, .st-light-theme .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper button .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .st-light-theme .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .fatfingerbutton.cycletoggle > button.selected, .horizontal-paywall-dialog .inner .body .artwork-background .middleheader .compositionheader .gridcontrols .artwork-title-container .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .fatfingerbutton.cycletoggle > button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .middleheader .compositionheader .gridcontrols .button-pressed .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .synth84enginegui .container .control-container .control-area .button-wrapper button .fatfingerbutton.cycletoggle > button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .middleheader .compositionheader .gridcontrols button .fatfingerbutton.cycletoggle > button.selected, .st-light-theme .middleheader .compositionheader .cycleendguide.spotlight, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .middleheader .compositionheader .cycleendguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .middleheader .compositionheader .cycleendguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper button .middleheader .compositionheader .cycleendguide.spotlight, .middleheader .compositionheader .st-light-theme .cycleendguide.spotlight, .middleheader .compositionheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .cycleendguide.spotlight, .horizontal-paywall-dialog .inner .body .artwork-background .middleheader .compositionheader .artwork-title-container .cycleendguide.spotlight, .middleheader .compositionheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .cycleendguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .middleheader .compositionheader .button-pressed .cycleendguide.spotlight, .middleheader .compositionheader .synth84enginegui .container .control-container .control-area .button-wrapper button .cycleendguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .middleheader .compositionheader button .cycleendguide.spotlight, .st-light-theme .middleheader .compositionheader .cyclestartguide.spotlight, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .middleheader .compositionheader .cyclestartguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .middleheader .compositionheader .cyclestartguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper button .middleheader .compositionheader .cyclestartguide.spotlight, .middleheader .compositionheader .st-light-theme .cyclestartguide.spotlight, .middleheader .compositionheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .cyclestartguide.spotlight, .horizontal-paywall-dialog .inner .body .artwork-background .middleheader .compositionheader .artwork-title-container .cyclestartguide.spotlight, .middleheader .compositionheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .cyclestartguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .middleheader .compositionheader .button-pressed .cyclestartguide.spotlight, .middleheader .compositionheader .synth84enginegui .container .control-container .control-area .button-wrapper button .cyclestartguide.spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .middleheader .compositionheader button .cyclestartguide.spotlight, .st-light-theme .mango-button-spotlight-XL, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-XL, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-XL, .st-light-theme .mango-button-spotlight-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-L, .st-light-theme .mango-button-spotlight-M, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-M, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-M, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-M, .st-light-theme .mango-button-spotlight-S, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-S, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-S, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-S, .st-light-theme .mango-button-spotlight, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight {
  --background-base: #ff780a; /* The default background color of the spotlight set. */
  --background-highlight: #ff8b2d; /* A background color that indicates the hover state of a component. */
  --background-press: #f36d00; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #ff780a; /* fallback */
  --background-elevated-highlight: #ff780a; /* fallback */
  --background-elevated-press: #ff780a; /* fallback */
  --background-tinted-base: #ff780a; /* fallback */
  --background-tinted-highlight: #ff780a; /* fallback */
  --background-tinted-press: #ff780a; /* fallback */
  --text-base: #000000; /* The default text and icon color of the spotlight set. */
  --text-subdued: #000000; /* fallback */
  --text-primary: #000000; /* fallback */
  --text-negative: #000000; /* fallback */
  --text-spotlight: #000000; /* fallback */
  --text-positive: #000000; /* fallback */
  --essential-base: #000000; /* The default essential color of the spotlight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #000000; /* fallback */
  --essential-primary: #000000; /* fallback */
  --essential-negative: #000000; /* fallback */
  --essential-spotlight: #000000; /* fallback */
  --essential-positive: #000000; /* fallback */
  --decorative-base: #000000; /* The default decorative color of the spotlight set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #e26500; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-negative-set, .st-light-theme .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .st-light-theme .failure, .st-light-theme .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .st-light-theme .result-description-background, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-negative-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .failure, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .result-description-background, .st-light-theme .discussion-delete-dialog .mango-button-special-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .st-light-theme .mango-button-special-L, .discussion-delete-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-special-L, .horizontal-paywall-dialog .inner .body .artwork-background .discussion-delete-dialog .artwork-title-container .mango-button-special-L, .st-light-theme .discussion-delete-dialog .mango-button-spotlight-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .st-light-theme .mango-button-spotlight-L, .discussion-delete-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-spotlight-L, .horizontal-paywall-dialog .inner .body .artwork-background .discussion-delete-dialog .artwork-title-container .mango-button-spotlight-L, .st-light-theme .discussion-delete-dialog .mango-icon-button-special-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .st-light-theme .mango-icon-button-special-L, .discussion-delete-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-icon-button-special-L, .horizontal-paywall-dialog .inner .body .artwork-background .discussion-delete-dialog .artwork-title-container .mango-icon-button-special-L, .st-light-theme .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .st-light-theme .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-dialog-footer > button:last-child, .horizontal-paywall-dialog .inner .body .artwork-background .remove-collaborator-confirmation-container .artwork-title-container .st-dialog-footer > button:last-child, .st-light-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .st-light-theme .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .project-template.project-template-type-template.project-template-kind-podcast, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .artwork-title-container .project-template.project-template-type-template.project-template-kind-podcast, .st-light-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .st-light-theme .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-area-background, .horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .status-area:not(.ok) .artwork-title-container .status-area-background, .st-light-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .st-light-theme .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-icon:not(.ok), .horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .device-selection-area .artwork-title-container .status-icon:not(.ok), .st-light-theme .st-card__failure, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card__failure, .st-light-theme .st-card-button__failure, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button__failure, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-negative-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .failure, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .result-description-background, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-icon-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-dialog-footer > button:last-child, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .project-template.project-template-type-template.project-template-kind-podcast, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-area-background, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-icon:not(.ok), .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card__failure, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button__failure, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-negative-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper button .failure, .synth84enginegui .container .control-container .control-area .button-wrapper button .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .synth84enginegui .container .control-container .control-area .button-wrapper button .result-description-background, .synth84enginegui .container .control-container .control-area .button-wrapper button .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-spotlight-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-icon-button-special-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .synth84enginegui .container .control-container .control-area .button-wrapper button .st-dialog-footer > button:last-child, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .project-template.project-template-type-template.project-template-kind-podcast, .synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .synth84enginegui .container .control-container .control-area .button-wrapper button .status-area-background, .synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .synth84enginegui .container .control-container .control-area .button-wrapper button .status-icon:not(.ok), .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card__failure, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button__failure, .st-light-theme .transport-controls .rec.selected, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .transport-controls .rec.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .transport-controls .rec.selected, .synth84enginegui .container .control-container .control-area .button-wrapper button .transport-controls .rec.selected, .transport-controls .st-light-theme .rec.selected, .transport-controls .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .rec.selected, .horizontal-paywall-dialog .inner .body .artwork-background .transport-controls .artwork-title-container .rec.selected, .transport-controls .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .rec.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .transport-controls .button-pressed .rec.selected, .transport-controls .synth84enginegui .container .control-container .control-area .button-wrapper button .rec.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .transport-controls button .rec.selected, .st-light-theme .vocalsinstrumentgui .stop-button, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocalsinstrumentgui .stop-button, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocalsinstrumentgui .stop-button, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocalsinstrumentgui .stop-button, .vocalsinstrumentgui .st-light-theme .stop-button, .vocalsinstrumentgui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stop-button, .horizontal-paywall-dialog .inner .body .artwork-background .vocalsinstrumentgui .artwork-title-container .stop-button, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stop-button, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui .button-pressed .stop-button, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button .stop-button, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui button .stop-button, .st-light-theme .vocalsinstrumentgui .record-button, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocalsinstrumentgui .record-button, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocalsinstrumentgui .record-button, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocalsinstrumentgui .record-button, .vocalsinstrumentgui .st-light-theme .record-button, .vocalsinstrumentgui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .record-button, .horizontal-paywall-dialog .inner .body .artwork-background .vocalsinstrumentgui .artwork-title-container .record-button, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .record-button, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui .button-pressed .record-button, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button .record-button, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui button .record-button, .st-light-theme .mango-button-negative-XL, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-XL, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-XL, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-XL, .st-light-theme .mango-button-negative-L, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-L, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-L, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-L, .st-light-theme .mango-button-negative-M, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-M, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-M, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-M, .st-light-theme .mango-button-negative-S, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mango-button-negative-S, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mango-button-negative-S, .synth84enginegui .container .control-container .control-area .button-wrapper button .mango-button-negative-S {
  --background-base: #b4074b; /* The default background color of the negative set. */
  --background-highlight: #a50645; /* A background color that indicates the hover state of a component. */
  --background-press: #96063f; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #b4074b; /* fallback */
  --background-elevated-highlight: #b4074b; /* fallback */
  --background-elevated-press: #b4074b; /* fallback */
  --background-tinted-base: #b4074b; /* fallback */
  --background-tinted-highlight: #b4074b; /* fallback */
  --background-tinted-press: #b4074b; /* fallback */
  --text-base: #ffffff; /* The default text and icon color of the negative set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the negative set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the negative set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #d60859; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-positive-set, .st-light-theme .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .st-light-theme .success, .st-light-theme .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .st-light-theme .result-description-background, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-positive-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .success, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .result-description-background, .st-light-theme .presetselectordialog .dialogcontent .new-preset-announcement-text, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .st-light-theme .new-preset-announcement-text, .presetselectordialog .dialogcontent .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .new-preset-announcement-text, .horizontal-paywall-dialog .inner .body .artwork-background .presetselectordialog .dialogcontent .artwork-title-container .new-preset-announcement-text, .st-light-theme .presetselectordialog .dialogcontent .new-preset-announcement-badge, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .st-light-theme .new-preset-announcement-badge, .presetselectordialog .dialogcontent .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .new-preset-announcement-badge, .horizontal-paywall-dialog .inner .body .artwork-background .presetselectordialog .dialogcontent .artwork-title-container .new-preset-announcement-badge, .st-light-theme .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .st-light-theme .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-area-background, .horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .status-area.ok .artwork-title-container .status-area-background, .st-light-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .st-light-theme .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .status-icon.ok, .horizontal-paywall-dialog .inner .body .artwork-background .mididialog2 > .st-dialog-body .device-selection-area .artwork-title-container .status-icon.ok, .st-light-theme .download-card__best-quality, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .download-card__best-quality, .st-light-theme .st-card__success, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card__success, .st-light-theme .st-card__mini-icon, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card__mini-icon, .st-light-theme .st-card-button__success, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button__success, .st-light-theme .st-card-button__mini-icon, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button__mini-icon, .st-light-theme .search-type-new-tag, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .search-type-new-tag, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-positive-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .success, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .result-description-background, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .new-preset-announcement-text, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .new-preset-announcement-badge, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-area-background, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .status-icon.ok, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .download-card__best-quality, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card__success, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card__mini-icon, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button__success, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button__mini-icon, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .search-type-new-tag, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-positive-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper button .success, .synth84enginegui .container .control-container .control-area .button-wrapper button .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .synth84enginegui .container .control-container .control-area .button-wrapper button .result-description-background, .synth84enginegui .container .control-container .control-area .button-wrapper button .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .synth84enginegui .container .control-container .control-area .button-wrapper button .new-preset-announcement-text, .synth84enginegui .container .control-container .control-area .button-wrapper button .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .synth84enginegui .container .control-container .control-area .button-wrapper button .new-preset-announcement-badge, .synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .synth84enginegui .container .control-container .control-area .button-wrapper button .status-area-background, .synth84enginegui .container .control-container .control-area .button-wrapper button .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .synth84enginegui .container .control-container .control-area .button-wrapper button .status-icon.ok, .synth84enginegui .container .control-container .control-area .button-wrapper button .download-card__best-quality, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card__success, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card__mini-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button__success, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button__mini-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button .search-type-new-tag, .st-light-theme .presetselectorpresetitem .new-preset-badge, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .presetselectorpresetitem .new-preset-badge, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .presetselectorpresetitem .new-preset-badge, .synth84enginegui .container .control-container .control-area .button-wrapper button .presetselectorpresetitem .new-preset-badge, .presetselectorpresetitem .st-light-theme .new-preset-badge, .presetselectorpresetitem .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .new-preset-badge, .horizontal-paywall-dialog .inner .body .artwork-background .presetselectorpresetitem .artwork-title-container .new-preset-badge, .presetselectorpresetitem .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .new-preset-badge, .synth84enginegui .container .control-container .control-area .button-wrapper .presetselectorpresetitem .button-pressed .new-preset-badge, .presetselectorpresetitem .synth84enginegui .container .control-container .control-area .button-wrapper button .new-preset-badge, .synth84enginegui .container .control-container .control-area .button-wrapper .presetselectorpresetitem button .new-preset-badge {
  --background-base: #008744; /* The default background color of the positive set. */
  --background-highlight: #007d3f; /* A background color that indicates the hover state of a component. */
  --background-press: #00743a; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #008744; /* fallback */
  --background-elevated-highlight: #008744; /* fallback */
  --background-elevated-press: #008744; /* fallback */
  --background-tinted-base: #008744; /* fallback */
  --background-tinted-highlight: #008744; /* fallback */
  --background-tinted-press: #008744; /* fallback */
  --text-base: #ffffff; /* The default text and icon color of the positive set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the positive set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the positive set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #009b4e; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-contrasting-base-set, .st-light-theme .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .st-light-theme .try-vocal-tuner, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-contrasting-base-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .try-vocal-tuner, .st-light-theme .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .st-light-theme .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .upgrade-icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .remove-paid-effect-warning-dialog .upgrade-icon-container .artwork-title-container .upgrade-icon-wrapper, .st-light-theme .st-premium-badge, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-premium-badge, .st-light-theme .download-card__paywall-icon, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .download-card__paywall-icon, .st-light-theme .st-slider.contrasting-theme, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-slider.contrasting-theme, .st-light-theme .playable-waveform-preview.waveform-inverted-theme, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playable-waveform-preview.waveform-inverted-theme, .st-light-theme .star-rating-survey, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .star-rating-survey, .st-light-theme .add-lane-button, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .add-lane-button, .st-light-theme .step-sequencer-cell, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-cell, .st-light-theme .step-sequencer-view .step-sequencer-editor .bar-markers, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .st-light-theme .bar-markers, .step-sequencer-view .step-sequencer-editor .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .bar-markers, .horizontal-paywall-dialog .inner .body .artwork-background .step-sequencer-view .step-sequencer-editor .artwork-title-container .bar-markers, .st-light-theme .step-sequencer-view .step-sequencer-editor .headers .lane-header, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .st-light-theme .lane-header, .step-sequencer-view .step-sequencer-editor .headers .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .lane-header, .horizontal-paywall-dialog .inner .body .artwork-background .step-sequencer-view .step-sequencer-editor .headers .artwork-title-container .lane-header, .st-light-theme .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .st-light-theme .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-lanes-scrollable, .horizontal-paywall-dialog .inner .body .artwork-background .step-sequencer-view .step-sequencer-editor .artwork-title-container .step-sequencer-lanes-scrollable, .st-light-theme .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .st-light-theme .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playhead-cell, .horizontal-paywall-dialog .inner .body .artwork-background .step-sequencer-view .step-sequencer-editor .playhead-lane .artwork-title-container .playhead-cell, .st-light-theme .step-sequencer-view .step-sequencer-editor, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .st-light-theme .step-sequencer-editor, .step-sequencer-view .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .step-sequencer-editor, .horizontal-paywall-dialog .inner .body .artwork-background .step-sequencer-view .artwork-title-container .step-sequencer-editor, .st-light-theme .drum-controller-desktop .elem-l .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .st-light-theme .inner-1, .drum-controller-desktop .elem-l .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-l .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-l, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-l, .drum-controller-desktop .st-light-theme .elem-l, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-l, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-l, .st-light-theme .drum-controller-desktop .elem-k .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .st-light-theme .inner-1, .drum-controller-desktop .elem-k .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-k .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-k, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-k, .drum-controller-desktop .st-light-theme .elem-k, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-k, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-k, .st-light-theme .drum-controller-desktop .elem-j .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .st-light-theme .inner-1, .drum-controller-desktop .elem-j .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-j .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-j, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-j, .drum-controller-desktop .st-light-theme .elem-j, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-j, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-j, .st-light-theme .drum-controller-desktop .elem-i .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .st-light-theme .inner-2, .drum-controller-desktop .elem-i .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-i .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-i .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .st-light-theme .inner-1, .drum-controller-desktop .elem-i .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-i .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-i, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-i, .drum-controller-desktop .st-light-theme .elem-i, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-i, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-i, .st-light-theme .drum-controller-desktop .elem-h .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .st-light-theme .inner-2, .drum-controller-desktop .elem-h .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-h .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-h .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .st-light-theme .inner-1, .drum-controller-desktop .elem-h .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-h .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-h, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-h, .drum-controller-desktop .st-light-theme .elem-h, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-h, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-h, .st-light-theme .drum-controller-desktop .elem-g .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .st-light-theme .inner-2, .drum-controller-desktop .elem-g .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-g .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-g .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .st-light-theme .inner-1, .drum-controller-desktop .elem-g .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-g .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-g, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-g, .drum-controller-desktop .st-light-theme .elem-g, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-g, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-g, .st-light-theme .drum-controller-desktop .elem-f .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .st-light-theme .inner-2, .drum-controller-desktop .elem-f .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-f .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-f .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .st-light-theme .inner-1, .drum-controller-desktop .elem-f .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-f .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-f, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-f, .drum-controller-desktop .st-light-theme .elem-f, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-f, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-f, .st-light-theme .drum-controller-desktop .elem-e .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .st-light-theme .inner-2, .drum-controller-desktop .elem-e .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-e .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-e .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .st-light-theme .inner-1, .drum-controller-desktop .elem-e .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-e .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-e, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-e, .drum-controller-desktop .st-light-theme .elem-e, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-e, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-e, .st-light-theme .drum-controller-desktop .elem-d .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .st-light-theme .inner-2, .drum-controller-desktop .elem-d .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-d .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-d .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .st-light-theme .inner-1, .drum-controller-desktop .elem-d .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-d .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-d, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-d, .drum-controller-desktop .st-light-theme .elem-d, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-d, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-d, .st-light-theme .drum-controller-desktop .elem-c .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .st-light-theme .inner-2, .drum-controller-desktop .elem-c .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-c .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-c .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .st-light-theme .inner-1, .drum-controller-desktop .elem-c .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-c .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-c, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-c, .drum-controller-desktop .st-light-theme .elem-c, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-c, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-c, .st-light-theme .drum-controller-desktop .elem-b .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .st-light-theme .inner-2, .drum-controller-desktop .elem-b .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-2, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-b .artwork-title-container .inner-2, .st-light-theme .drum-controller-desktop .elem-b .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .st-light-theme .inner-1, .drum-controller-desktop .elem-b .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-b .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-b, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-b, .drum-controller-desktop .st-light-theme .elem-b, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-b, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-b, .st-light-theme .drum-controller-desktop .elem-a .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .st-light-theme .inner-1, .drum-controller-desktop .elem-a .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .inner-1, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .elem-a .artwork-title-container .inner-1, .st-light-theme .drum-controller-desktop .elem-a, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .elem-a, .drum-controller-desktop .st-light-theme .elem-a, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .elem-a, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .elem-a, .st-light-theme .drum-controller-desktop .key, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .key, .drum-controller-desktop .st-light-theme .key, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .key, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .key, .st-light-theme .drum-controller-desktop .hit-overlay, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-desktop .hit-overlay, .drum-controller-desktop .st-light-theme .hit-overlay, .drum-controller-desktop .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .hit-overlay, .horizontal-paywall-dialog .inner .body .artwork-background .drum-controller-desktop .artwork-title-container .hit-overlay, .st-light-theme .drum-controller-touch, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .drum-controller-touch, .st-light-theme .dnd-sampler-engine-gui, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .dnd-sampler-engine-gui, .st-light-theme .bass808enginegui, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .bass808enginegui, .st-light-theme .sampler1enginegui, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler1enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-contrasting-base-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .try-vocal-tuner, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .upgrade-icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-premium-badge, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .download-card__paywall-icon, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-slider.contrasting-theme, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playable-waveform-preview.waveform-inverted-theme, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .star-rating-survey, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .add-lane-button, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-cell, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .bar-markers, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .lane-header, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-lanes-scrollable, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playhead-cell, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .step-sequencer-editor, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-l, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-l, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-k, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-k, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-j, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-j, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-i, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-i, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-h, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-h, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-g, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-g, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-f, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-f, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-e, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-e, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-d, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-d, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-c, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-c, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-b, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-b, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .elem-a, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .elem-a, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .key, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .key, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-desktop .hit-overlay, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .hit-overlay, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .drum-controller-touch, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .dnd-sampler-engine-gui, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .bass808enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler1enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-contrasting-base-set, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .try-vocal-tuner, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .upgrade-icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-premium-badge, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .download-card__paywall-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-slider.contrasting-theme, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .playable-waveform-preview.waveform-inverted-theme, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .star-rating-survey, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .add-lane-button, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-cell, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .bar-markers, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .lane-header, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-lanes-scrollable, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .playhead-cell, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .step-sequencer-editor, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-l, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-l, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-k, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-k, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-j, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-j, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-i, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-i, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-h, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-h, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-g, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-g, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-f, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-f, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-e, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-e, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-d, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-d, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-c, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-c, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-b, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-b, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .elem-a, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .elem-a, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .key, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .key, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-desktop .hit-overlay, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .hit-overlay, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .drum-controller-touch, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .dnd-sampler-engine-gui, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .bass808enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler1enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-contrasting-base-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .synth84enginegui .container .control-container .control-area .button-wrapper button .try-vocal-tuner, .synth84enginegui .container .control-container .control-area .button-wrapper button .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .synth84enginegui .container .control-container .control-area .button-wrapper button .upgrade-icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-premium-badge, .synth84enginegui .container .control-container .control-area .button-wrapper button .download-card__paywall-icon, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-slider.contrasting-theme, .synth84enginegui .container .control-container .control-area .button-wrapper button .playable-waveform-preview.waveform-inverted-theme, .synth84enginegui .container .control-container .control-area .button-wrapper button .star-rating-survey, .synth84enginegui .container .control-container .control-area .button-wrapper button .add-lane-button, .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-cell, .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .synth84enginegui .container .control-container .control-area .button-wrapper button .bar-markers, .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .synth84enginegui .container .control-container .control-area .button-wrapper button .lane-header, .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-lanes-scrollable, .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .synth84enginegui .container .control-container .control-area .button-wrapper button .playhead-cell, .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .synth84enginegui .container .control-container .control-area .button-wrapper button .step-sequencer-editor, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-l, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-l, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-k, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-k, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-j, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-j, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-i, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-i, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-h, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-h, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-g, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-g, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-f, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-f, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-e, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-e, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-d, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-d, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-c, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-c, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-2, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-b, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-b, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .synth84enginegui .container .control-container .control-area .button-wrapper button .inner-1, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .elem-a, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .elem-a, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .key, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .key, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-desktop .hit-overlay, .drum-controller-desktop .synth84enginegui .container .control-container .control-area .button-wrapper button .hit-overlay, .synth84enginegui .container .control-container .control-area .button-wrapper button .drum-controller-touch, .synth84enginegui .container .control-container .control-area .button-wrapper button .dnd-sampler-engine-gui, .synth84enginegui .container .control-container .control-area .button-wrapper button .bass808enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler1enginegui, .st-light-theme .synth78enginegui, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth78enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .synth78enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .synth78enginegui, .synth84enginegui .container .control-container .control-area .button-wrapper button .synth78enginegui, .st-light-theme .looptab-banner_close-button, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab-banner_close-button, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab-banner_close-button, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab-banner_close-button, .synth84enginegui .container .control-container .control-area .button-wrapper button .looptab-banner_close-button, .st-light-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .st-light-theme .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .cta-text, .horizontal-paywall-dialog .inner .body .artwork-background .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .artwork-title-container .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .cta-text, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .button-pressed .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .cta-text, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail button:hover .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .synth84enginegui .container .control-container .control-area .button-wrapper button .cta-text, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail button .cta-text, .st-light-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .st-light-theme .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .loop-awareness-banner-container, .horizontal-paywall-dialog .inner .body .artwork-background .looptab .results .loop-awareness-banner-holder .artwork-title-container .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .loop-awareness-banner-container, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .loop-awareness-banner-holder .button-pressed .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .loop-awareness-banner-container, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .loop-awareness-banner-holder button:hover .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .synth84enginegui .container .control-container .control-area .button-wrapper button .loop-awareness-banner-container, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .results .loop-awareness-banner-holder button .loop-awareness-banner-container, .st-light-theme .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .synth84enginegui .container .control-container .control-area .button-wrapper button .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .st-light-theme .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tagbutton.highlighted, .horizontal-paywall-dialog .inner .body .artwork-background .looptab .tagbuttons .tagbutton-list .artwork-title-container .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tagbutton.highlighted, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .tagbuttons .tagbutton-list .button-pressed .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .tagbutton.highlighted, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .tagbuttons .tagbutton-list button:hover .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .synth84enginegui .container .control-container .control-area .button-wrapper button .tagbutton.highlighted, .synth84enginegui .container .control-container .control-area .button-wrapper .looptab .tagbuttons .tagbutton-list button .tagbutton.highlighted, .st-light-theme .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-light-theme .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-light-theme .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-light-theme .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-light-theme .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .artwork-title-container .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-light-theme .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .artwork-title-container .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-light-theme .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .artwork-title-container .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-light-theme .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .artwork-title-container .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .button-pressed .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .button-pressed .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .button-pressed .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .button-pressed .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button:hover .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button:hover .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button:hover .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button:hover .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container button .instrument-logo-bass808, .st-light-theme .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .st-light-theme .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .instrument-logo-bass808, .horizontal-paywall-dialog .inner .body .artwork-background .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .artwork-title-container .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .button-pressed .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container button:hover .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .synth84enginegui .container .control-container .control-area .button-wrapper button .instrument-logo-bass808, .synth84enginegui .container .control-container .control-area .button-wrapper .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container button .instrument-logo-bass808, .st-light-theme .druminstrumentgui .interaction-area, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .druminstrumentgui .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .druminstrumentgui .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .druminstrumentgui .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper button .druminstrumentgui .interaction-area, .druminstrumentgui .st-light-theme .interaction-area, .druminstrumentgui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .interaction-area, .horizontal-paywall-dialog .inner .body .artwork-background .druminstrumentgui .artwork-title-container .interaction-area, .druminstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .druminstrumentgui .button-pressed .interaction-area, .druminstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .druminstrumentgui button:hover .interaction-area, .druminstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .druminstrumentgui button .interaction-area, .st-light-theme .effects-editor-carousel__placeholder-card, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effects-editor-carousel__placeholder-card, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effects-editor-carousel__placeholder-card, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effects-editor-carousel__placeholder-card, .synth84enginegui .container .control-container .control-area .button-wrapper button .effects-editor-carousel__placeholder-card, .st-light-theme .effects-editor-carousel .effects-editor-carousel__scroll-window, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effects-editor-carousel .effects-editor-carousel__scroll-window, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effects-editor-carousel .effects-editor-carousel__scroll-window, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effects-editor-carousel .effects-editor-carousel__scroll-window, .synth84enginegui .container .control-container .control-area .button-wrapper button .effects-editor-carousel .effects-editor-carousel__scroll-window, .effects-editor-carousel .st-light-theme .effects-editor-carousel__scroll-window, .effects-editor-carousel .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effects-editor-carousel__scroll-window, .horizontal-paywall-dialog .inner .body .artwork-background .effects-editor-carousel .artwork-title-container .effects-editor-carousel__scroll-window, .effects-editor-carousel .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effects-editor-carousel__scroll-window, .synth84enginegui .container .control-container .control-area .button-wrapper .effects-editor-carousel .button-pressed .effects-editor-carousel__scroll-window, .effects-editor-carousel .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effects-editor-carousel__scroll-window, .synth84enginegui .container .control-container .control-area .button-wrapper .effects-editor-carousel button:hover .effects-editor-carousel__scroll-window, .effects-editor-carousel .synth84enginegui .container .control-container .control-area .button-wrapper button .effects-editor-carousel__scroll-window, .synth84enginegui .container .control-container .control-area .button-wrapper .effects-editor-carousel button .effects-editor-carousel__scroll-window, .st-light-theme .effects-editor-carousel, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .effects-editor-carousel, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .effects-editor-carousel, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .effects-editor-carousel, .synth84enginegui .container .control-container .control-area .button-wrapper button .effects-editor-carousel, .st-light-theme .vocal-tuner__disabled-overlay, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocal-tuner__disabled-overlay, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocal-tuner__disabled-overlay, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .vocal-tuner__disabled-overlay, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocal-tuner__disabled-overlay, .st-light-theme .vocal-tools-container, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocal-tools-container, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocal-tools-container, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .vocal-tools-container, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocal-tools-container, .st-light-theme .vocalsinstrumentgui .interaction-area, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocalsinstrumentgui .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocalsinstrumentgui .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .vocalsinstrumentgui .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocalsinstrumentgui .interaction-area, .vocalsinstrumentgui .st-light-theme .interaction-area, .vocalsinstrumentgui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .interaction-area, .horizontal-paywall-dialog .inner .body .artwork-background .vocalsinstrumentgui .artwork-title-container .interaction-area, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui .button-pressed .interaction-area, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui button:hover .interaction-area, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button .interaction-area, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui button .interaction-area, .st-light-theme .stomp .disabled-effect, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stomp .disabled-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stomp .disabled-effect, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .stomp .disabled-effect, .synth84enginegui .container .control-container .control-area .button-wrapper button .stomp .disabled-effect, .stomp .st-light-theme .disabled-effect, .stomp .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .disabled-effect, .horizontal-paywall-dialog .inner .body .artwork-background .stomp .artwork-title-container .disabled-effect, .stomp .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .disabled-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp .button-pressed .disabled-effect, .stomp .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .disabled-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp button:hover .disabled-effect, .stomp .synth84enginegui .container .control-container .control-area .button-wrapper button .disabled-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp button .disabled-effect, .st-light-theme .stomp .is-paid-effect, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stomp .is-paid-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stomp .is-paid-effect, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .stomp .is-paid-effect, .synth84enginegui .container .control-container .control-area .button-wrapper button .stomp .is-paid-effect, .stomp .st-light-theme .is-paid-effect, .stomp .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .is-paid-effect, .horizontal-paywall-dialog .inner .body .artwork-background .stomp .artwork-title-container .is-paid-effect, .stomp .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .is-paid-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp .button-pressed .is-paid-effect, .stomp .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .is-paid-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp button:hover .is-paid-effect, .stomp .synth84enginegui .container .control-container .control-area .button-wrapper button .is-paid-effect, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp button .is-paid-effect, .st-light-theme .stomp--disabled-effect .power-on, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stomp--disabled-effect .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stomp--disabled-effect .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .stomp--disabled-effect .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper button .stomp--disabled-effect .power-on, .stomp--disabled-effect .st-light-theme .power-on, .stomp--disabled-effect .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .power-on, .horizontal-paywall-dialog .inner .body .artwork-background .stomp--disabled-effect .artwork-title-container .power-on, .stomp--disabled-effect .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--disabled-effect .button-pressed .power-on, .stomp--disabled-effect .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--disabled-effect button:hover .power-on, .stomp--disabled-effect .synth84enginegui .container .control-container .control-area .button-wrapper button .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--disabled-effect button .power-on, .st-light-theme .stomp--disabled-effect .closer, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stomp--disabled-effect .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stomp--disabled-effect .closer, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .stomp--disabled-effect .closer, .synth84enginegui .container .control-container .control-area .button-wrapper button .stomp--disabled-effect .closer, .stomp--disabled-effect .st-light-theme .closer, .stomp--disabled-effect .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .closer, .horizontal-paywall-dialog .inner .body .artwork-background .stomp--disabled-effect .artwork-title-container .closer, .stomp--disabled-effect .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--disabled-effect .button-pressed .closer, .stomp--disabled-effect .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--disabled-effect button:hover .closer, .stomp--disabled-effect .synth84enginegui .container .control-container .control-area .button-wrapper button .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--disabled-effect button .closer, .st-light-theme .stomp--paywalled .power-on, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stomp--paywalled .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stomp--paywalled .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .stomp--paywalled .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper button .stomp--paywalled .power-on, .stomp--paywalled .st-light-theme .power-on, .stomp--paywalled .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .power-on, .horizontal-paywall-dialog .inner .body .artwork-background .stomp--paywalled .artwork-title-container .power-on, .stomp--paywalled .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--paywalled .button-pressed .power-on, .stomp--paywalled .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--paywalled button:hover .power-on, .stomp--paywalled .synth84enginegui .container .control-container .control-area .button-wrapper button .power-on, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--paywalled button .power-on, .st-light-theme .stomp--paywalled .closer, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .stomp--paywalled .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .stomp--paywalled .closer, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .stomp--paywalled .closer, .synth84enginegui .container .control-container .control-area .button-wrapper button .stomp--paywalled .closer, .stomp--paywalled .st-light-theme .closer, .stomp--paywalled .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .closer, .horizontal-paywall-dialog .inner .body .artwork-background .stomp--paywalled .artwork-title-container .closer, .stomp--paywalled .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--paywalled .button-pressed .closer, .stomp--paywalled .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--paywalled button:hover .closer, .stomp--paywalled .synth84enginegui .container .control-container .control-area .button-wrapper button .closer, .synth84enginegui .container .control-container .control-area .button-wrapper .stomp--paywalled button .closer, .st-light-theme .st-toggle-button-wrapper.contrastingbase, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-toggle-button-wrapper.contrastingbase, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-toggle-button-wrapper.contrastingbase, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover .st-toggle-button-wrapper.contrastingbase, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-toggle-button-wrapper.contrastingbase {
  --background-base: #290247; /* The default background color of the contrastingBase set. */
  --background-highlight: #380361; /* A background color that indicates the hover state of a component. */
  --background-press: #130120; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #3e036c; /* The default background color for elevated elements in the contrastingBase set. */
  --background-elevated-highlight: #4b0481; /* For hover states of elevated elements */
  --background-elevated-press: #310255; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.12); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the contrastingBase set. */
  --text-subdued: #c884fc; /* For text and icons that are less prominent. */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the contrastingBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #aa43fa; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the contrastingBase set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #3f036d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-inverted-primary-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-inverted-primary-set, .st-light-theme .de-esser-gui .meter .mark, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .de-esser-gui .meter .mark, .de-esser-gui .meter .st-light-theme .mark, .de-esser-gui .meter .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .mark, .horizontal-paywall-dialog .inner .body .artwork-background .de-esser-gui .meter .artwork-title-container .mark, .st-light-theme .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .st-light-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .preview-waveform, .horizontal-paywall-dialog .inner .body .artwork-background .playable-waveform-preview.waveform-inverted-theme .artwork-title-container .preview-waveform, .st-light-theme .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .st-light-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container button.st-button.button_circular, .horizontal-paywall-dialog .inner .body .artwork-background .playable-waveform-preview.waveform-inverted-theme .artwork-title-container button.st-button.button_circular, .st-light-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-light-theme .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .playing, .horizontal-paywall-dialog .inner .body .artwork-background .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .artwork-title-container .playing, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-inverted-primary-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .de-esser-gui .meter .mark, .de-esser-gui .meter .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .mark, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .preview-waveform, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed button.st-button.button_circular, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .playing, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-inverted-primary-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .de-esser-gui .meter .mark, .de-esser-gui .meter .synth84enginegui .container .control-container .control-area .button-wrapper button .mark, .synth84enginegui .container .control-container .control-area .button-wrapper button .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .synth84enginegui .container .control-container .control-area .button-wrapper button .preview-waveform, .synth84enginegui .container .control-container .control-area .button-wrapper button .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .synth84enginegui .container .control-container .control-area .button-wrapper button button.st-button.button_circular, .synth84enginegui .container .control-container .control-area .button-wrapper button .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .synth84enginegui .container .control-container .control-area .button-wrapper button .playing, .st-light-theme .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .st-light-theme .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-toggle-button, .horizontal-paywall-dialog .inner .body .artwork-background .st-toggle-button-wrapper.contrastingbase.on .artwork-title-container .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .st-toggle-button-wrapper.contrastingbase.on .button-pressed .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .synth84enginegui .container .control-container .control-area .button-wrapper button .st-toggle-button, .synth84enginegui .container .control-container .control-area .button-wrapper .st-toggle-button-wrapper.contrastingbase.on button .st-toggle-button {
  --background-base: #ffffff; /* The default background color of the invertedPrimary set. */
  --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */
  --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #ffffff; /* fallback */
  --background-elevated-highlight: #ffffff; /* fallback */
  --background-elevated-press: #ffffff; /* fallback */
  --background-tinted-base: #ffffff; /* fallback */
  --background-tinted-highlight: #ffffff; /* fallback */
  --background-tinted-press: #ffffff; /* fallback */
  --text-base: #430877; /* The default text and icon color of the invertedPrimary set. */
  --text-subdued: #9024f0; /* For text and icons that are less prominent. */
  --text-primary: #430877; /* fallback */
  --text-negative: #430877; /* fallback */
  --text-spotlight: #430877; /* fallback */
  --text-positive: #430877; /* fallback */
  --essential-base: #430877; /* The default essential color of the invertedPrimary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #b267f5; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #430877; /* fallback */
  --essential-negative: #430877; /* fallback */
  --essential-spotlight: #430877; /* fallback */
  --essential-positive: #430877; /* fallback */
  --decorative-base: #430877; /* The default decorative color of the invertedPrimary set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-inverted-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-inverted-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-inverted-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-inverted-set {
  --background-base: #1e1e1e; /* The default background color of the inverted set. */
  --background-highlight: #282828; /* A background color that indicates the hover state of a component. */
  --background-press: #313131; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #2c2c2c; /* The default background color for elevated elements in the inverted set. */
  --background-elevated-highlight: #353535; /* For hover states of elevated elements */
  --background-elevated-press: #232323; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.04); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.08); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the inverted set. */
  --text-subdued: #a5a5a5; /* For text and icons that are less prominent. */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the inverted set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #7e7e7e; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the inverted set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #343434; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-simply-red-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-simply-red-set, .st-light-theme .automationeditors.col0 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col0 svg, .automationeditors.col0 .st-light-theme svg, .automationeditors.col0 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col0 .artwork-title-container svg,
.st-light-theme .automationeditors.col0 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col0 .automationcontrolpoint,
.automationeditors.col0 .st-light-theme .automationcontrolpoint,
.automationeditors.col0 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col0 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-simply-red-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col0 svg, .automationeditors.col0 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col0 .automationcontrolpoint,
.automationeditors.col0 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-simply-red-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col0 svg, .automationeditors.col0 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col0 .automationcontrolpoint,
.automationeditors.col0 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .st-light-theme .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth-led-on, .horizontal-paywall-dialog .inner .body .artwork-background .synth84enginegui .container .control-container .control-area .button-wrapper .artwork-title-container .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper button .synth-led-on, .st-light-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .st-light-theme .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .synth-led, .horizontal-paywall-dialog .inner .body .artwork-background .synth84enginegui .container .control-container .control-area .button-wrapper .artwork-title-container .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper button .synth-led, .st-light-theme .trackheader .trackgroup.drums, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.drums, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.drums, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.drums, .trackheader .st-light-theme .trackgroup.drums, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.drums, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.drums, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.drums, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.drums, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.drums, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.drums, .st-light-theme .region-tools .loophandle.col0, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .region-tools .loophandle.col0, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .region-tools .loophandle.col0, .synth84enginegui .container .control-container .control-area .button-wrapper button .region-tools .loophandle.col0, .region-tools .st-light-theme .loophandle.col0, .region-tools .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .loophandle.col0, .horizontal-paywall-dialog .inner .body .artwork-background .region-tools .artwork-title-container .loophandle.col0, .region-tools .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .loophandle.col0, .synth84enginegui .container .control-container .control-area .button-wrapper .region-tools .button-pressed .loophandle.col0, .region-tools .synth84enginegui .container .control-container .control-area .button-wrapper button .loophandle.col0, .synth84enginegui .container .control-container .control-area .button-wrapper .region-tools button .loophandle.col0, .st-light-theme .vocalsinstrumentgui .recording-label, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .vocalsinstrumentgui .recording-label, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .vocalsinstrumentgui .recording-label, .synth84enginegui .container .control-container .control-area .button-wrapper button .vocalsinstrumentgui .recording-label, .vocalsinstrumentgui .st-light-theme .recording-label, .vocalsinstrumentgui .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .recording-label, .horizontal-paywall-dialog .inner .body .artwork-background .vocalsinstrumentgui .artwork-title-container .recording-label, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .recording-label, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui .button-pressed .recording-label, .vocalsinstrumentgui .synth84enginegui .container .control-container .control-area .button-wrapper button .recording-label, .synth84enginegui .container .control-container .control-area .button-wrapper .vocalsinstrumentgui button .recording-label {
  --background-base: #bb142c; /* The default background color of the simplyRed set. */
  --background-highlight: #b1132a; /* A background color that indicates the hover state of a component. */
  --background-press: #660b18; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #d21631; /* The default background color for elevated elements in the simplyRed set. */
  --background-elevated-highlight: #dc1834; /* For hover states of elevated elements */
  --background-elevated-press: #860e20; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the simplyRed set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the simplyRed set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the simplyRed set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #dc1834; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-maroon-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-maroon-set, .st-light-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .st-light-theme .project-template-icon.podcaststudio, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .project-template .body .artwork-background .artwork-title-container .project-template-icon.podcaststudio, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .project-template .body .artwork-background .artwork-title-container .project-template-icon.podcaststudio, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .project-template .artwork-title-container .project-template-icon.podcaststudio, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .project-template .artwork-title-container .project-template-icon.podcaststudio, .st-light-theme .with-synth-84-styling .tab-button.selected, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .st-light-theme .tab-button.selected, .with-synth-84-styling .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .tab-button.selected, .horizontal-paywall-dialog .inner .body .artwork-background .with-synth-84-styling .artwork-title-container .tab-button.selected, .st-light-theme .automationeditors.col1 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col1 svg, .automationeditors.col1 .st-light-theme svg, .automationeditors.col1 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col1 .artwork-title-container svg,
.st-light-theme .automationeditors.col1 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col1 .automationcontrolpoint,
.automationeditors.col1 .st-light-theme .automationcontrolpoint,
.automationeditors.col1 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col1 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-maroon-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .project-template-icon.podcaststudio, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .tab-button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col1 svg, .automationeditors.col1 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col1 .automationcontrolpoint,
.automationeditors.col1 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-maroon-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper button .project-template-icon.podcaststudio, .synth84enginegui .container .control-container .control-area .button-wrapper button .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .synth84enginegui .container .control-container .control-area .button-wrapper button .tab-button.selected, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col1 svg, .automationeditors.col1 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col1 .automationcontrolpoint,
.automationeditors.col1 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint {
  --background-base: #ad236d; /* The default background color of the maroon set. */
  --background-highlight: #a42167; /* A background color that indicates the hover state of a component. */
  --background-press: #5d133b; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #c3277b; /* The default background color for elevated elements in the maroon set. */
  --background-elevated-highlight: #cc2981; /* For hover states of elevated elements */
  --background-elevated-press: #7b194e; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the maroon set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the maroon set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the maroon set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #cc2981; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-iron-wine-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-iron-wine-set, .st-light-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .st-light-theme .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .project-template.project-template-type-template.project-template-kind-sketchpad, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .artwork-title-container .project-template.project-template-type-template.project-template-kind-sketchpad, .st-light-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .st-light-theme .project-template-icon.sketchpad, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .project-template .body .artwork-background .artwork-title-container .project-template-icon.sketchpad, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .project-template .body .artwork-background .artwork-title-container .project-template-icon.sketchpad, .create-from-template-dialog-2 .horizontal-paywall-dialog .inner .body .artwork-background .project-template .artwork-title-container .project-template-icon.sketchpad, .horizontal-paywall-dialog .create-from-template-dialog-2 .inner .body .artwork-background .project-template .artwork-title-container .project-template-icon.sketchpad, .st-light-theme .automationeditors.col2 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col2 svg, .automationeditors.col2 .st-light-theme svg, .automationeditors.col2 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col2 .artwork-title-container svg,
.st-light-theme .automationeditors.col2 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col2 .automationcontrolpoint,
.automationeditors.col2 .st-light-theme .automationcontrolpoint,
.automationeditors.col2 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col2 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-iron-wine-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .project-template.project-template-type-template.project-template-kind-sketchpad, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .project-template-icon.sketchpad, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col2 svg, .automationeditors.col2 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col2 .automationcontrolpoint,
.automationeditors.col2 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-iron-wine-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .synth84enginegui .container .control-container .control-area .button-wrapper button .project-template.project-template-type-template.project-template-kind-sketchpad, .synth84enginegui .container .control-container .control-area .button-wrapper button .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .synth84enginegui .container .control-container .control-area .button-wrapper button .project-template-icon.sketchpad, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col2 svg, .automationeditors.col2 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col2 .automationcontrolpoint,
.automationeditors.col2 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.recording, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.recording, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.recording, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.recording, .trackheader .st-light-theme .trackgroup.recording, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.recording, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.recording, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.recording, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.recording, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.recording, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.recording {
  --background-base: #903c93; /* The default background color of the ironWine set. */
  --background-highlight: #88398b; /* A background color that indicates the hover state of a component. */
  --background-press: #4c204e; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #a244a6; /* The default background color for elevated elements in the ironWine set. */
  --background-elevated-highlight: #ab47ae; /* For hover states of elevated elements */
  --background-elevated-press: #662b69; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the ironWine set. */
  --text-primary: #ffb7b9; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --text-subdued: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the ironWine set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #ffb7b9; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the ironWine set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #aa47ae; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-purple-rain-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-purple-rain-set, .st-light-theme .st-card--theme-purple .st-card__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .st-light-theme .st-card__icon-wrapper, .st-card--theme-purple .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .st-card--theme-purple .artwork-title-container .st-card__icon-wrapper, .st-light-theme .st-card-button--theme-purple .st-card-button__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .st-light-theme .st-card-button__icon-wrapper, .st-card-button--theme-purple .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .st-card-button--theme-purple .artwork-title-container .st-card-button__icon-wrapper, .st-light-theme .automationeditors.col3 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col3 svg, .automationeditors.col3 .st-light-theme svg, .automationeditors.col3 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col3 .artwork-title-container svg,
.st-light-theme .automationeditors.col3 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col3 .automationcontrolpoint,
.automationeditors.col3 .st-light-theme .automationcontrolpoint,
.automationeditors.col3 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col3 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-purple-rain-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col3 svg, .automationeditors.col3 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col3 .automationcontrolpoint,
.automationeditors.col3 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-purple-rain-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col3 svg, .automationeditors.col3 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col3 .automationcontrolpoint,
.automationeditors.col3 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.vocal, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.vocal, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.vocal, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.vocal, .trackheader .st-light-theme .trackgroup.vocal, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.vocal, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.vocal, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.vocal, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.vocal, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.vocal, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.vocal {
  --background-base: #8411e9; /* The default background color of the purpleRain set. */
  --background-highlight: #7d10dd; /* A background color that indicates the hover state of a component. */
  --background-press: #48097f; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #952df0; /* The default background color for elevated elements in the purpleRain set. */
  --background-elevated-highlight: #9a38f1; /* For hover states of elevated elements */
  --background-elevated-press: #5f0ca8; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.18); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.23); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.12); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the purpleRain set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the purpleRain set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the purpleRain set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #9b39f1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-royal-blue-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-royal-blue-set, .st-light-theme .st-card--theme-blue .st-card__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .st-light-theme .st-card__icon-wrapper, .st-card--theme-blue .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .st-card--theme-blue .artwork-title-container .st-card__icon-wrapper, .st-light-theme .st-card-button--theme-blue .st-card-button__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .st-light-theme .st-card-button__icon-wrapper, .st-card-button--theme-blue .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .st-card-button--theme-blue .artwork-title-container .st-card-button__icon-wrapper, .st-light-theme .automationeditors.col4 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col4 svg, .automationeditors.col4 .st-light-theme svg, .automationeditors.col4 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col4 .artwork-title-container svg,
.st-light-theme .automationeditors.col4 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col4 .automationcontrolpoint,
.automationeditors.col4 .st-light-theme .automationcontrolpoint,
.automationeditors.col4 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col4 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-royal-blue-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col4 svg, .automationeditors.col4 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col4 .automationcontrolpoint,
.automationeditors.col4 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-royal-blue-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col4 svg, .automationeditors.col4 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col4 .automationcontrolpoint,
.automationeditors.col4 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.lead, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.lead, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.lead, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.lead, .trackheader .st-light-theme .trackgroup.lead, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.lead, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.lead, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.lead, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.lead, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.lead, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.lead {
  --background-base: #284ae8; /* The default background color of the royalBlue set. */
  --background-highlight: #1f42e7; /* A background color that indicates the hover state of a component. */
  --background-press: #0e2487; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #3d5bea; /* The default background color for elevated elements in the royalBlue set. */
  --background-elevated-highlight: #4563eb; /* For hover states of elevated elements */
  --background-elevated-press: #1330b4; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.14); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the royalBlue set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the royalBlue set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the royalBlue set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #4361eb; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-ocean-eyes-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-ocean-eyes-set, .st-light-theme .st-card--theme-green .st-card__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .st-light-theme .st-card__icon-wrapper, .st-card--theme-green .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .st-card--theme-green .artwork-title-container .st-card__icon-wrapper, .st-light-theme .st-card-button--theme-green .st-card-button__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .st-light-theme .st-card-button__icon-wrapper, .st-card-button--theme-green .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-card-button__icon-wrapper, .horizontal-paywall-dialog .inner .body .artwork-background .st-card-button--theme-green .artwork-title-container .st-card-button__icon-wrapper, .st-light-theme .automationeditors.col5 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col5 svg, .automationeditors.col5 .st-light-theme svg, .automationeditors.col5 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col5 .artwork-title-container svg,
.st-light-theme .automationeditors.col5 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col5 .automationcontrolpoint,
.automationeditors.col5 .st-light-theme .automationcontrolpoint,
.automationeditors.col5 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col5 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-ocean-eyes-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-card-button__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col5 svg, .automationeditors.col5 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col5 .automationcontrolpoint,
.automationeditors.col5 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-ocean-eyes-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .synth84enginegui .container .control-container .control-area .button-wrapper button .st-card-button__icon-wrapper, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col5 svg, .automationeditors.col5 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col5 .automationcontrolpoint,
.automationeditors.col5 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.other, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.other, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.other, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.other, .trackheader .st-light-theme .trackgroup.other, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.other, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.other, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.other, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.other, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.other, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.other {
  --background-base: #006878; /* The default background color of the oceanEyes set. */
  --background-highlight: #006272; /* A background color that indicates the hover state of a component. */
  --background-press: #003740; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #007587; /* The default background color for elevated elements in the oceanEyes set. */
  --background-elevated-highlight: #007b8e; /* For hover states of elevated elements */
  --background-elevated-press: #004a55; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the oceanEyes set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the oceanEyes set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the oceanEyes set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #007c8f; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-forest-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-forest-set, .st-light-theme .automationeditors.col6 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col6 svg, .automationeditors.col6 .st-light-theme svg, .automationeditors.col6 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col6 .artwork-title-container svg,
.st-light-theme .automationeditors.col6 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col6 .automationcontrolpoint,
.automationeditors.col6 .st-light-theme .automationcontrolpoint,
.automationeditors.col6 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col6 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-forest-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col6 svg, .automationeditors.col6 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col6 .automationcontrolpoint,
.automationeditors.col6 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-forest-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col6 svg, .automationeditors.col6 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col6 .automationcontrolpoint,
.automationeditors.col6 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.bass, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.bass, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.bass, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.bass, .trackheader .st-light-theme .trackgroup.bass, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.bass, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.bass, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.bass, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.bass, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.bass, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.bass {
  --background-base: #006b56; /* The default background color of the forest set. */
  --background-highlight: #006551; /* A background color that indicates the hover state of a component. */
  --background-press: #00392e; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #007961; /* The default background color for elevated elements in the forest set. */
  --background-elevated-highlight: #007f66; /* For hover states of elevated elements */
  --background-elevated-press: #004c3d; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.08); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the forest set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the forest set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the forest set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #007f66; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-green-light-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-green-light-set, .st-light-theme .automationeditors.col7 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col7 svg, .automationeditors.col7 .st-light-theme svg, .automationeditors.col7 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col7 .artwork-title-container svg,
.st-light-theme .automationeditors.col7 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col7 .automationcontrolpoint,
.automationeditors.col7 .st-light-theme .automationcontrolpoint,
.automationeditors.col7 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col7 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-green-light-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col7 svg, .automationeditors.col7 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col7 .automationcontrolpoint,
.automationeditors.col7 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-green-light-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col7 svg, .automationeditors.col7 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col7 .automationcontrolpoint,
.automationeditors.col7 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint {
  --background-base: #146c32; /* The default background color of the greenLight set. */
  --background-highlight: #13662f; /* A background color that indicates the hover state of a component. */
  --background-press: #0b391a; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #177a38; /* The default background color for elevated elements in the greenLight set. */
  --background-elevated-highlight: #18803b; /* For hover states of elevated elements */
  --background-elevated-press: #0e4c23; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.07); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the greenLight set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the greenLight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the greenLight set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #18803b; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-gold-frapp-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-gold-frapp-set, .st-light-theme .automationeditors.col8 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col8 svg, .automationeditors.col8 .st-light-theme svg, .automationeditors.col8 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col8 .artwork-title-container svg,
.st-light-theme .automationeditors.col8 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col8 .automationcontrolpoint,
.automationeditors.col8 .st-light-theme .automationcontrolpoint,
.automationeditors.col8 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col8 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-gold-frapp-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col8 svg, .automationeditors.col8 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col8 .automationcontrolpoint,
.automationeditors.col8 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-gold-frapp-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col8 svg, .automationeditors.col8 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col8 .automationcontrolpoint,
.automationeditors.col8 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.harmonics, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.harmonics, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.harmonics, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.harmonics, .trackheader .st-light-theme .trackgroup.harmonics, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.harmonics, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.harmonics, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.harmonics, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.harmonics, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.harmonics, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.harmonics {
  --background-base: #855311; /* The default background color of the goldFrapp set. */
  --background-highlight: #7e4f10; /* A background color that indicates the hover state of a component. */
  --background-press: #462c09; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #965e13; /* The default background color for elevated elements in the goldFrapp set. */
  --background-elevated-highlight: #9e6214; /* For hover states of elevated elements */
  --background-elevated-press: #5e3b0c; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the goldFrapp set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the goldFrapp set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the goldFrapp set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #9e6314; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-light-theme .st-orange-soda-set, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-orange-soda-set, .st-light-theme .automationeditors.col9 svg, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col9 svg, .automationeditors.col9 .st-light-theme svg, .automationeditors.col9 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container svg, .horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col9 .artwork-title-container svg,
.st-light-theme .automationeditors.col9 .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationeditors.col9 .automationcontrolpoint,
.automationeditors.col9 .st-light-theme .automationcontrolpoint,
.automationeditors.col9 .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .automationcontrolpoint,
.horizontal-paywall-dialog .inner .body .artwork-background .automationeditors.col9 .artwork-title-container .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-orange-soda-set, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col9 svg, .automationeditors.col9 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed svg,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationeditors.col9 .automationcontrolpoint,
.automationeditors.col9 .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .automationcontrolpoint, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-orange-soda-set, .synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col9 svg, .automationeditors.col9 .synth84enginegui .container .control-container .control-area .button-wrapper button svg,
.synth84enginegui .container .control-container .control-area .button-wrapper button .automationeditors.col9 .automationcontrolpoint,
.automationeditors.col9 .synth84enginegui .container .control-container .control-area .button-wrapper button .automationcontrolpoint, .st-light-theme .trackheader .trackgroup.fx, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackheader .trackgroup.fx, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackheader .trackgroup.fx, .synth84enginegui .container .control-container .control-area .button-wrapper button .trackheader .trackgroup.fx, .trackheader .st-light-theme .trackgroup.fx, .trackheader .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .trackgroup.fx, .horizontal-paywall-dialog .inner .body .artwork-background .trackheader .artwork-title-container .trackgroup.fx, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .trackgroup.fx, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader .button-pressed .trackgroup.fx, .trackheader .synth84enginegui .container .control-container .control-area .button-wrapper button .trackgroup.fx, .synth84enginegui .container .control-container .control-area .button-wrapper .trackheader button .trackgroup.fx {
  --background-base: #9d4226; /* The default background color of the orangeSoda set. */
  --background-highlight: #953e24; /* A background color that indicates the hover state of a component. */
  --background-press: #532314; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #b14a2b; /* The default background color for elevated elements in the orangeSoda set. */
  --background-elevated-highlight: #ba4e2d; /* For hover states of elevated elements */
  --background-elevated-press: #6f2f1b; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.09); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.13); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the orangeSoda set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the orangeSoda set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the orangeSoda set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #ba4e2d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

@media (prefers-color-scheme: light) {
  .st-auto-theme,
  .st-auto-theme .st-base-set,
  .st-auto-theme .mididialog2 > .st-dialog-body .status-area.ok .status-message,
  .mididialog2 > .st-dialog-body .status-area.ok .st-auto-theme .status-message,
  .st-auto-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
  .mididialog2 > .st-dialog-body .status-area:not(.ok) .st-auto-theme .status-message,
  .st-auto-theme .mididialog2 > .st-dialog-body .status-area .status-description,
  .mididialog2 > .st-dialog-body .status-area .st-auto-theme .status-description,
  .st-auto-theme .save-preset-dialog .inner .body,
  .save-preset-dialog .inner .st-auto-theme .body,
  .st-auto-theme .save-preset-dialog .inner .closer,
  .save-preset-dialog .inner .st-auto-theme .closer,
  .st-auto-theme .radio-dialog.new-dialog .inner .closer,
  .radio-dialog.new-dialog .inner .st-auto-theme .closer,
  .st-auto-theme .key-selector-menu button[aria-checked=false],
  .key-selector-menu .st-auto-theme button[aria-checked=false],
  .st-auto-theme .st-curved-slider-container .st-curved-slider .thumb-visual,
  .st-curved-slider-container .st-curved-slider .st-auto-theme .thumb-visual,
  .st-auto-theme .st-curved-slider-container,
  .st-auto-theme .st-slider::-webkit-slider-runnable-track,
  .st-auto-theme .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
  .playable-waveform-preview.waveform-base-theme .st-auto-theme button.st-button.button_circular,
  .st-auto-theme .playable-waveform-preview.waveform-base-theme,
  .st-auto-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
  .sampler-ui-create-instrument-container .sampler-create-instrument-button .st-auto-theme .subheading,
  .st-auto-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
  .sampler-ui-create-instrument-container .st-auto-theme .sampler-create-instrument-button.button-search.drag-enabled.dragging,
  .st-auto-theme .sampler-ui-bottom-buttons .sampler-ui-delete,
  .sampler-ui-bottom-buttons .st-auto-theme .sampler-ui-delete,
  .st-auto-theme .tab-button,
  .st-auto-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
  .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-auto-theme .selected,
  .st-auto-theme .dnd-sampler-engine-gui .dnd-sampler-options,
  .dnd-sampler-engine-gui .st-auto-theme .dnd-sampler-options,
  .st-auto-theme .bass808enginegui .octaveselector .lblinline,
  .bass808enginegui .octaveselector .st-auto-theme .lblinline,
  .st-auto-theme .bass808enginegui .boxed,
  .bass808enginegui .st-auto-theme .boxed,
  .st-auto-theme .bass808enginegui,
  .st-auto-theme .sampler1enginegui .octaveselector .lblinline,
  .sampler1enginegui .octaveselector .st-auto-theme .lblinline,
  .st-auto-theme .sampler1enginegui .boxed,
  .sampler1enginegui .st-auto-theme .boxed,
  .st-auto-theme .sampler1enginegui,
  .st-auto-theme .synth84enginegui,
  .st-auto-theme .synth78enginegui .boxed,
  .synth78enginegui .st-auto-theme .boxed,
  .st-auto-theme .synth78enginegui,
  .st-auto-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
  .rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab.deemphasised,
  .st-auto-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
  .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab.deemphasised,
  .st-auto-theme .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
  .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .st-auto-theme .tab,
  .st-auto-theme .new-ribbon,
  .st-auto-theme .looptab .results .addtrackshortcut .playityourself,
  .looptab .results .addtrackshortcut .st-auto-theme .playityourself,
  .st-auto-theme .looptab .results .addtrackshortcut,
  .looptab .results .st-auto-theme .addtrackshortcut,
  .st-auto-theme .looptab .loop-results-tabs-container .loop-results-tab-selected,
  .looptab .loop-results-tabs-container .st-auto-theme .loop-results-tab-selected,
  .st-auto-theme .looptab .loop-results-tabs-container .loop-results-tab,
  .looptab .loop-results-tabs-container .st-auto-theme .loop-results-tab,
  .st-auto-theme .looptab .loop-results-tabs-container,
  .looptab .st-auto-theme .loop-results-tabs-container,
  .st-auto-theme .keyboardinstrumentgui .row2 .octaveselector .lbl,
  .keyboardinstrumentgui .row2 .octaveselector .st-auto-theme .lbl,
  .st-auto-theme .effects-editor-carousel__container .stomp .name-ribbon,
  .effects-editor-carousel__container .stomp .st-auto-theme .name-ribbon,
  .st-auto-theme .mediumknob,
  .st-auto-theme .miniknob,
  .st-auto-theme .miniled,
  .st-auto-theme .mango-button.disabled,
  .st-auto-theme .disabled.mango-button-spotlight,
  .st-auto-theme .disabled.mango-button-weak-XL,
  .st-auto-theme .disabled.mango-icon-button-emphasized-XL,
  .st-auto-theme .disabled.mango-icon-button-weak-XL,
  .st-auto-theme .disabled.mango-button-weak-L,
  .st-auto-theme .disabled.mango-icon-button-emphasized-L,
  .st-auto-theme .disabled.mango-icon-button-weak-L,
  .st-auto-theme .disabled.mango-button-weak-M,
  .st-auto-theme .disabled.mango-icon-button-emphasized-M,
  .st-auto-theme .disabled.mango-icon-button-weak-M,
  .st-auto-theme .disabled.mango-button-weak-S,
  .st-auto-theme .disabled.mango-icon-button-emphasized-S,
  .st-auto-theme .disabled.mango-icon-button-weak-S,
  .st-auto-theme .disabled.mango-button-emphasised-XL,
  .st-auto-theme .disabled.mango-button-emphasised-L,
  .st-auto-theme .disabled.mango-button-emphasised-M,
  .st-auto-theme .disabled.mango-button-emphasised-S,
  .st-auto-theme .disabled.mango-button-regular-XL,
  .st-auto-theme .disabled.mango-icon-button-regular-XL,
  .st-auto-theme .disabled.mango-button-regular-L,
  .st-auto-theme .disabled.mango-icon-button-regular-L,
  .st-auto-theme .disabled.mango-button-regular-M,
  .st-auto-theme .disabled.mango-icon-button-regular-M,
  .st-auto-theme .disabled.mango-button-regular-S,
  .st-auto-theme .disabled.mango-icon-button-regular-S,
  .st-auto-theme .disabled.mango-button-special-S,
  .st-auto-theme .disabled.mango-icon-button-special-S,
  .st-auto-theme .disabled.mango-button-negative-S,
  .st-auto-theme .disabled.mango-button-spotlight-S,
  .st-auto-theme .disabled.mango-button-special-M,
  .st-auto-theme .disabled.mango-icon-button-special-M,
  .st-auto-theme .disabled.mango-button-negative-M,
  .st-auto-theme .disabled.mango-button-spotlight-M,
  .st-auto-theme .disabled.mango-button-special-L,
  .st-auto-theme .disabled.mango-icon-button-special-L,
  .st-auto-theme .disabled.mango-button-negative-L,
  .st-auto-theme .disabled.mango-button-spotlight-L,
  .st-auto-theme .disabled.mango-button-special-XL,
  .st-auto-theme .disabled.mango-icon-button-special-XL,
  .st-auto-theme .disabled.mango-button-negative-XL,
  .st-auto-theme .disabled.mango-button-spotlight-XL,
  .st-auto-theme .disabled.mango-button-weak,
  .st-auto-theme .disabled.mango-button-regular,
  .st-auto-theme .disabled.mango-button-special,
  .st-auto-theme .mango-button[disabled],
  .st-auto-theme [disabled].mango-button-spotlight,
  .st-auto-theme [disabled].mango-button-weak-XL,
  .st-auto-theme [disabled].mango-icon-button-emphasized-XL,
  .st-auto-theme [disabled].mango-icon-button-weak-XL,
  .st-auto-theme [disabled].mango-button-weak-L,
  .st-auto-theme [disabled].mango-icon-button-emphasized-L,
  .st-auto-theme [disabled].mango-icon-button-weak-L,
  .st-auto-theme [disabled].mango-button-weak-M,
  .st-auto-theme [disabled].mango-icon-button-emphasized-M,
  .st-auto-theme [disabled].mango-icon-button-weak-M,
  .st-auto-theme [disabled].mango-button-weak-S,
  .st-auto-theme [disabled].mango-icon-button-emphasized-S,
  .st-auto-theme [disabled].mango-icon-button-weak-S,
  .st-auto-theme [disabled].mango-button-emphasised-XL,
  .st-auto-theme [disabled].mango-button-emphasised-L,
  .st-auto-theme [disabled].mango-button-emphasised-M,
  .st-auto-theme [disabled].mango-button-emphasised-S,
  .st-auto-theme [disabled].mango-button-regular-XL,
  .st-auto-theme [disabled].mango-icon-button-regular-XL,
  .st-auto-theme [disabled].mango-button-regular-L,
  .st-auto-theme [disabled].mango-icon-button-regular-L,
  .st-auto-theme [disabled].mango-button-regular-M,
  .st-auto-theme [disabled].mango-icon-button-regular-M,
  .st-auto-theme [disabled].mango-button-regular-S,
  .st-auto-theme [disabled].mango-icon-button-regular-S,
  .st-auto-theme [disabled].mango-button-special-S,
  .st-auto-theme [disabled].mango-icon-button-special-S,
  .st-auto-theme [disabled].mango-button-negative-S,
  .st-auto-theme [disabled].mango-button-spotlight-S,
  .st-auto-theme [disabled].mango-button-special-M,
  .st-auto-theme [disabled].mango-icon-button-special-M,
  .st-auto-theme [disabled].mango-button-negative-M,
  .st-auto-theme [disabled].mango-button-spotlight-M,
  .st-auto-theme [disabled].mango-button-special-L,
  .st-auto-theme [disabled].mango-icon-button-special-L,
  .st-auto-theme [disabled].mango-button-negative-L,
  .st-auto-theme [disabled].mango-button-spotlight-L,
  .st-auto-theme [disabled].mango-button-special-XL,
  .st-auto-theme [disabled].mango-icon-button-special-XL,
  .st-auto-theme [disabled].mango-button-negative-XL,
  .st-auto-theme [disabled].mango-button-spotlight-XL,
  .st-auto-theme [disabled].mango-button-weak,
  .st-auto-theme [disabled].mango-button-regular,
  .st-auto-theme [disabled].mango-button-special {
    --background-base: #ffffff; /* The default background color of the base set. */
    --background-highlight: #f6f6f6; /* A background color that indicates the hover state of a component. */
    --background-press: #b7b7b7; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #ffffff; /* The default background color for elevated elements in the base set. */
    --background-elevated-highlight: #f6f6f6; /* For hover states of elevated elements */
    --background-elevated-press: #b7b7b7; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */
    --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */
    --text-base: #2d2d2d; /* The default text and icon color of the base set. */
    --text-subdued: #606060; /* For text and icons that are less prominent. */
    --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --text-spotlight: #a94c00; /* A text and icon color associated with subscriptions and purchasing. */
    --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --text-positive: #00773c; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --essential-base: #2d2d2d; /* The default essential color of the base set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #848484; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --essential-spotlight: #d76100; /* An essential color associated with with subscriptions and purchasing. */
    --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --decorative-base: #2d2d2d; /* The default decorative color of the base set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-secondary-base-set, .st-auto-theme .rtc-beta-onboarding-tips, .st-auto-theme .basicdialog, .st-auto-theme .fxtoggle, .st-auto-theme .rounded-fxtoggle-wrapper, .st-auto-theme .miniknob,
  .st-auto-theme .smallknob,
  .st-auto-theme .mediumknob,
  .st-auto-theme .bigknob {
    --background-base: #f8f8f8; /* The default background color of the secondaryBase set. */
    --background-highlight: #efefef; /* A background color that indicates the hover state of a component. */
    --background-press: #b2b2b2; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #fdfdfd; /* The default background color for elevated elements in the secondaryBase set. */
    --background-elevated-highlight: #f4f4f4; /* For hover states of elevated elements */
    --background-elevated-press: #b6b6b6; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */
    --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */
    --text-base: #2d2d2d; /* The default text and icon color of the secondaryBase set. */
    --text-subdued: #5c5c5c; /* For text and icons that are less prominent. */
    --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --text-spotlight: #a34900; /* A text and icon color associated with subscriptions and purchasing. */
    --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --text-positive: #00733a; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --essential-base: #2d2d2d; /* The default essential color of the secondaryBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #7f7f7f; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --essential-spotlight: #d05d00; /* An essential color associated with with subscriptions and purchasing. */
    --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --decorative-base: #2d2d2d; /* The default decorative color of the secondaryBase set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #d8d8d8; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-primary-set, .st-auto-theme .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .st-auto-theme .button-cta, .st-auto-theme .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-auto-theme .list-icon, .st-auto-theme .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-auto-theme .list-icon, .st-auto-theme .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .st-auto-theme .circled, .st-auto-theme .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .st-auto-theme input[type=checkbox],
  .st-auto-theme .edit-loop-dialog .input-row input[type=checkbox],
  .edit-loop-dialog .input-row .st-auto-theme input[type=checkbox], .st-auto-theme .add-loop-dialog .inner .header, .add-loop-dialog .inner .st-auto-theme .header,
  .st-auto-theme .edit-loop-dialog .inner .header,
  .edit-loop-dialog .inner .st-auto-theme .header, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .tooltip, .st-auto-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .st-auto-theme .project-template.project-template-type-template.project-template-kind-music, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .project-template-icon.musicstudio, .st-auto-theme body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .st-auto-theme .title, .st-auto-theme .new-dialog-purple .title, .new-dialog-purple .st-auto-theme .title, .st-auto-theme .new-dialog .closer, .new-dialog .st-auto-theme .closer, .st-auto-theme .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .st-auto-theme button.selected-pattern, .st-auto-theme .key-selector-menu button[aria-checked=true], .key-selector-menu .st-auto-theme button[aria-checked=true], .st-auto-theme .threshold-control .threshold-thumb, .threshold-control .st-auto-theme .threshold-thumb, .st-auto-theme .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .st-auto-theme .vocal-clarity-visualization, .st-auto-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .st-auto-theme .sampler-create-instrument-button.button-search, .st-auto-theme .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .st-auto-theme .st-radio, .st-auto-theme .chatbubble-bubble.right, .st-auto-theme .st-beta-tag, .st-auto-theme .notification-area .notification, .notification-area .st-auto-theme .notification, .st-auto-theme .tempo-tapper, .st-auto-theme .st-anchored-tool-tip, .st-auto-theme .sync-area, .st-auto-theme .tippopup, .st-auto-theme .effect-picker__search-tag.active, .st-auto-theme .assistant .MessageBubble--right, .assistant .st-auto-theme .MessageBubble--right, .st-auto-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab, .st-auto-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab, .st-auto-theme .instrument-loading-progress, .st-auto-theme .transport-controls__button.selected, .st-auto-theme .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .st-auto-theme .tracklistheader__localOverrideButtonArea:before, .st-auto-theme .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .st-auto-theme .local-overlay.local-mute-solo:before, .st-auto-theme .notificationmessage, .st-auto-theme .effects-editor-card__movement-controls, .st-auto-theme .st-tooltip2-callout, .st-auto-theme .st-toggle-button-wrapper.base.on .st-toggle-button, .st-toggle-button-wrapper.base.on .st-auto-theme .st-toggle-button, .st-auto-theme .mango-button-special-S, .st-auto-theme .mango-icon-button-special-S, .st-auto-theme .mango-button-negative-S, .st-auto-theme .mango-button-spotlight-S, .st-auto-theme .mango-button-special-M, .st-auto-theme .mango-icon-button-special-M, .st-auto-theme .mango-button-negative-M, .st-auto-theme .mango-button-spotlight-M, .st-auto-theme .mango-button-special-L, .st-auto-theme .mango-icon-button-special-L, .st-auto-theme .mango-button-negative-L, .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .mango-button-special-XL, .st-auto-theme .mango-icon-button-special-XL, .st-auto-theme .mango-button-negative-XL, .st-auto-theme .mango-button-spotlight-XL {
    --background-base: #430877; /* The default background color of the primary set. */
    --background-highlight: #360661; /* A background color that indicates the hover state of a component. */
    --background-press: #280547; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #430877; /* fallback */
    --background-elevated-highlight: #430877; /* fallback */
    --background-elevated-press: #430877; /* fallback */
    --background-tinted-base: #430877; /* fallback */
    --background-tinted-highlight: #430877; /* fallback */
    --background-tinted-press: #430877; /* fallback */
    --text-base: #ffffff; /* The default text and icon color of the primary set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the primary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the primary set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #5b0ba1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-spotlight-set, .st-auto-theme .cyclemarker.selected.spotlight, .st-auto-theme .pianoroll .piano-roll-cycle-marker, .pianoroll .st-auto-theme .piano-roll-cycle-marker, .st-auto-theme .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .st-auto-theme .fatfingerbutton.cycletoggle > button.selected, .st-auto-theme .middleheader .compositionheader .cycleendguide.spotlight, .middleheader .compositionheader .st-auto-theme .cycleendguide.spotlight, .st-auto-theme .middleheader .compositionheader .cyclestartguide.spotlight, .middleheader .compositionheader .st-auto-theme .cyclestartguide.spotlight, .st-auto-theme .mango-button-spotlight-XL, .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .mango-button-spotlight-M, .st-auto-theme .mango-button-spotlight-S, .st-auto-theme .mango-button-spotlight {
    --background-base: #ff780a; /* The default background color of the spotlight set. */
    --background-highlight: #ff8b2d; /* A background color that indicates the hover state of a component. */
    --background-press: #f36d00; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #ff780a; /* fallback */
    --background-elevated-highlight: #ff780a; /* fallback */
    --background-elevated-press: #ff780a; /* fallback */
    --background-tinted-base: #ff780a; /* fallback */
    --background-tinted-highlight: #ff780a; /* fallback */
    --background-tinted-press: #ff780a; /* fallback */
    --text-base: #000000; /* The default text and icon color of the spotlight set. */
    --text-subdued: #000000; /* fallback */
    --text-primary: #000000; /* fallback */
    --text-negative: #000000; /* fallback */
    --text-spotlight: #000000; /* fallback */
    --text-positive: #000000; /* fallback */
    --essential-base: #000000; /* The default essential color of the spotlight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #000000; /* fallback */
    --essential-primary: #000000; /* fallback */
    --essential-negative: #000000; /* fallback */
    --essential-spotlight: #000000; /* fallback */
    --essential-positive: #000000; /* fallback */
    --decorative-base: #000000; /* The default decorative color of the spotlight set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #e26500; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-negative-set, .st-auto-theme .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .st-auto-theme .failure, .st-auto-theme .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .st-auto-theme .result-description-background, .st-auto-theme .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .st-auto-theme .mango-button-special-L, .st-auto-theme .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .st-auto-theme .mango-icon-button-special-L, .st-auto-theme .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .st-auto-theme .st-dialog-footer > button:last-child, .st-auto-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .st-auto-theme .project-template.project-template-type-template.project-template-kind-podcast, .st-auto-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .st-auto-theme .status-area-background, .st-auto-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .st-auto-theme .status-icon:not(.ok), .st-auto-theme .st-card__failure, .st-auto-theme .st-card-button__failure, .st-auto-theme .transport-controls .rec.selected, .transport-controls .st-auto-theme .rec.selected, .st-auto-theme .vocalsinstrumentgui .stop-button, .vocalsinstrumentgui .st-auto-theme .stop-button, .st-auto-theme .vocalsinstrumentgui .record-button, .vocalsinstrumentgui .st-auto-theme .record-button, .st-auto-theme .mango-button-negative-XL, .st-auto-theme .mango-button-negative-L, .st-auto-theme .mango-button-negative-M, .st-auto-theme .mango-button-negative-S {
    --background-base: #b4074b; /* The default background color of the negative set. */
    --background-highlight: #a50645; /* A background color that indicates the hover state of a component. */
    --background-press: #96063f; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #b4074b; /* fallback */
    --background-elevated-highlight: #b4074b; /* fallback */
    --background-elevated-press: #b4074b; /* fallback */
    --background-tinted-base: #b4074b; /* fallback */
    --background-tinted-highlight: #b4074b; /* fallback */
    --background-tinted-press: #b4074b; /* fallback */
    --text-base: #ffffff; /* The default text and icon color of the negative set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the negative set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the negative set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #d60859; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-positive-set, .st-auto-theme .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .st-auto-theme .success, .st-auto-theme .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .st-auto-theme .result-description-background, .st-auto-theme .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .st-auto-theme .new-preset-announcement-text, .st-auto-theme .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .st-auto-theme .new-preset-announcement-badge, .st-auto-theme .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .st-auto-theme .status-area-background, .st-auto-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .st-auto-theme .status-icon.ok, .st-auto-theme .download-card__best-quality, .st-auto-theme .st-card__success, .st-auto-theme .st-card__mini-icon, .st-auto-theme .st-card-button__success, .st-auto-theme .st-card-button__mini-icon, .st-auto-theme .search-type-new-tag, .st-auto-theme .presetselectorpresetitem .new-preset-badge, .presetselectorpresetitem .st-auto-theme .new-preset-badge {
    --background-base: #008744; /* The default background color of the positive set. */
    --background-highlight: #007d3f; /* A background color that indicates the hover state of a component. */
    --background-press: #00743a; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #008744; /* fallback */
    --background-elevated-highlight: #008744; /* fallback */
    --background-elevated-press: #008744; /* fallback */
    --background-tinted-base: #008744; /* fallback */
    --background-tinted-highlight: #008744; /* fallback */
    --background-tinted-press: #008744; /* fallback */
    --text-base: #ffffff; /* The default text and icon color of the positive set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the positive set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the positive set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #009b4e; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-contrasting-base-set, .st-auto-theme .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .st-auto-theme .try-vocal-tuner, .st-auto-theme .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .st-auto-theme .upgrade-icon-wrapper, .st-auto-theme .st-premium-badge, .st-auto-theme .download-card__paywall-icon, .st-auto-theme .st-slider.contrasting-theme, .st-auto-theme .playable-waveform-preview.waveform-inverted-theme, .st-auto-theme .star-rating-survey, .st-auto-theme .add-lane-button, .st-auto-theme .step-sequencer-cell, .st-auto-theme .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .st-auto-theme .bar-markers, .st-auto-theme .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .st-auto-theme .lane-header, .st-auto-theme .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .st-auto-theme .step-sequencer-lanes-scrollable, .st-auto-theme .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .st-auto-theme .playhead-cell, .st-auto-theme .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .st-auto-theme .step-sequencer-editor, .st-auto-theme .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-l, .drum-controller-desktop .st-auto-theme .elem-l, .st-auto-theme .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-k, .drum-controller-desktop .st-auto-theme .elem-k, .st-auto-theme .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-j, .drum-controller-desktop .st-auto-theme .elem-j, .st-auto-theme .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-i, .drum-controller-desktop .st-auto-theme .elem-i, .st-auto-theme .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-h, .drum-controller-desktop .st-auto-theme .elem-h, .st-auto-theme .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-g, .drum-controller-desktop .st-auto-theme .elem-g, .st-auto-theme .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-f, .drum-controller-desktop .st-auto-theme .elem-f, .st-auto-theme .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-e, .drum-controller-desktop .st-auto-theme .elem-e, .st-auto-theme .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-d, .drum-controller-desktop .st-auto-theme .elem-d, .st-auto-theme .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-c, .drum-controller-desktop .st-auto-theme .elem-c, .st-auto-theme .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-b, .drum-controller-desktop .st-auto-theme .elem-b, .st-auto-theme .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-a, .drum-controller-desktop .st-auto-theme .elem-a, .st-auto-theme .drum-controller-desktop .key, .drum-controller-desktop .st-auto-theme .key, .st-auto-theme .drum-controller-desktop .hit-overlay, .drum-controller-desktop .st-auto-theme .hit-overlay, .st-auto-theme .drum-controller-touch, .st-auto-theme .dnd-sampler-engine-gui, .st-auto-theme .bass808enginegui, .st-auto-theme .sampler1enginegui, .st-auto-theme .synth78enginegui, .st-auto-theme .looptab-banner_close-button, .st-auto-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .st-auto-theme .cta-text, .st-auto-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .st-auto-theme .loop-awareness-banner-container, .st-auto-theme .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .st-auto-theme .tagbutton.highlighted, .st-auto-theme .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-auto-theme .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-auto-theme .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-auto-theme .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .st-auto-theme .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .st-auto-theme .druminstrumentgui .interaction-area, .druminstrumentgui .st-auto-theme .interaction-area, .st-auto-theme .effects-editor-carousel__placeholder-card, .st-auto-theme .effects-editor-carousel .effects-editor-carousel__scroll-window, .effects-editor-carousel .st-auto-theme .effects-editor-carousel__scroll-window, .st-auto-theme .effects-editor-carousel, .st-auto-theme .vocal-tuner__disabled-overlay, .st-auto-theme .vocal-tools-container, .st-auto-theme .vocalsinstrumentgui .interaction-area, .vocalsinstrumentgui .st-auto-theme .interaction-area, .st-auto-theme .stomp .disabled-effect, .stomp .st-auto-theme .disabled-effect, .st-auto-theme .stomp .is-paid-effect, .stomp .st-auto-theme .is-paid-effect, .st-auto-theme .stomp--disabled-effect .power-on, .stomp--disabled-effect .st-auto-theme .power-on, .st-auto-theme .stomp--disabled-effect .closer, .stomp--disabled-effect .st-auto-theme .closer, .st-auto-theme .stomp--paywalled .power-on, .stomp--paywalled .st-auto-theme .power-on, .st-auto-theme .stomp--paywalled .closer, .stomp--paywalled .st-auto-theme .closer, .st-auto-theme .st-toggle-button-wrapper.contrastingbase {
    --background-base: #290247; /* The default background color of the contrastingBase set. */
    --background-highlight: #380361; /* A background color that indicates the hover state of a component. */
    --background-press: #130120; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #3e036c; /* The default background color for elevated elements in the contrastingBase set. */
    --background-elevated-highlight: #4b0481; /* For hover states of elevated elements */
    --background-elevated-press: #310255; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.12); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the contrastingBase set. */
    --text-subdued: #c884fc; /* For text and icons that are less prominent. */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the contrastingBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #aa43fa; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the contrastingBase set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #3f036d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-inverted-primary-set, .st-auto-theme .de-esser-gui .meter .mark, .de-esser-gui .meter .st-auto-theme .mark, .st-auto-theme .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .st-auto-theme .preview-waveform, .st-auto-theme .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .st-auto-theme button.st-button.button_circular, .st-auto-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-auto-theme .playing, .st-auto-theme .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .st-auto-theme .st-toggle-button {
    --background-base: #ffffff; /* The default background color of the invertedPrimary set. */
    --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */
    --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #ffffff; /* fallback */
    --background-elevated-highlight: #ffffff; /* fallback */
    --background-elevated-press: #ffffff; /* fallback */
    --background-tinted-base: #ffffff; /* fallback */
    --background-tinted-highlight: #ffffff; /* fallback */
    --background-tinted-press: #ffffff; /* fallback */
    --text-base: #430877; /* The default text and icon color of the invertedPrimary set. */
    --text-subdued: #9024f0; /* For text and icons that are less prominent. */
    --text-primary: #430877; /* fallback */
    --text-negative: #430877; /* fallback */
    --text-spotlight: #430877; /* fallback */
    --text-positive: #430877; /* fallback */
    --essential-base: #430877; /* The default essential color of the invertedPrimary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #b267f5; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #430877; /* fallback */
    --essential-negative: #430877; /* fallback */
    --essential-spotlight: #430877; /* fallback */
    --essential-positive: #430877; /* fallback */
    --decorative-base: #430877; /* The default decorative color of the invertedPrimary set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-simply-red-set, .st-auto-theme .automationeditors.col0 svg, .automationeditors.col0 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col0 .automationcontrolpoint,
  .automationeditors.col0 .st-auto-theme .automationcontrolpoint, .st-auto-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .st-auto-theme .synth-led-on, .st-auto-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .st-auto-theme .synth-led, .st-auto-theme .trackheader .trackgroup.drums, .trackheader .st-auto-theme .trackgroup.drums, .st-auto-theme .region-tools .loophandle.col0, .region-tools .st-auto-theme .loophandle.col0, .st-auto-theme .vocalsinstrumentgui .recording-label, .vocalsinstrumentgui .st-auto-theme .recording-label {
    --background-base: #bb142c; /* The default background color of the simplyRed set. */
    --background-highlight: #b1132a; /* A background color that indicates the hover state of a component. */
    --background-press: #660b18; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #d21631; /* The default background color for elevated elements in the simplyRed set. */
    --background-elevated-highlight: #dc1834; /* For hover states of elevated elements */
    --background-elevated-press: #860e20; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the simplyRed set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the simplyRed set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the simplyRed set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #dc1834; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-maroon-set, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .project-template-icon.podcaststudio, .st-auto-theme .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .st-auto-theme .tab-button.selected, .st-auto-theme .automationeditors.col1 svg, .automationeditors.col1 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col1 .automationcontrolpoint,
  .automationeditors.col1 .st-auto-theme .automationcontrolpoint {
    --background-base: #ad236d; /* The default background color of the maroon set. */
    --background-highlight: #a42167; /* A background color that indicates the hover state of a component. */
    --background-press: #5d133b; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #c3277b; /* The default background color for elevated elements in the maroon set. */
    --background-elevated-highlight: #cc2981; /* For hover states of elevated elements */
    --background-elevated-press: #7b194e; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the maroon set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the maroon set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the maroon set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #cc2981; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-iron-wine-set, .st-auto-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .st-auto-theme .project-template.project-template-type-template.project-template-kind-sketchpad, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .project-template-icon.sketchpad, .st-auto-theme .automationeditors.col2 svg, .automationeditors.col2 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col2 .automationcontrolpoint,
  .automationeditors.col2 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.recording, .trackheader .st-auto-theme .trackgroup.recording {
    --background-base: #903c93; /* The default background color of the ironWine set. */
    --background-highlight: #88398b; /* A background color that indicates the hover state of a component. */
    --background-press: #4c204e; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #a244a6; /* The default background color for elevated elements in the ironWine set. */
    --background-elevated-highlight: #ab47ae; /* For hover states of elevated elements */
    --background-elevated-press: #662b69; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the ironWine set. */
    --text-primary: #ffb7b9; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the ironWine set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #ffb7b9; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the ironWine set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #aa47ae; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-purple-rain-set, .st-auto-theme .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .st-auto-theme .st-card__icon-wrapper, .st-auto-theme .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .st-auto-theme .st-card-button__icon-wrapper, .st-auto-theme .automationeditors.col3 svg, .automationeditors.col3 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col3 .automationcontrolpoint,
  .automationeditors.col3 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.vocal, .trackheader .st-auto-theme .trackgroup.vocal {
    --background-base: #8411e9; /* The default background color of the purpleRain set. */
    --background-highlight: #7d10dd; /* A background color that indicates the hover state of a component. */
    --background-press: #48097f; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #952df0; /* The default background color for elevated elements in the purpleRain set. */
    --background-elevated-highlight: #9a38f1; /* For hover states of elevated elements */
    --background-elevated-press: #5f0ca8; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.18); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.23); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.12); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the purpleRain set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the purpleRain set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the purpleRain set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #9b39f1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-royal-blue-set, .st-auto-theme .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .st-auto-theme .st-card__icon-wrapper, .st-auto-theme .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .st-auto-theme .st-card-button__icon-wrapper, .st-auto-theme .automationeditors.col4 svg, .automationeditors.col4 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col4 .automationcontrolpoint,
  .automationeditors.col4 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.lead, .trackheader .st-auto-theme .trackgroup.lead {
    --background-base: #284ae8; /* The default background color of the royalBlue set. */
    --background-highlight: #1f42e7; /* A background color that indicates the hover state of a component. */
    --background-press: #0e2487; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #3d5bea; /* The default background color for elevated elements in the royalBlue set. */
    --background-elevated-highlight: #4563eb; /* For hover states of elevated elements */
    --background-elevated-press: #1330b4; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.14); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the royalBlue set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the royalBlue set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the royalBlue set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #4361eb; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-ocean-eyes-set, .st-auto-theme .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .st-auto-theme .st-card__icon-wrapper, .st-auto-theme .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .st-auto-theme .st-card-button__icon-wrapper, .st-auto-theme .automationeditors.col5 svg, .automationeditors.col5 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col5 .automationcontrolpoint,
  .automationeditors.col5 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.other, .trackheader .st-auto-theme .trackgroup.other {
    --background-base: #006878; /* The default background color of the oceanEyes set. */
    --background-highlight: #006272; /* A background color that indicates the hover state of a component. */
    --background-press: #003740; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #007587; /* The default background color for elevated elements in the oceanEyes set. */
    --background-elevated-highlight: #007b8e; /* For hover states of elevated elements */
    --background-elevated-press: #004a55; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the oceanEyes set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the oceanEyes set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the oceanEyes set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #007c8f; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-forest-set, .st-auto-theme .automationeditors.col6 svg, .automationeditors.col6 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col6 .automationcontrolpoint,
  .automationeditors.col6 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.bass, .trackheader .st-auto-theme .trackgroup.bass {
    --background-base: #006b56; /* The default background color of the forest set. */
    --background-highlight: #006551; /* A background color that indicates the hover state of a component. */
    --background-press: #00392e; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #007961; /* The default background color for elevated elements in the forest set. */
    --background-elevated-highlight: #007f66; /* For hover states of elevated elements */
    --background-elevated-press: #004c3d; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.08); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the forest set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the forest set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the forest set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #007f66; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-green-light-set, .st-auto-theme .automationeditors.col7 svg, .automationeditors.col7 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col7 .automationcontrolpoint,
  .automationeditors.col7 .st-auto-theme .automationcontrolpoint {
    --background-base: #146c32; /* The default background color of the greenLight set. */
    --background-highlight: #13662f; /* A background color that indicates the hover state of a component. */
    --background-press: #0b391a; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #177a38; /* The default background color for elevated elements in the greenLight set. */
    --background-elevated-highlight: #18803b; /* For hover states of elevated elements */
    --background-elevated-press: #0e4c23; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.07); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the greenLight set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the greenLight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the greenLight set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #18803b; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-gold-frapp-set, .st-auto-theme .automationeditors.col8 svg, .automationeditors.col8 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col8 .automationcontrolpoint,
  .automationeditors.col8 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.harmonics, .trackheader .st-auto-theme .trackgroup.harmonics {
    --background-base: #855311; /* The default background color of the goldFrapp set. */
    --background-highlight: #7e4f10; /* A background color that indicates the hover state of a component. */
    --background-press: #462c09; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #965e13; /* The default background color for elevated elements in the goldFrapp set. */
    --background-elevated-highlight: #9e6214; /* For hover states of elevated elements */
    --background-elevated-press: #5e3b0c; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the goldFrapp set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the goldFrapp set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the goldFrapp set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #9e6314; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-orange-soda-set, .st-auto-theme .automationeditors.col9 svg, .automationeditors.col9 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col9 .automationcontrolpoint,
  .automationeditors.col9 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.fx, .trackheader .st-auto-theme .trackgroup.fx {
    --background-base: #9d4226; /* The default background color of the orangeSoda set. */
    --background-highlight: #953e24; /* A background color that indicates the hover state of a component. */
    --background-press: #532314; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #b14a2b; /* The default background color for elevated elements in the orangeSoda set. */
    --background-elevated-highlight: #ba4e2d; /* For hover states of elevated elements */
    --background-elevated-press: #6f2f1b; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.09); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.13); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the orangeSoda set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the orangeSoda set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the orangeSoda set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #ba4e2d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
}
/**
 Mango Foundation
 */
/* An experimental dark theme */
/* Lifecycle status: experimental */
.st-dark-theme, .sampler-crossfade-icon, .sampler-crossfade-handle-chamfer, .sampler-crossfade-handle, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols {
  --font-family: "Matter", sans-serif;
}

.st-dark-theme, .sampler-crossfade-icon, .sampler-crossfade-handle-chamfer, .sampler-crossfade-handle, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols,
.st-dark-theme .st-base-set,
.st-dark-theme .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .st-dark-theme .status-message,
.st-dark-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .st-dark-theme .status-message,
.st-dark-theme .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .st-dark-theme .status-description,
.st-dark-theme .save-preset-dialog .inner .body,
.save-preset-dialog .inner .st-dark-theme .body,
.st-dark-theme .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .st-dark-theme .closer,
.st-dark-theme .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .st-dark-theme .closer,
.st-dark-theme .key-selector-menu button[aria-checked=false],
.key-selector-menu .st-dark-theme button[aria-checked=false],
.st-dark-theme .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .st-dark-theme .thumb-visual,
.st-dark-theme .st-curved-slider-container,
.st-dark-theme .st-slider::-webkit-slider-runnable-track,
.st-dark-theme .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .st-dark-theme button.st-button.button_circular,
.st-dark-theme .playable-waveform-preview.waveform-base-theme,
.st-dark-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .st-dark-theme .subheading,
.st-dark-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .st-dark-theme .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-crossfade-icon .st-base-set,
.sampler-crossfade-icon .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .sampler-crossfade-icon .status-message,
.sampler-crossfade-icon .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .sampler-crossfade-icon .status-message,
.sampler-crossfade-icon .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .sampler-crossfade-icon .status-description,
.sampler-crossfade-icon .save-preset-dialog .inner .body,
.save-preset-dialog .inner .sampler-crossfade-icon .body,
.sampler-crossfade-icon .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .sampler-crossfade-icon .closer,
.sampler-crossfade-icon .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .sampler-crossfade-icon .closer,
.sampler-crossfade-icon .key-selector-menu button[aria-checked=false],
.key-selector-menu .sampler-crossfade-icon button[aria-checked=false],
.sampler-crossfade-icon .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .sampler-crossfade-icon .thumb-visual,
.sampler-crossfade-icon .st-curved-slider-container,
.sampler-crossfade-icon .st-slider::-webkit-slider-runnable-track,
.sampler-crossfade-icon .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .sampler-crossfade-icon button.st-button.button_circular,
.sampler-crossfade-icon .playable-waveform-preview.waveform-base-theme,
.sampler-crossfade-icon .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .sampler-crossfade-icon .subheading,
.sampler-crossfade-icon .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .sampler-crossfade-icon .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-crossfade-handle-chamfer .st-base-set,
.sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .sampler-crossfade-handle-chamfer .status-message,
.sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .sampler-crossfade-handle-chamfer .status-message,
.sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .sampler-crossfade-handle-chamfer .status-description,
.sampler-crossfade-handle-chamfer .save-preset-dialog .inner .body,
.save-preset-dialog .inner .sampler-crossfade-handle-chamfer .body,
.sampler-crossfade-handle-chamfer .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .sampler-crossfade-handle-chamfer .closer,
.sampler-crossfade-handle-chamfer .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .sampler-crossfade-handle-chamfer .closer,
.sampler-crossfade-handle-chamfer .key-selector-menu button[aria-checked=false],
.key-selector-menu .sampler-crossfade-handle-chamfer button[aria-checked=false],
.sampler-crossfade-handle-chamfer .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .sampler-crossfade-handle-chamfer .thumb-visual,
.sampler-crossfade-handle-chamfer .st-curved-slider-container,
.sampler-crossfade-handle-chamfer .st-slider::-webkit-slider-runnable-track,
.sampler-crossfade-handle-chamfer .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .sampler-crossfade-handle-chamfer button.st-button.button_circular,
.sampler-crossfade-handle-chamfer .playable-waveform-preview.waveform-base-theme,
.sampler-crossfade-handle-chamfer .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .sampler-crossfade-handle-chamfer .subheading,
.sampler-crossfade-handle-chamfer .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .sampler-crossfade-handle-chamfer .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-crossfade-handle .st-base-set,
.sampler-crossfade-handle .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .sampler-crossfade-handle .status-message,
.sampler-crossfade-handle .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .sampler-crossfade-handle .status-message,
.sampler-crossfade-handle .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .sampler-crossfade-handle .status-description,
.sampler-crossfade-handle .save-preset-dialog .inner .body,
.save-preset-dialog .inner .sampler-crossfade-handle .body,
.sampler-crossfade-handle .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .sampler-crossfade-handle .closer,
.sampler-crossfade-handle .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .sampler-crossfade-handle .closer,
.sampler-crossfade-handle .key-selector-menu button[aria-checked=false],
.key-selector-menu .sampler-crossfade-handle button[aria-checked=false],
.sampler-crossfade-handle .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .sampler-crossfade-handle .thumb-visual,
.sampler-crossfade-handle .st-curved-slider-container,
.sampler-crossfade-handle .st-slider::-webkit-slider-runnable-track,
.sampler-crossfade-handle .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .sampler-crossfade-handle button.st-button.button_circular,
.sampler-crossfade-handle .playable-waveform-preview.waveform-base-theme,
.sampler-crossfade-handle .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .sampler-crossfade-handle .subheading,
.sampler-crossfade-handle .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .sampler-crossfade-handle .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.st-dark-theme .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-crossfade-icon .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-crossfade-handle-chamfer .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-crossfade-handle .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-ui-bottom-buttons .st-dark-theme .sampler-ui-delete,
.sampler-ui-bottom-buttons .sampler-crossfade-icon .sampler-ui-delete,
.sampler-ui-bottom-buttons .sampler-crossfade-handle-chamfer .sampler-ui-delete,
.sampler-ui-bottom-buttons .sampler-crossfade-handle .sampler-ui-delete,
.st-dark-theme .tab-button,
.sampler-crossfade-icon .tab-button,
.sampler-crossfade-handle-chamfer .tab-button,
.sampler-crossfade-handle .tab-button,
.st-dark-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.sampler-crossfade-icon .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.sampler-crossfade-handle-chamfer .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.sampler-crossfade-handle .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-dark-theme .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .sampler-crossfade-icon .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .sampler-crossfade-handle-chamfer .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .sampler-crossfade-handle .selected,
.st-dark-theme .dnd-sampler-engine-gui .dnd-sampler-options,
.sampler-crossfade-icon .dnd-sampler-engine-gui .dnd-sampler-options,
.sampler-crossfade-handle-chamfer .dnd-sampler-engine-gui .dnd-sampler-options,
.sampler-crossfade-handle .dnd-sampler-engine-gui .dnd-sampler-options,
.dnd-sampler-engine-gui .st-dark-theme .dnd-sampler-options,
.dnd-sampler-engine-gui .sampler-crossfade-icon .dnd-sampler-options,
.dnd-sampler-engine-gui .sampler-crossfade-handle-chamfer .dnd-sampler-options,
.dnd-sampler-engine-gui .sampler-crossfade-handle .dnd-sampler-options,
.st-dark-theme .bass808enginegui .octaveselector .lblinline,
.sampler-crossfade-icon .bass808enginegui .octaveselector .lblinline,
.sampler-crossfade-handle-chamfer .bass808enginegui .octaveselector .lblinline,
.sampler-crossfade-handle .bass808enginegui .octaveselector .lblinline,
.bass808enginegui .octaveselector .st-dark-theme .lblinline,
.bass808enginegui .octaveselector .sampler-crossfade-icon .lblinline,
.bass808enginegui .octaveselector .sampler-crossfade-handle-chamfer .lblinline,
.bass808enginegui .octaveselector .sampler-crossfade-handle .lblinline,
.st-dark-theme .bass808enginegui .boxed,
.sampler-crossfade-icon .bass808enginegui .boxed,
.sampler-crossfade-handle-chamfer .bass808enginegui .boxed,
.sampler-crossfade-handle .bass808enginegui .boxed,
.bass808enginegui .st-dark-theme .boxed,
.bass808enginegui .sampler-crossfade-icon .boxed,
.bass808enginegui .sampler-crossfade-handle-chamfer .boxed,
.bass808enginegui .sampler-crossfade-handle .boxed,
.st-dark-theme .bass808enginegui,
.sampler-crossfade-icon .bass808enginegui,
.sampler-crossfade-handle-chamfer .bass808enginegui,
.sampler-crossfade-handle .bass808enginegui,
.st-dark-theme .sampler1enginegui .octaveselector .lblinline,
.sampler-crossfade-icon .sampler1enginegui .octaveselector .lblinline,
.sampler-crossfade-handle-chamfer .sampler1enginegui .octaveselector .lblinline,
.sampler-crossfade-handle .sampler1enginegui .octaveselector .lblinline,
.sampler1enginegui .octaveselector .st-dark-theme .lblinline,
.sampler1enginegui .octaveselector .sampler-crossfade-icon .lblinline,
.sampler1enginegui .octaveselector .sampler-crossfade-handle-chamfer .lblinline,
.sampler1enginegui .octaveselector .sampler-crossfade-handle .lblinline,
.st-dark-theme .sampler1enginegui .boxed,
.sampler-crossfade-icon .sampler1enginegui .boxed,
.sampler-crossfade-handle-chamfer .sampler1enginegui .boxed,
.sampler-crossfade-handle .sampler1enginegui .boxed,
.sampler1enginegui .st-dark-theme .boxed,
.sampler1enginegui .sampler-crossfade-icon .boxed,
.sampler1enginegui .sampler-crossfade-handle-chamfer .boxed,
.sampler1enginegui .sampler-crossfade-handle .boxed,
.st-dark-theme .sampler1enginegui,
.sampler-crossfade-icon .sampler1enginegui,
.sampler-crossfade-handle-chamfer .sampler1enginegui,
.sampler-crossfade-handle .sampler1enginegui,
.st-dark-theme .synth84enginegui,
.sampler-crossfade-icon .synth84enginegui,
.sampler-crossfade-handle-chamfer .synth84enginegui,
.sampler-crossfade-handle .synth84enginegui,
.st-dark-theme .synth78enginegui .boxed,
.sampler-crossfade-icon .synth78enginegui .boxed,
.sampler-crossfade-handle-chamfer .synth78enginegui .boxed,
.sampler-crossfade-handle .synth78enginegui .boxed,
.synth78enginegui .st-dark-theme .boxed,
.synth78enginegui .sampler-crossfade-icon .boxed,
.synth78enginegui .sampler-crossfade-handle-chamfer .boxed,
.synth78enginegui .sampler-crossfade-handle .boxed,
.st-dark-theme .synth78enginegui,
.sampler-crossfade-icon .synth78enginegui,
.sampler-crossfade-handle-chamfer .synth78enginegui,
.sampler-crossfade-handle .synth78enginegui,
.st-dark-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.sampler-crossfade-icon .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.sampler-crossfade-handle-chamfer .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.sampler-crossfade-handle .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-dark-theme .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-icon .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle-chamfer .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle .tab.deemphasised,
.st-dark-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.sampler-crossfade-icon .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.sampler-crossfade-handle-chamfer .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.sampler-crossfade-handle .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-dark-theme .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-icon .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle-chamfer .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle .tab.deemphasised,
.st-dark-theme .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.sampler-crossfade-icon .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.sampler-crossfade-handle-chamfer .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.sampler-crossfade-handle .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .st-dark-theme .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .sampler-crossfade-icon .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .sampler-crossfade-handle-chamfer .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .sampler-crossfade-handle .tab,
.st-dark-theme .new-ribbon,
.sampler-crossfade-icon .new-ribbon,
.sampler-crossfade-handle-chamfer .new-ribbon,
.sampler-crossfade-handle .new-ribbon,
.st-dark-theme .looptab .results .addtrackshortcut .playityourself,
.sampler-crossfade-icon .looptab .results .addtrackshortcut .playityourself,
.sampler-crossfade-handle-chamfer .looptab .results .addtrackshortcut .playityourself,
.sampler-crossfade-handle .looptab .results .addtrackshortcut .playityourself,
.looptab .results .addtrackshortcut .st-dark-theme .playityourself,
.looptab .results .addtrackshortcut .sampler-crossfade-icon .playityourself,
.looptab .results .addtrackshortcut .sampler-crossfade-handle-chamfer .playityourself,
.looptab .results .addtrackshortcut .sampler-crossfade-handle .playityourself,
.st-dark-theme .looptab .results .addtrackshortcut,
.sampler-crossfade-icon .looptab .results .addtrackshortcut,
.sampler-crossfade-handle-chamfer .looptab .results .addtrackshortcut,
.sampler-crossfade-handle .looptab .results .addtrackshortcut,
.looptab .results .st-dark-theme .addtrackshortcut,
.looptab .results .sampler-crossfade-icon .addtrackshortcut,
.looptab .results .sampler-crossfade-handle-chamfer .addtrackshortcut,
.looptab .results .sampler-crossfade-handle .addtrackshortcut,
.st-dark-theme .looptab .loop-results-tabs-container .loop-results-tab-selected,
.sampler-crossfade-icon .looptab .loop-results-tabs-container .loop-results-tab-selected,
.sampler-crossfade-handle-chamfer .looptab .loop-results-tabs-container .loop-results-tab-selected,
.sampler-crossfade-handle .looptab .loop-results-tabs-container .loop-results-tab-selected,
.looptab .loop-results-tabs-container .st-dark-theme .loop-results-tab-selected,
.looptab .loop-results-tabs-container .sampler-crossfade-icon .loop-results-tab-selected,
.looptab .loop-results-tabs-container .sampler-crossfade-handle-chamfer .loop-results-tab-selected,
.looptab .loop-results-tabs-container .sampler-crossfade-handle .loop-results-tab-selected,
.st-dark-theme .looptab .loop-results-tabs-container .loop-results-tab,
.sampler-crossfade-icon .looptab .loop-results-tabs-container .loop-results-tab,
.sampler-crossfade-handle-chamfer .looptab .loop-results-tabs-container .loop-results-tab,
.sampler-crossfade-handle .looptab .loop-results-tabs-container .loop-results-tab,
.looptab .loop-results-tabs-container .st-dark-theme .loop-results-tab,
.looptab .loop-results-tabs-container .sampler-crossfade-icon .loop-results-tab,
.looptab .loop-results-tabs-container .sampler-crossfade-handle-chamfer .loop-results-tab,
.looptab .loop-results-tabs-container .sampler-crossfade-handle .loop-results-tab,
.st-dark-theme .looptab .loop-results-tabs-container,
.sampler-crossfade-icon .looptab .loop-results-tabs-container,
.sampler-crossfade-handle-chamfer .looptab .loop-results-tabs-container,
.sampler-crossfade-handle .looptab .loop-results-tabs-container,
.looptab .st-dark-theme .loop-results-tabs-container,
.looptab .sampler-crossfade-icon .loop-results-tabs-container,
.looptab .sampler-crossfade-handle-chamfer .loop-results-tabs-container,
.looptab .sampler-crossfade-handle .loop-results-tabs-container,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-base-set,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .status-area.ok .status-message,
.mididialog2 > .st-dialog-body .status-area.ok .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-message,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
.mididialog2 > .st-dialog-body .status-area:not(.ok) .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-message,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .status-area .status-description,
.mididialog2 > .st-dialog-body .status-area .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-description,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .save-preset-dialog .inner .body,
.save-preset-dialog .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .body,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .save-preset-dialog .inner .closer,
.save-preset-dialog .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .closer,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .radio-dialog.new-dialog .inner .closer,
.radio-dialog.new-dialog .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .closer,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .key-selector-menu button[aria-checked=false],
.key-selector-menu .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols button[aria-checked=false],
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-curved-slider-container .st-curved-slider .thumb-visual,
.st-curved-slider-container .st-curved-slider .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .thumb-visual,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-curved-slider-container,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-slider::-webkit-slider-runnable-track,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
.playable-waveform-preview.waveform-base-theme .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols button.st-button.button_circular,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playable-waveform-preview.waveform-base-theme,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
.sampler-ui-create-instrument-container .sampler-create-instrument-button .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .subheading,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.sampler-ui-create-instrument-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-create-instrument-button.button-search.drag-enabled.dragging,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-ui-bottom-buttons .sampler-ui-delete,
.sampler-ui-bottom-buttons .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-ui-delete,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab-button,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .selected,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .dnd-sampler-engine-gui .dnd-sampler-options,
.dnd-sampler-engine-gui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .dnd-sampler-options,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .bass808enginegui .octaveselector .lblinline,
.bass808enginegui .octaveselector .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .lblinline,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .bass808enginegui .boxed,
.bass808enginegui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .boxed,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .bass808enginegui,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler1enginegui .octaveselector .lblinline,
.sampler1enginegui .octaveselector .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .lblinline,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler1enginegui .boxed,
.sampler1enginegui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .boxed,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler1enginegui,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth84enginegui,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth78enginegui .boxed,
.synth78enginegui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .boxed,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth78enginegui,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab.deemphasised,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab.deemphasised,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .new-ribbon,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .results .addtrackshortcut .playityourself,
.looptab .results .addtrackshortcut .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playityourself,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .results .addtrackshortcut,
.looptab .results .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .addtrackshortcut,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .loop-results-tabs-container .loop-results-tab-selected,
.looptab .loop-results-tabs-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .loop-results-tab-selected,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .loop-results-tabs-container .loop-results-tab,
.looptab .loop-results-tabs-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .loop-results-tab,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .loop-results-tabs-container,
.looptab .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .loop-results-tabs-container,
.st-dark-theme .keyboardinstrumentgui .row2 .octaveselector .lbl,
.sampler-crossfade-icon .keyboardinstrumentgui .row2 .octaveselector .lbl,
.sampler-crossfade-handle-chamfer .keyboardinstrumentgui .row2 .octaveselector .lbl,
.sampler-crossfade-handle .keyboardinstrumentgui .row2 .octaveselector .lbl,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .keyboardinstrumentgui .row2 .octaveselector .lbl,
.keyboardinstrumentgui .row2 .octaveselector .st-dark-theme .lbl,
.keyboardinstrumentgui .row2 .octaveselector .sampler-crossfade-icon .lbl,
.keyboardinstrumentgui .row2 .octaveselector .sampler-crossfade-handle-chamfer .lbl,
.keyboardinstrumentgui .row2 .octaveselector .sampler-crossfade-handle .lbl,
.with-808-styling .keyboardinstrumentgui .row2 .octaveselector .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .lbl,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .row2 .octaveselector .quickcontrols .lbl,
.st-dark-theme .effects-editor-carousel__container .stomp .name-ribbon,
.sampler-crossfade-icon .effects-editor-carousel__container .stomp .name-ribbon,
.sampler-crossfade-handle-chamfer .effects-editor-carousel__container .stomp .name-ribbon,
.sampler-crossfade-handle .effects-editor-carousel__container .stomp .name-ribbon,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effects-editor-carousel__container .stomp .name-ribbon,
.effects-editor-carousel__container .stomp .st-dark-theme .name-ribbon,
.effects-editor-carousel__container .stomp .sampler-crossfade-icon .name-ribbon,
.effects-editor-carousel__container .stomp .sampler-crossfade-handle-chamfer .name-ribbon,
.effects-editor-carousel__container .stomp .sampler-crossfade-handle .name-ribbon,
.effects-editor-carousel__container .stomp .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .name-ribbon,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .effects-editor-carousel__container .stomp .quickcontrols .name-ribbon,
.st-dark-theme .mediumknob,
.sampler-crossfade-icon .mediumknob,
.sampler-crossfade-handle-chamfer .mediumknob,
.sampler-crossfade-handle .mediumknob,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mediumknob,
.st-dark-theme .miniknob,
.sampler-crossfade-icon .miniknob,
.sampler-crossfade-handle-chamfer .miniknob,
.sampler-crossfade-handle .miniknob,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .miniknob,
.st-dark-theme .miniled,
.sampler-crossfade-icon .miniled,
.sampler-crossfade-handle-chamfer .miniled,
.sampler-crossfade-handle .miniled,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .miniled,
.st-dark-theme .mango-button.disabled,
.sampler-crossfade-icon .mango-button.disabled,
.sampler-crossfade-handle-chamfer .mango-button.disabled,
.sampler-crossfade-handle .mango-button.disabled,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button.disabled,
.st-dark-theme .disabled.mango-button-spotlight,
.sampler-crossfade-icon .disabled.mango-button-spotlight,
.sampler-crossfade-handle-chamfer .disabled.mango-button-spotlight,
.sampler-crossfade-handle .disabled.mango-button-spotlight,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-spotlight,
.st-dark-theme .disabled.mango-button-weak-XL,
.sampler-crossfade-icon .disabled.mango-button-weak-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-button-weak-XL,
.sampler-crossfade-handle .disabled.mango-button-weak-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-weak-XL,
.st-dark-theme .disabled.mango-icon-button-emphasized-XL,
.sampler-crossfade-icon .disabled.mango-icon-button-emphasized-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-emphasized-XL,
.sampler-crossfade-handle .disabled.mango-icon-button-emphasized-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-emphasized-XL,
.st-dark-theme .disabled.mango-icon-button-weak-XL,
.sampler-crossfade-icon .disabled.mango-icon-button-weak-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-weak-XL,
.sampler-crossfade-handle .disabled.mango-icon-button-weak-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-weak-XL,
.st-dark-theme .disabled.mango-button-weak-L,
.sampler-crossfade-icon .disabled.mango-button-weak-L,
.sampler-crossfade-handle-chamfer .disabled.mango-button-weak-L,
.sampler-crossfade-handle .disabled.mango-button-weak-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-weak-L,
.st-dark-theme .disabled.mango-icon-button-emphasized-L,
.sampler-crossfade-icon .disabled.mango-icon-button-emphasized-L,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-emphasized-L,
.sampler-crossfade-handle .disabled.mango-icon-button-emphasized-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-emphasized-L,
.st-dark-theme .disabled.mango-icon-button-weak-L,
.sampler-crossfade-icon .disabled.mango-icon-button-weak-L,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-weak-L,
.sampler-crossfade-handle .disabled.mango-icon-button-weak-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-weak-L,
.st-dark-theme .disabled.mango-button-weak-M,
.sampler-crossfade-icon .disabled.mango-button-weak-M,
.sampler-crossfade-handle-chamfer .disabled.mango-button-weak-M,
.sampler-crossfade-handle .disabled.mango-button-weak-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-weak-M,
.st-dark-theme .disabled.mango-icon-button-emphasized-M,
.sampler-crossfade-icon .disabled.mango-icon-button-emphasized-M,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-emphasized-M,
.sampler-crossfade-handle .disabled.mango-icon-button-emphasized-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-emphasized-M,
.st-dark-theme .disabled.mango-icon-button-weak-M,
.sampler-crossfade-icon .disabled.mango-icon-button-weak-M,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-weak-M,
.sampler-crossfade-handle .disabled.mango-icon-button-weak-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-weak-M,
.st-dark-theme .disabled.mango-button-weak-S,
.sampler-crossfade-icon .disabled.mango-button-weak-S,
.sampler-crossfade-handle-chamfer .disabled.mango-button-weak-S,
.sampler-crossfade-handle .disabled.mango-button-weak-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-weak-S,
.st-dark-theme .disabled.mango-icon-button-emphasized-S,
.sampler-crossfade-icon .disabled.mango-icon-button-emphasized-S,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-emphasized-S,
.sampler-crossfade-handle .disabled.mango-icon-button-emphasized-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-emphasized-S,
.st-dark-theme .disabled.mango-icon-button-weak-S,
.sampler-crossfade-icon .disabled.mango-icon-button-weak-S,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-weak-S,
.sampler-crossfade-handle .disabled.mango-icon-button-weak-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-weak-S,
.st-dark-theme .disabled.mango-button-emphasised-XL,
.sampler-crossfade-icon .disabled.mango-button-emphasised-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-button-emphasised-XL,
.sampler-crossfade-handle .disabled.mango-button-emphasised-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-emphasised-XL,
.st-dark-theme .disabled.mango-button-emphasised-L,
.sampler-crossfade-icon .disabled.mango-button-emphasised-L,
.sampler-crossfade-handle-chamfer .disabled.mango-button-emphasised-L,
.sampler-crossfade-handle .disabled.mango-button-emphasised-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-emphasised-L,
.st-dark-theme .disabled.mango-button-emphasised-M,
.sampler-crossfade-icon .disabled.mango-button-emphasised-M,
.sampler-crossfade-handle-chamfer .disabled.mango-button-emphasised-M,
.sampler-crossfade-handle .disabled.mango-button-emphasised-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-emphasised-M,
.st-dark-theme .disabled.mango-button-emphasised-S,
.sampler-crossfade-icon .disabled.mango-button-emphasised-S,
.sampler-crossfade-handle-chamfer .disabled.mango-button-emphasised-S,
.sampler-crossfade-handle .disabled.mango-button-emphasised-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-emphasised-S,
.st-dark-theme .disabled.mango-button-regular-XL,
.sampler-crossfade-icon .disabled.mango-button-regular-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-button-regular-XL,
.sampler-crossfade-handle .disabled.mango-button-regular-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-regular-XL,
.st-dark-theme .disabled.mango-icon-button-regular-XL,
.sampler-crossfade-icon .disabled.mango-icon-button-regular-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-regular-XL,
.sampler-crossfade-handle .disabled.mango-icon-button-regular-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-regular-XL,
.st-dark-theme .disabled.mango-button-regular-L,
.sampler-crossfade-icon .disabled.mango-button-regular-L,
.sampler-crossfade-handle-chamfer .disabled.mango-button-regular-L,
.sampler-crossfade-handle .disabled.mango-button-regular-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-regular-L,
.st-dark-theme .disabled.mango-icon-button-regular-L,
.sampler-crossfade-icon .disabled.mango-icon-button-regular-L,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-regular-L,
.sampler-crossfade-handle .disabled.mango-icon-button-regular-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-regular-L,
.st-dark-theme .disabled.mango-button-regular-M,
.sampler-crossfade-icon .disabled.mango-button-regular-M,
.sampler-crossfade-handle-chamfer .disabled.mango-button-regular-M,
.sampler-crossfade-handle .disabled.mango-button-regular-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-regular-M,
.st-dark-theme .disabled.mango-icon-button-regular-M,
.sampler-crossfade-icon .disabled.mango-icon-button-regular-M,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-regular-M,
.sampler-crossfade-handle .disabled.mango-icon-button-regular-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-regular-M,
.st-dark-theme .disabled.mango-button-regular-S,
.sampler-crossfade-icon .disabled.mango-button-regular-S,
.sampler-crossfade-handle-chamfer .disabled.mango-button-regular-S,
.sampler-crossfade-handle .disabled.mango-button-regular-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-regular-S,
.st-dark-theme .disabled.mango-icon-button-regular-S,
.sampler-crossfade-icon .disabled.mango-icon-button-regular-S,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-regular-S,
.sampler-crossfade-handle .disabled.mango-icon-button-regular-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-regular-S,
.st-dark-theme .disabled.mango-button-special-S,
.sampler-crossfade-icon .disabled.mango-button-special-S,
.sampler-crossfade-handle-chamfer .disabled.mango-button-special-S,
.sampler-crossfade-handle .disabled.mango-button-special-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-special-S,
.st-dark-theme .disabled.mango-icon-button-special-S,
.sampler-crossfade-icon .disabled.mango-icon-button-special-S,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-special-S,
.sampler-crossfade-handle .disabled.mango-icon-button-special-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-special-S,
.st-dark-theme .disabled.mango-button-negative-S,
.sampler-crossfade-icon .disabled.mango-button-negative-S,
.sampler-crossfade-handle-chamfer .disabled.mango-button-negative-S,
.sampler-crossfade-handle .disabled.mango-button-negative-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-negative-S,
.st-dark-theme .disabled.mango-button-spotlight-S,
.sampler-crossfade-icon .disabled.mango-button-spotlight-S,
.sampler-crossfade-handle-chamfer .disabled.mango-button-spotlight-S,
.sampler-crossfade-handle .disabled.mango-button-spotlight-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-spotlight-S,
.st-dark-theme .disabled.mango-button-special-M,
.sampler-crossfade-icon .disabled.mango-button-special-M,
.sampler-crossfade-handle-chamfer .disabled.mango-button-special-M,
.sampler-crossfade-handle .disabled.mango-button-special-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-special-M,
.st-dark-theme .disabled.mango-icon-button-special-M,
.sampler-crossfade-icon .disabled.mango-icon-button-special-M,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-special-M,
.sampler-crossfade-handle .disabled.mango-icon-button-special-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-special-M,
.st-dark-theme .disabled.mango-button-negative-M,
.sampler-crossfade-icon .disabled.mango-button-negative-M,
.sampler-crossfade-handle-chamfer .disabled.mango-button-negative-M,
.sampler-crossfade-handle .disabled.mango-button-negative-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-negative-M,
.st-dark-theme .disabled.mango-button-spotlight-M,
.sampler-crossfade-icon .disabled.mango-button-spotlight-M,
.sampler-crossfade-handle-chamfer .disabled.mango-button-spotlight-M,
.sampler-crossfade-handle .disabled.mango-button-spotlight-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-spotlight-M,
.st-dark-theme .disabled.mango-button-special-L,
.sampler-crossfade-icon .disabled.mango-button-special-L,
.sampler-crossfade-handle-chamfer .disabled.mango-button-special-L,
.sampler-crossfade-handle .disabled.mango-button-special-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-special-L,
.st-dark-theme .disabled.mango-icon-button-special-L,
.sampler-crossfade-icon .disabled.mango-icon-button-special-L,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-special-L,
.sampler-crossfade-handle .disabled.mango-icon-button-special-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-special-L,
.st-dark-theme .disabled.mango-button-negative-L,
.sampler-crossfade-icon .disabled.mango-button-negative-L,
.sampler-crossfade-handle-chamfer .disabled.mango-button-negative-L,
.sampler-crossfade-handle .disabled.mango-button-negative-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-negative-L,
.st-dark-theme .disabled.mango-button-spotlight-L,
.sampler-crossfade-icon .disabled.mango-button-spotlight-L,
.sampler-crossfade-handle-chamfer .disabled.mango-button-spotlight-L,
.sampler-crossfade-handle .disabled.mango-button-spotlight-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-spotlight-L,
.st-dark-theme .disabled.mango-button-special-XL,
.sampler-crossfade-icon .disabled.mango-button-special-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-button-special-XL,
.sampler-crossfade-handle .disabled.mango-button-special-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-special-XL,
.st-dark-theme .disabled.mango-icon-button-special-XL,
.sampler-crossfade-icon .disabled.mango-icon-button-special-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-icon-button-special-XL,
.sampler-crossfade-handle .disabled.mango-icon-button-special-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-icon-button-special-XL,
.st-dark-theme .disabled.mango-button-negative-XL,
.sampler-crossfade-icon .disabled.mango-button-negative-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-button-negative-XL,
.sampler-crossfade-handle .disabled.mango-button-negative-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-negative-XL,
.st-dark-theme .disabled.mango-button-spotlight-XL,
.sampler-crossfade-icon .disabled.mango-button-spotlight-XL,
.sampler-crossfade-handle-chamfer .disabled.mango-button-spotlight-XL,
.sampler-crossfade-handle .disabled.mango-button-spotlight-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-spotlight-XL,
.st-dark-theme .disabled.mango-button-weak,
.sampler-crossfade-icon .disabled.mango-button-weak,
.sampler-crossfade-handle-chamfer .disabled.mango-button-weak,
.sampler-crossfade-handle .disabled.mango-button-weak,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-weak,
.st-dark-theme .disabled.mango-button-regular,
.sampler-crossfade-icon .disabled.mango-button-regular,
.sampler-crossfade-handle-chamfer .disabled.mango-button-regular,
.sampler-crossfade-handle .disabled.mango-button-regular,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-regular,
.st-dark-theme .disabled.mango-button-special,
.sampler-crossfade-icon .disabled.mango-button-special,
.sampler-crossfade-handle-chamfer .disabled.mango-button-special,
.sampler-crossfade-handle .disabled.mango-button-special,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled.mango-button-special,
.st-dark-theme .mango-button[disabled],
.sampler-crossfade-icon .mango-button[disabled],
.sampler-crossfade-handle-chamfer .mango-button[disabled],
.sampler-crossfade-handle .mango-button[disabled],
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button[disabled],
.st-dark-theme [disabled].mango-button-spotlight,
.sampler-crossfade-icon [disabled].mango-button-spotlight,
.sampler-crossfade-handle-chamfer [disabled].mango-button-spotlight,
.sampler-crossfade-handle [disabled].mango-button-spotlight,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-spotlight,
.st-dark-theme [disabled].mango-button-weak-XL,
.sampler-crossfade-icon [disabled].mango-button-weak-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-button-weak-XL,
.sampler-crossfade-handle [disabled].mango-button-weak-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-weak-XL,
.st-dark-theme [disabled].mango-icon-button-emphasized-XL,
.sampler-crossfade-icon [disabled].mango-icon-button-emphasized-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-emphasized-XL,
.sampler-crossfade-handle [disabled].mango-icon-button-emphasized-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-emphasized-XL,
.st-dark-theme [disabled].mango-icon-button-weak-XL,
.sampler-crossfade-icon [disabled].mango-icon-button-weak-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-weak-XL,
.sampler-crossfade-handle [disabled].mango-icon-button-weak-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-weak-XL,
.st-dark-theme [disabled].mango-button-weak-L,
.sampler-crossfade-icon [disabled].mango-button-weak-L,
.sampler-crossfade-handle-chamfer [disabled].mango-button-weak-L,
.sampler-crossfade-handle [disabled].mango-button-weak-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-weak-L,
.st-dark-theme [disabled].mango-icon-button-emphasized-L,
.sampler-crossfade-icon [disabled].mango-icon-button-emphasized-L,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-emphasized-L,
.sampler-crossfade-handle [disabled].mango-icon-button-emphasized-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-emphasized-L,
.st-dark-theme [disabled].mango-icon-button-weak-L,
.sampler-crossfade-icon [disabled].mango-icon-button-weak-L,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-weak-L,
.sampler-crossfade-handle [disabled].mango-icon-button-weak-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-weak-L,
.st-dark-theme [disabled].mango-button-weak-M,
.sampler-crossfade-icon [disabled].mango-button-weak-M,
.sampler-crossfade-handle-chamfer [disabled].mango-button-weak-M,
.sampler-crossfade-handle [disabled].mango-button-weak-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-weak-M,
.st-dark-theme [disabled].mango-icon-button-emphasized-M,
.sampler-crossfade-icon [disabled].mango-icon-button-emphasized-M,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-emphasized-M,
.sampler-crossfade-handle [disabled].mango-icon-button-emphasized-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-emphasized-M,
.st-dark-theme [disabled].mango-icon-button-weak-M,
.sampler-crossfade-icon [disabled].mango-icon-button-weak-M,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-weak-M,
.sampler-crossfade-handle [disabled].mango-icon-button-weak-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-weak-M,
.st-dark-theme [disabled].mango-button-weak-S,
.sampler-crossfade-icon [disabled].mango-button-weak-S,
.sampler-crossfade-handle-chamfer [disabled].mango-button-weak-S,
.sampler-crossfade-handle [disabled].mango-button-weak-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-weak-S,
.st-dark-theme [disabled].mango-icon-button-emphasized-S,
.sampler-crossfade-icon [disabled].mango-icon-button-emphasized-S,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-emphasized-S,
.sampler-crossfade-handle [disabled].mango-icon-button-emphasized-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-emphasized-S,
.st-dark-theme [disabled].mango-icon-button-weak-S,
.sampler-crossfade-icon [disabled].mango-icon-button-weak-S,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-weak-S,
.sampler-crossfade-handle [disabled].mango-icon-button-weak-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-weak-S,
.st-dark-theme [disabled].mango-button-emphasised-XL,
.sampler-crossfade-icon [disabled].mango-button-emphasised-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-button-emphasised-XL,
.sampler-crossfade-handle [disabled].mango-button-emphasised-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-emphasised-XL,
.st-dark-theme [disabled].mango-button-emphasised-L,
.sampler-crossfade-icon [disabled].mango-button-emphasised-L,
.sampler-crossfade-handle-chamfer [disabled].mango-button-emphasised-L,
.sampler-crossfade-handle [disabled].mango-button-emphasised-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-emphasised-L,
.st-dark-theme [disabled].mango-button-emphasised-M,
.sampler-crossfade-icon [disabled].mango-button-emphasised-M,
.sampler-crossfade-handle-chamfer [disabled].mango-button-emphasised-M,
.sampler-crossfade-handle [disabled].mango-button-emphasised-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-emphasised-M,
.st-dark-theme [disabled].mango-button-emphasised-S,
.sampler-crossfade-icon [disabled].mango-button-emphasised-S,
.sampler-crossfade-handle-chamfer [disabled].mango-button-emphasised-S,
.sampler-crossfade-handle [disabled].mango-button-emphasised-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-emphasised-S,
.st-dark-theme [disabled].mango-button-regular-XL,
.sampler-crossfade-icon [disabled].mango-button-regular-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-button-regular-XL,
.sampler-crossfade-handle [disabled].mango-button-regular-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-regular-XL,
.st-dark-theme [disabled].mango-icon-button-regular-XL,
.sampler-crossfade-icon [disabled].mango-icon-button-regular-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-regular-XL,
.sampler-crossfade-handle [disabled].mango-icon-button-regular-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-regular-XL,
.st-dark-theme [disabled].mango-button-regular-L,
.sampler-crossfade-icon [disabled].mango-button-regular-L,
.sampler-crossfade-handle-chamfer [disabled].mango-button-regular-L,
.sampler-crossfade-handle [disabled].mango-button-regular-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-regular-L,
.st-dark-theme [disabled].mango-icon-button-regular-L,
.sampler-crossfade-icon [disabled].mango-icon-button-regular-L,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-regular-L,
.sampler-crossfade-handle [disabled].mango-icon-button-regular-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-regular-L,
.st-dark-theme [disabled].mango-button-regular-M,
.sampler-crossfade-icon [disabled].mango-button-regular-M,
.sampler-crossfade-handle-chamfer [disabled].mango-button-regular-M,
.sampler-crossfade-handle [disabled].mango-button-regular-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-regular-M,
.st-dark-theme [disabled].mango-icon-button-regular-M,
.sampler-crossfade-icon [disabled].mango-icon-button-regular-M,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-regular-M,
.sampler-crossfade-handle [disabled].mango-icon-button-regular-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-regular-M,
.st-dark-theme [disabled].mango-button-regular-S,
.sampler-crossfade-icon [disabled].mango-button-regular-S,
.sampler-crossfade-handle-chamfer [disabled].mango-button-regular-S,
.sampler-crossfade-handle [disabled].mango-button-regular-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-regular-S,
.st-dark-theme [disabled].mango-icon-button-regular-S,
.sampler-crossfade-icon [disabled].mango-icon-button-regular-S,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-regular-S,
.sampler-crossfade-handle [disabled].mango-icon-button-regular-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-regular-S,
.st-dark-theme [disabled].mango-button-special-S,
.sampler-crossfade-icon [disabled].mango-button-special-S,
.sampler-crossfade-handle-chamfer [disabled].mango-button-special-S,
.sampler-crossfade-handle [disabled].mango-button-special-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-special-S,
.st-dark-theme [disabled].mango-icon-button-special-S,
.sampler-crossfade-icon [disabled].mango-icon-button-special-S,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-special-S,
.sampler-crossfade-handle [disabled].mango-icon-button-special-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-special-S,
.st-dark-theme [disabled].mango-button-negative-S,
.sampler-crossfade-icon [disabled].mango-button-negative-S,
.sampler-crossfade-handle-chamfer [disabled].mango-button-negative-S,
.sampler-crossfade-handle [disabled].mango-button-negative-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-negative-S,
.st-dark-theme [disabled].mango-button-spotlight-S,
.sampler-crossfade-icon [disabled].mango-button-spotlight-S,
.sampler-crossfade-handle-chamfer [disabled].mango-button-spotlight-S,
.sampler-crossfade-handle [disabled].mango-button-spotlight-S,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-spotlight-S,
.st-dark-theme [disabled].mango-button-special-M,
.sampler-crossfade-icon [disabled].mango-button-special-M,
.sampler-crossfade-handle-chamfer [disabled].mango-button-special-M,
.sampler-crossfade-handle [disabled].mango-button-special-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-special-M,
.st-dark-theme [disabled].mango-icon-button-special-M,
.sampler-crossfade-icon [disabled].mango-icon-button-special-M,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-special-M,
.sampler-crossfade-handle [disabled].mango-icon-button-special-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-special-M,
.st-dark-theme [disabled].mango-button-negative-M,
.sampler-crossfade-icon [disabled].mango-button-negative-M,
.sampler-crossfade-handle-chamfer [disabled].mango-button-negative-M,
.sampler-crossfade-handle [disabled].mango-button-negative-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-negative-M,
.st-dark-theme [disabled].mango-button-spotlight-M,
.sampler-crossfade-icon [disabled].mango-button-spotlight-M,
.sampler-crossfade-handle-chamfer [disabled].mango-button-spotlight-M,
.sampler-crossfade-handle [disabled].mango-button-spotlight-M,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-spotlight-M,
.st-dark-theme [disabled].mango-button-special-L,
.sampler-crossfade-icon [disabled].mango-button-special-L,
.sampler-crossfade-handle-chamfer [disabled].mango-button-special-L,
.sampler-crossfade-handle [disabled].mango-button-special-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-special-L,
.st-dark-theme [disabled].mango-icon-button-special-L,
.sampler-crossfade-icon [disabled].mango-icon-button-special-L,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-special-L,
.sampler-crossfade-handle [disabled].mango-icon-button-special-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-special-L,
.st-dark-theme [disabled].mango-button-negative-L,
.sampler-crossfade-icon [disabled].mango-button-negative-L,
.sampler-crossfade-handle-chamfer [disabled].mango-button-negative-L,
.sampler-crossfade-handle [disabled].mango-button-negative-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-negative-L,
.st-dark-theme [disabled].mango-button-spotlight-L,
.sampler-crossfade-icon [disabled].mango-button-spotlight-L,
.sampler-crossfade-handle-chamfer [disabled].mango-button-spotlight-L,
.sampler-crossfade-handle [disabled].mango-button-spotlight-L,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-spotlight-L,
.st-dark-theme [disabled].mango-button-special-XL,
.sampler-crossfade-icon [disabled].mango-button-special-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-button-special-XL,
.sampler-crossfade-handle [disabled].mango-button-special-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-special-XL,
.st-dark-theme [disabled].mango-icon-button-special-XL,
.sampler-crossfade-icon [disabled].mango-icon-button-special-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-icon-button-special-XL,
.sampler-crossfade-handle [disabled].mango-icon-button-special-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-icon-button-special-XL,
.st-dark-theme [disabled].mango-button-negative-XL,
.sampler-crossfade-icon [disabled].mango-button-negative-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-button-negative-XL,
.sampler-crossfade-handle [disabled].mango-button-negative-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-negative-XL,
.st-dark-theme [disabled].mango-button-spotlight-XL,
.sampler-crossfade-icon [disabled].mango-button-spotlight-XL,
.sampler-crossfade-handle-chamfer [disabled].mango-button-spotlight-XL,
.sampler-crossfade-handle [disabled].mango-button-spotlight-XL,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-spotlight-XL,
.st-dark-theme [disabled].mango-button-weak,
.sampler-crossfade-icon [disabled].mango-button-weak,
.sampler-crossfade-handle-chamfer [disabled].mango-button-weak,
.sampler-crossfade-handle [disabled].mango-button-weak,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-weak,
.st-dark-theme [disabled].mango-button-regular,
.sampler-crossfade-icon [disabled].mango-button-regular,
.sampler-crossfade-handle-chamfer [disabled].mango-button-regular,
.sampler-crossfade-handle [disabled].mango-button-regular,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-regular,
.st-dark-theme [disabled].mango-button-special,
.sampler-crossfade-icon [disabled].mango-button-special,
.sampler-crossfade-handle-chamfer [disabled].mango-button-special,
.sampler-crossfade-handle [disabled].mango-button-special,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols [disabled].mango-button-special {
  --background-base: #262529; /* The default background color of the base set. */
  --background-highlight: #2c2b30; /* A background color that indicates the hover state of a component. */
  --background-press: #000000; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #2d2c31; /* The default background color for elevated elements in the base set. */
  --background-elevated-highlight: #333237; /* For hover states of elevated elements */
  --background-elevated-press: #000000; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.08); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
  --text-base: #e6e6e6; /* The default text and icon color of the base set. */
  --text-subdued: #aeacb4; /* For text and icons that are less prominent. */
  --text-primary: #b096ec; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --text-spotlight: #ff811b; /* A text and icon color associated with subscriptions and purchasing. */
  --text-negative: #fa7aac; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --text-positive: #00bd5f; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --essential-base: #e6e6e6; /* The default essential color of the base set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #85828f; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #9b7ae7; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --essential-spotlight: #ff780a; /* An essential color associated with with subscriptions and purchasing. */
  --essential-negative: #f72d7c; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --essential-positive: #00984d; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --decorative-base: #e6e6e6; /* The default decorative color of the base set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #3c3a40; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-secondary-base-set, .st-dark-theme .rtc-beta-onboarding-tips, .st-dark-theme .basicdialog, .st-dark-theme .fxtoggle, .st-dark-theme .rounded-fxtoggle-wrapper, .sampler-crossfade-icon .st-secondary-base-set, .sampler-crossfade-icon .rtc-beta-onboarding-tips, .sampler-crossfade-icon .basicdialog, .sampler-crossfade-icon .fxtoggle, .sampler-crossfade-icon .rounded-fxtoggle-wrapper, .sampler-crossfade-handle-chamfer .st-secondary-base-set, .sampler-crossfade-handle-chamfer .rtc-beta-onboarding-tips, .sampler-crossfade-handle-chamfer .basicdialog, .sampler-crossfade-handle-chamfer .fxtoggle, .sampler-crossfade-handle-chamfer .rounded-fxtoggle-wrapper, .sampler-crossfade-handle .st-secondary-base-set, .sampler-crossfade-handle .rtc-beta-onboarding-tips, .sampler-crossfade-handle .basicdialog, .sampler-crossfade-handle .fxtoggle, .sampler-crossfade-handle .rounded-fxtoggle-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-secondary-base-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rtc-beta-onboarding-tips, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .basicdialog, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .fxtoggle, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rounded-fxtoggle-wrapper, .st-dark-theme .miniknob, .sampler-crossfade-icon .miniknob, .sampler-crossfade-handle-chamfer .miniknob, .sampler-crossfade-handle .miniknob, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .miniknob,
.st-dark-theme .smallknob,
.sampler-crossfade-icon .smallknob,
.sampler-crossfade-handle-chamfer .smallknob,
.sampler-crossfade-handle .smallknob,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .smallknob,
.st-dark-theme .mediumknob,
.sampler-crossfade-icon .mediumknob,
.sampler-crossfade-handle-chamfer .mediumknob,
.sampler-crossfade-handle .mediumknob,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mediumknob,
.st-dark-theme .bigknob,
.sampler-crossfade-icon .bigknob,
.sampler-crossfade-handle-chamfer .bigknob,
.sampler-crossfade-handle .bigknob,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .bigknob {
  --background-base: #1e1d20; /* The default background color of the secondaryBase set. */
  --background-highlight: #252427; /* A background color that indicates the hover state of a component. */
  --background-press: #000000; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #262529; /* The default background color for elevated elements in the secondaryBase set. */
  --background-elevated-highlight: #2c2b2f; /* For hover states of elevated elements */
  --background-elevated-press: #000000; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.08); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
  --text-base: #e6e6e6; /* The default text and icon color of the secondaryBase set. */
  --text-subdued: #a6a3ac; /* For text and icons that are less prominent. */
  --text-primary: #a98cea; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --text-spotlight: #ff780a; /* A text and icon color associated with subscriptions and purchasing. */
  --text-negative: #f96aa2; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --text-positive: #00b35a; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --essential-base: #e6e6e6; /* The default essential color of the secondaryBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #7f7b87; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #9b7ae7; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --essential-spotlight: #ff780a; /* An essential color associated with with subscriptions and purchasing. */
  --essential-negative: #f40966; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
  --essential-positive: #009049; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
  --decorative-base: #e6e6e6; /* The default decorative color of the secondaryBase set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #343238; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-primary-set, .st-dark-theme .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .st-dark-theme .button-cta, .st-dark-theme .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-dark-theme .list-icon, .st-dark-theme .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-dark-theme .list-icon, .st-dark-theme .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .st-dark-theme .circled, .st-dark-theme .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .st-dark-theme input[type=checkbox],
.st-dark-theme .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .st-dark-theme input[type=checkbox], .st-dark-theme .add-loop-dialog .inner .header, .add-loop-dialog .inner .st-dark-theme .header,
.st-dark-theme .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .st-dark-theme .header, .st-dark-theme .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .st-dark-theme .tooltip, .st-dark-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .st-dark-theme .project-template.project-template-type-template.project-template-kind-music, .st-dark-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .st-dark-theme .project-template-icon.musicstudio, .st-dark-theme body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .st-dark-theme .title, .st-dark-theme .new-dialog-purple .title, .new-dialog-purple .st-dark-theme .title, .st-dark-theme .new-dialog .closer, .new-dialog .st-dark-theme .closer, .st-dark-theme .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .st-dark-theme button.selected-pattern, .st-dark-theme .key-selector-menu button[aria-checked=true], .key-selector-menu .st-dark-theme button[aria-checked=true], .st-dark-theme .threshold-control .threshold-thumb, .threshold-control .st-dark-theme .threshold-thumb, .st-dark-theme .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .st-dark-theme .vocal-clarity-visualization, .st-dark-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .st-dark-theme .sampler-create-instrument-button.button-search, .sampler-crossfade-icon .st-primary-set, .sampler-crossfade-icon .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .sampler-crossfade-icon .button-cta, .sampler-crossfade-icon .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .sampler-crossfade-icon .list-icon, .sampler-crossfade-icon .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .sampler-crossfade-icon .list-icon, .sampler-crossfade-icon .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .sampler-crossfade-icon .circled, .sampler-crossfade-icon .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .sampler-crossfade-icon input[type=checkbox],
.sampler-crossfade-icon .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .sampler-crossfade-icon input[type=checkbox], .sampler-crossfade-icon .add-loop-dialog .inner .header, .add-loop-dialog .inner .sampler-crossfade-icon .header,
.sampler-crossfade-icon .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .sampler-crossfade-icon .header, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-icon .tooltip, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .sampler-crossfade-icon .project-template.project-template-type-template.project-template-kind-music, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-icon .project-template-icon.musicstudio, .sampler-crossfade-icon body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .sampler-crossfade-icon .title, .sampler-crossfade-icon .new-dialog-purple .title, .new-dialog-purple .sampler-crossfade-icon .title, .sampler-crossfade-icon .new-dialog .closer, .new-dialog .sampler-crossfade-icon .closer, .sampler-crossfade-icon .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .sampler-crossfade-icon button.selected-pattern, .sampler-crossfade-icon .key-selector-menu button[aria-checked=true], .key-selector-menu .sampler-crossfade-icon button[aria-checked=true], .sampler-crossfade-icon .threshold-control .threshold-thumb, .threshold-control .sampler-crossfade-icon .threshold-thumb, .sampler-crossfade-icon .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .sampler-crossfade-icon .vocal-clarity-visualization, .sampler-crossfade-icon .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .sampler-crossfade-icon .sampler-create-instrument-button.button-search, .sampler-crossfade-handle-chamfer .st-primary-set, .sampler-crossfade-handle-chamfer .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .sampler-crossfade-handle-chamfer .button-cta, .sampler-crossfade-handle-chamfer .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .sampler-crossfade-handle-chamfer .list-icon, .sampler-crossfade-handle-chamfer .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .sampler-crossfade-handle-chamfer .list-icon, .sampler-crossfade-handle-chamfer .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .sampler-crossfade-handle-chamfer .circled, .sampler-crossfade-handle-chamfer .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .sampler-crossfade-handle-chamfer input[type=checkbox],
.sampler-crossfade-handle-chamfer .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .sampler-crossfade-handle-chamfer input[type=checkbox], .sampler-crossfade-handle-chamfer .add-loop-dialog .inner .header, .add-loop-dialog .inner .sampler-crossfade-handle-chamfer .header,
.sampler-crossfade-handle-chamfer .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .sampler-crossfade-handle-chamfer .header, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle-chamfer .tooltip, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .sampler-crossfade-handle-chamfer .project-template.project-template-type-template.project-template-kind-music, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle-chamfer .project-template-icon.musicstudio, .sampler-crossfade-handle-chamfer body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .sampler-crossfade-handle-chamfer .title, .sampler-crossfade-handle-chamfer .new-dialog-purple .title, .new-dialog-purple .sampler-crossfade-handle-chamfer .title, .sampler-crossfade-handle-chamfer .new-dialog .closer, .new-dialog .sampler-crossfade-handle-chamfer .closer, .sampler-crossfade-handle-chamfer .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .sampler-crossfade-handle-chamfer button.selected-pattern, .sampler-crossfade-handle-chamfer .key-selector-menu button[aria-checked=true], .key-selector-menu .sampler-crossfade-handle-chamfer button[aria-checked=true], .sampler-crossfade-handle-chamfer .threshold-control .threshold-thumb, .threshold-control .sampler-crossfade-handle-chamfer .threshold-thumb, .sampler-crossfade-handle-chamfer .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .sampler-crossfade-handle-chamfer .vocal-clarity-visualization, .sampler-crossfade-handle-chamfer .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .sampler-crossfade-handle-chamfer .sampler-create-instrument-button.button-search, .sampler-crossfade-handle .st-primary-set, .sampler-crossfade-handle .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .sampler-crossfade-handle .button-cta, .sampler-crossfade-handle .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .sampler-crossfade-handle .list-icon, .sampler-crossfade-handle .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .sampler-crossfade-handle .list-icon, .sampler-crossfade-handle .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .sampler-crossfade-handle .circled, .sampler-crossfade-handle .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .sampler-crossfade-handle input[type=checkbox],
.sampler-crossfade-handle .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .sampler-crossfade-handle input[type=checkbox], .sampler-crossfade-handle .add-loop-dialog .inner .header, .add-loop-dialog .inner .sampler-crossfade-handle .header,
.sampler-crossfade-handle .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .sampler-crossfade-handle .header, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle .tooltip, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .sampler-crossfade-handle .project-template.project-template-type-template.project-template-kind-music, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle .project-template-icon.musicstudio, .sampler-crossfade-handle body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .sampler-crossfade-handle .title, .sampler-crossfade-handle .new-dialog-purple .title, .new-dialog-purple .sampler-crossfade-handle .title, .sampler-crossfade-handle .new-dialog .closer, .new-dialog .sampler-crossfade-handle .closer, .sampler-crossfade-handle .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .sampler-crossfade-handle button.selected-pattern, .sampler-crossfade-handle .key-selector-menu button[aria-checked=true], .key-selector-menu .sampler-crossfade-handle button[aria-checked=true], .sampler-crossfade-handle .threshold-control .threshold-thumb, .threshold-control .sampler-crossfade-handle .threshold-thumb, .sampler-crossfade-handle .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .sampler-crossfade-handle .vocal-clarity-visualization, .sampler-crossfade-handle .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .sampler-crossfade-handle .sampler-create-instrument-button.button-search, .st-dark-theme .loop-tab-search-type-selector .option .st-radio, .sampler-crossfade-icon .loop-tab-search-type-selector .option .st-radio, .sampler-crossfade-handle-chamfer .loop-tab-search-type-selector .option .st-radio, .sampler-crossfade-handle .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .st-dark-theme .st-radio, .loop-tab-search-type-selector .option .sampler-crossfade-icon .st-radio, .loop-tab-search-type-selector .option .sampler-crossfade-handle-chamfer .st-radio, .loop-tab-search-type-selector .option .sampler-crossfade-handle .st-radio, .st-dark-theme .chatbubble-bubble.right, .sampler-crossfade-icon .chatbubble-bubble.right, .sampler-crossfade-handle-chamfer .chatbubble-bubble.right, .sampler-crossfade-handle .chatbubble-bubble.right, .st-dark-theme .st-beta-tag, .sampler-crossfade-icon .st-beta-tag, .sampler-crossfade-handle-chamfer .st-beta-tag, .sampler-crossfade-handle .st-beta-tag, .st-dark-theme .notification-area .notification, .sampler-crossfade-icon .notification-area .notification, .sampler-crossfade-handle-chamfer .notification-area .notification, .sampler-crossfade-handle .notification-area .notification, .notification-area .st-dark-theme .notification, .notification-area .sampler-crossfade-icon .notification, .notification-area .sampler-crossfade-handle-chamfer .notification, .notification-area .sampler-crossfade-handle .notification, .st-dark-theme .tempo-tapper, .sampler-crossfade-icon .tempo-tapper, .sampler-crossfade-handle-chamfer .tempo-tapper, .sampler-crossfade-handle .tempo-tapper, .st-dark-theme .st-anchored-tool-tip, .sampler-crossfade-icon .st-anchored-tool-tip, .sampler-crossfade-handle-chamfer .st-anchored-tool-tip, .sampler-crossfade-handle .st-anchored-tool-tip, .st-dark-theme .sync-area, .sampler-crossfade-icon .sync-area, .sampler-crossfade-handle-chamfer .sync-area, .sampler-crossfade-handle .sync-area, .st-dark-theme .tippopup, .sampler-crossfade-icon .tippopup, .sampler-crossfade-handle-chamfer .tippopup, .sampler-crossfade-handle .tippopup, .st-dark-theme .effect-picker__search-tag.active, .sampler-crossfade-icon .effect-picker__search-tag.active, .sampler-crossfade-handle-chamfer .effect-picker__search-tag.active, .sampler-crossfade-handle .effect-picker__search-tag.active, .st-dark-theme .assistant .MessageBubble--right, .sampler-crossfade-icon .assistant .MessageBubble--right, .sampler-crossfade-handle-chamfer .assistant .MessageBubble--right, .sampler-crossfade-handle .assistant .MessageBubble--right, .assistant .st-dark-theme .MessageBubble--right, .assistant .sampler-crossfade-icon .MessageBubble--right, .assistant .sampler-crossfade-handle-chamfer .MessageBubble--right, .assistant .sampler-crossfade-handle .MessageBubble--right, .st-dark-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .sampler-crossfade-icon .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .sampler-crossfade-handle-chamfer .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .sampler-crossfade-handle .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-dark-theme .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-icon .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle-chamfer .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle .tab, .st-dark-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .sampler-crossfade-icon .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .sampler-crossfade-handle-chamfer .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .sampler-crossfade-handle .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-dark-theme .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-icon .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle-chamfer .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .sampler-crossfade-handle .tab, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-primary-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .button-cta, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .list-icon, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .list-icon, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .circled, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols input[type=checkbox],
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .edit-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols input[type=checkbox], .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .add-loop-dialog .inner .header, .add-loop-dialog .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .header,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .edit-loop-dialog .inner .header,
.edit-loop-dialog .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .header, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tooltip, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .project-template.project-template-type-template.project-template-kind-music, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .project-template-icon.musicstudio, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .title, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .new-dialog-purple .title, .new-dialog-purple .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .title, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .new-dialog .closer, .new-dialog .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .closer, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols button.selected-pattern, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .key-selector-menu button[aria-checked=true], .key-selector-menu .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols button[aria-checked=true], .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .threshold-control .threshold-thumb, .threshold-control .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .threshold-thumb, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocal-clarity-visualization, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler-create-instrument-button.button-search, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-radio, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .chatbubble-bubble.right, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-beta-tag, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .notification-area .notification, .notification-area .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .notification, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tempo-tapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-anchored-tool-tip, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sync-area, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tippopup, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effect-picker__search-tag.active, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .assistant .MessageBubble--right, .assistant .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .MessageBubble--right, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab, .st-dark-theme .instrument-loading-progress, .sampler-crossfade-icon .instrument-loading-progress, .sampler-crossfade-handle-chamfer .instrument-loading-progress, .sampler-crossfade-handle .instrument-loading-progress, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .instrument-loading-progress, .st-dark-theme .transport-controls__button.selected, .sampler-crossfade-icon .transport-controls__button.selected, .sampler-crossfade-handle-chamfer .transport-controls__button.selected, .sampler-crossfade-handle .transport-controls__button.selected, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .transport-controls__button.selected, .st-dark-theme .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .sampler-crossfade-icon .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .sampler-crossfade-handle-chamfer .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .sampler-crossfade-handle .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .st-dark-theme .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .sampler-crossfade-icon .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .sampler-crossfade-handle-chamfer .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .sampler-crossfade-handle .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tracklistheader__localOverrideButtonArea:before, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .tracklistheader__localOverride--enabled .quickcontrols .tracklistheader__localOverrideButtonArea:before, .st-dark-theme .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .sampler-crossfade-icon .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .sampler-crossfade-handle-chamfer .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .sampler-crossfade-handle .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .st-dark-theme .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .sampler-crossfade-icon .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .sampler-crossfade-handle-chamfer .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .sampler-crossfade-handle .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .local-overlay.local-mute-solo:before, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .controls-row-local-override .quickcontrols .local-overlay.local-mute-solo:before, .st-dark-theme .notificationmessage, .sampler-crossfade-icon .notificationmessage, .sampler-crossfade-handle-chamfer .notificationmessage, .sampler-crossfade-handle .notificationmessage, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .notificationmessage, .st-dark-theme .effects-editor-card__movement-controls, .sampler-crossfade-icon .effects-editor-card__movement-controls, .sampler-crossfade-handle-chamfer .effects-editor-card__movement-controls, .sampler-crossfade-handle .effects-editor-card__movement-controls, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effects-editor-card__movement-controls, .st-dark-theme .st-tooltip2-callout, .sampler-crossfade-icon .st-tooltip2-callout, .sampler-crossfade-handle-chamfer .st-tooltip2-callout, .sampler-crossfade-handle .st-tooltip2-callout, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-tooltip2-callout, .st-dark-theme .st-toggle-button-wrapper.base.on .st-toggle-button, .sampler-crossfade-icon .st-toggle-button-wrapper.base.on .st-toggle-button, .sampler-crossfade-handle-chamfer .st-toggle-button-wrapper.base.on .st-toggle-button, .sampler-crossfade-handle .st-toggle-button-wrapper.base.on .st-toggle-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-toggle-button-wrapper.base.on .st-toggle-button, .st-toggle-button-wrapper.base.on .st-dark-theme .st-toggle-button, .st-toggle-button-wrapper.base.on .sampler-crossfade-icon .st-toggle-button, .st-toggle-button-wrapper.base.on .sampler-crossfade-handle-chamfer .st-toggle-button, .st-toggle-button-wrapper.base.on .sampler-crossfade-handle .st-toggle-button, .st-toggle-button-wrapper.base.on .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-toggle-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .st-toggle-button-wrapper.base.on .quickcontrols .st-toggle-button, .st-dark-theme .mango-button-special-S, .sampler-crossfade-icon .mango-button-special-S, .sampler-crossfade-handle-chamfer .mango-button-special-S, .sampler-crossfade-handle .mango-button-special-S, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-special-S, .st-dark-theme .mango-icon-button-special-S, .sampler-crossfade-icon .mango-icon-button-special-S, .sampler-crossfade-handle-chamfer .mango-icon-button-special-S, .sampler-crossfade-handle .mango-icon-button-special-S, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-icon-button-special-S, .st-dark-theme .mango-button-negative-S, .sampler-crossfade-icon .mango-button-negative-S, .sampler-crossfade-handle-chamfer .mango-button-negative-S, .sampler-crossfade-handle .mango-button-negative-S, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-S, .st-dark-theme .mango-button-spotlight-S, .sampler-crossfade-icon .mango-button-spotlight-S, .sampler-crossfade-handle-chamfer .mango-button-spotlight-S, .sampler-crossfade-handle .mango-button-spotlight-S, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-S, .st-dark-theme .mango-button-special-M, .sampler-crossfade-icon .mango-button-special-M, .sampler-crossfade-handle-chamfer .mango-button-special-M, .sampler-crossfade-handle .mango-button-special-M, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-special-M, .st-dark-theme .mango-icon-button-special-M, .sampler-crossfade-icon .mango-icon-button-special-M, .sampler-crossfade-handle-chamfer .mango-icon-button-special-M, .sampler-crossfade-handle .mango-icon-button-special-M, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-icon-button-special-M, .st-dark-theme .mango-button-negative-M, .sampler-crossfade-icon .mango-button-negative-M, .sampler-crossfade-handle-chamfer .mango-button-negative-M, .sampler-crossfade-handle .mango-button-negative-M, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-M, .st-dark-theme .mango-button-spotlight-M, .sampler-crossfade-icon .mango-button-spotlight-M, .sampler-crossfade-handle-chamfer .mango-button-spotlight-M, .sampler-crossfade-handle .mango-button-spotlight-M, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-M, .st-dark-theme .mango-button-special-L, .sampler-crossfade-icon .mango-button-special-L, .sampler-crossfade-handle-chamfer .mango-button-special-L, .sampler-crossfade-handle .mango-button-special-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-special-L, .st-dark-theme .mango-icon-button-special-L, .sampler-crossfade-icon .mango-icon-button-special-L, .sampler-crossfade-handle-chamfer .mango-icon-button-special-L, .sampler-crossfade-handle .mango-icon-button-special-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-icon-button-special-L, .st-dark-theme .mango-button-negative-L, .sampler-crossfade-icon .mango-button-negative-L, .sampler-crossfade-handle-chamfer .mango-button-negative-L, .sampler-crossfade-handle .mango-button-negative-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-L, .st-dark-theme .mango-button-spotlight-L, .sampler-crossfade-icon .mango-button-spotlight-L, .sampler-crossfade-handle-chamfer .mango-button-spotlight-L, .sampler-crossfade-handle .mango-button-spotlight-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-L, .st-dark-theme .mango-button-special-XL, .sampler-crossfade-icon .mango-button-special-XL, .sampler-crossfade-handle-chamfer .mango-button-special-XL, .sampler-crossfade-handle .mango-button-special-XL, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-special-XL, .st-dark-theme .mango-icon-button-special-XL, .sampler-crossfade-icon .mango-icon-button-special-XL, .sampler-crossfade-handle-chamfer .mango-icon-button-special-XL, .sampler-crossfade-handle .mango-icon-button-special-XL, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-icon-button-special-XL, .st-dark-theme .mango-button-negative-XL, .sampler-crossfade-icon .mango-button-negative-XL, .sampler-crossfade-handle-chamfer .mango-button-negative-XL, .sampler-crossfade-handle .mango-button-negative-XL, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-XL, .st-dark-theme .mango-button-spotlight-XL, .sampler-crossfade-icon .mango-button-spotlight-XL, .sampler-crossfade-handle-chamfer .mango-button-spotlight-XL, .sampler-crossfade-handle .mango-button-spotlight-XL, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-XL {
  --background-base: #9b7ae7; /* The default background color of the primary set. */
  --background-highlight: #a486e9; /* A background color that indicates the hover state of a component. */
  --background-press: #926ee5; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #9b7ae7; /* fallback */
  --background-elevated-highlight: #9b7ae7; /* fallback */
  --background-elevated-press: #9b7ae7; /* fallback */
  --background-tinted-base: #9b7ae7; /* fallback */
  --background-tinted-highlight: #9b7ae7; /* fallback */
  --background-tinted-press: #9b7ae7; /* fallback */
  --text-base: #000000; /* The default text and icon color of the primary set. */
  --text-subdued: #000000; /* fallback */
  --text-primary: #000000; /* fallback */
  --text-negative: #000000; /* fallback */
  --text-spotlight: #000000; /* fallback */
  --text-positive: #000000; /* fallback */
  --essential-base: #000000; /* The default essential color of the primary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #000000; /* fallback */
  --essential-primary: #000000; /* fallback */
  --essential-negative: #000000; /* fallback */
  --essential-spotlight: #000000; /* fallback */
  --essential-positive: #000000; /* fallback */
  --decorative-base: #000000; /* The default decorative color of the primary set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #8a64e3; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-spotlight-set, .sampler-crossfade-icon .st-spotlight-set, .sampler-crossfade-handle-chamfer .st-spotlight-set, .sampler-crossfade-handle .st-spotlight-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-spotlight-set, .st-dark-theme .cyclemarker.selected.spotlight, .sampler-crossfade-icon .cyclemarker.selected.spotlight, .sampler-crossfade-handle-chamfer .cyclemarker.selected.spotlight, .sampler-crossfade-handle .cyclemarker.selected.spotlight, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .cyclemarker.selected.spotlight, .st-dark-theme .pianoroll .piano-roll-cycle-marker, .sampler-crossfade-icon .pianoroll .piano-roll-cycle-marker, .sampler-crossfade-handle-chamfer .pianoroll .piano-roll-cycle-marker, .sampler-crossfade-handle .pianoroll .piano-roll-cycle-marker, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .pianoroll .piano-roll-cycle-marker, .pianoroll .st-dark-theme .piano-roll-cycle-marker, .pianoroll .sampler-crossfade-icon .piano-roll-cycle-marker, .pianoroll .sampler-crossfade-handle-chamfer .piano-roll-cycle-marker, .pianoroll .sampler-crossfade-handle .piano-roll-cycle-marker, .pianoroll .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .piano-roll-cycle-marker, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .pianoroll .quickcontrols .piano-roll-cycle-marker, .st-dark-theme .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .sampler-crossfade-icon .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .sampler-crossfade-handle-chamfer .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .sampler-crossfade-handle .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .st-dark-theme .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .sampler-crossfade-icon .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .sampler-crossfade-handle-chamfer .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .sampler-crossfade-handle .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .fatfingerbutton.cycletoggle > button.selected, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .middleheader .compositionheader .gridcontrols .quickcontrols .fatfingerbutton.cycletoggle > button.selected, .st-dark-theme .middleheader .compositionheader .cycleendguide.spotlight, .sampler-crossfade-icon .middleheader .compositionheader .cycleendguide.spotlight, .sampler-crossfade-handle-chamfer .middleheader .compositionheader .cycleendguide.spotlight, .sampler-crossfade-handle .middleheader .compositionheader .cycleendguide.spotlight, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .middleheader .compositionheader .cycleendguide.spotlight, .middleheader .compositionheader .st-dark-theme .cycleendguide.spotlight, .middleheader .compositionheader .sampler-crossfade-icon .cycleendguide.spotlight, .middleheader .compositionheader .sampler-crossfade-handle-chamfer .cycleendguide.spotlight, .middleheader .compositionheader .sampler-crossfade-handle .cycleendguide.spotlight, .middleheader .compositionheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .cycleendguide.spotlight, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .middleheader .compositionheader .quickcontrols .cycleendguide.spotlight, .st-dark-theme .middleheader .compositionheader .cyclestartguide.spotlight, .sampler-crossfade-icon .middleheader .compositionheader .cyclestartguide.spotlight, .sampler-crossfade-handle-chamfer .middleheader .compositionheader .cyclestartguide.spotlight, .sampler-crossfade-handle .middleheader .compositionheader .cyclestartguide.spotlight, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .middleheader .compositionheader .cyclestartguide.spotlight, .middleheader .compositionheader .st-dark-theme .cyclestartguide.spotlight, .middleheader .compositionheader .sampler-crossfade-icon .cyclestartguide.spotlight, .middleheader .compositionheader .sampler-crossfade-handle-chamfer .cyclestartguide.spotlight, .middleheader .compositionheader .sampler-crossfade-handle .cyclestartguide.spotlight, .middleheader .compositionheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .cyclestartguide.spotlight, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .middleheader .compositionheader .quickcontrols .cyclestartguide.spotlight, .st-dark-theme .mango-button-spotlight-XL, .sampler-crossfade-icon .mango-button-spotlight-XL, .sampler-crossfade-handle-chamfer .mango-button-spotlight-XL, .sampler-crossfade-handle .mango-button-spotlight-XL, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-XL, .st-dark-theme .mango-button-spotlight-L, .sampler-crossfade-icon .mango-button-spotlight-L, .sampler-crossfade-handle-chamfer .mango-button-spotlight-L, .sampler-crossfade-handle .mango-button-spotlight-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-L, .st-dark-theme .mango-button-spotlight-M, .sampler-crossfade-icon .mango-button-spotlight-M, .sampler-crossfade-handle-chamfer .mango-button-spotlight-M, .sampler-crossfade-handle .mango-button-spotlight-M, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-M, .st-dark-theme .mango-button-spotlight-S, .sampler-crossfade-icon .mango-button-spotlight-S, .sampler-crossfade-handle-chamfer .mango-button-spotlight-S, .sampler-crossfade-handle .mango-button-spotlight-S, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-S, .st-dark-theme .mango-button-spotlight, .sampler-crossfade-icon .mango-button-spotlight, .sampler-crossfade-handle-chamfer .mango-button-spotlight, .sampler-crossfade-handle .mango-button-spotlight, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight {
  --background-base: #ff780a; /* The default background color of the spotlight set. */
  --background-highlight: #ff8b2d; /* A background color that indicates the hover state of a component. */
  --background-press: #f36d00; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #ff780a; /* fallback */
  --background-elevated-highlight: #ff780a; /* fallback */
  --background-elevated-press: #ff780a; /* fallback */
  --background-tinted-base: #ff780a; /* fallback */
  --background-tinted-highlight: #ff780a; /* fallback */
  --background-tinted-press: #ff780a; /* fallback */
  --text-base: #000000; /* The default text and icon color of the spotlight set. */
  --text-subdued: #000000; /* fallback */
  --text-primary: #000000; /* fallback */
  --text-negative: #000000; /* fallback */
  --text-spotlight: #000000; /* fallback */
  --text-positive: #000000; /* fallback */
  --essential-base: #000000; /* The default essential color of the spotlight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #000000; /* fallback */
  --essential-primary: #000000; /* fallback */
  --essential-negative: #000000; /* fallback */
  --essential-spotlight: #000000; /* fallback */
  --essential-positive: #000000; /* fallback */
  --decorative-base: #000000; /* The default decorative color of the spotlight set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #e26500; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-negative-set, .st-dark-theme .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .st-dark-theme .failure, .st-dark-theme .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .st-dark-theme .result-description-background, .st-dark-theme .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .st-dark-theme .mango-button-special-L, .st-dark-theme .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .st-dark-theme .mango-button-spotlight-L, .st-dark-theme .discussion-delete-dialog .mango-button-negative-L, .discussion-delete-dialog .st-dark-theme .mango-button-negative-L, .st-dark-theme .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .st-dark-theme .mango-icon-button-special-L, .st-dark-theme .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .st-dark-theme .st-dialog-footer > button:last-child, .st-dark-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .st-dark-theme .project-template.project-template-type-template.project-template-kind-podcast, .st-dark-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .st-dark-theme .status-area-background, .st-dark-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .st-dark-theme .status-icon:not(.ok), .st-dark-theme .st-card__failure, .st-dark-theme .st-card-button__failure, .sampler-crossfade-icon .st-negative-set, .sampler-crossfade-icon .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .sampler-crossfade-icon .failure, .sampler-crossfade-icon .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .sampler-crossfade-icon .result-description-background, .sampler-crossfade-icon .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .sampler-crossfade-icon .mango-button-special-L, .sampler-crossfade-icon .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .sampler-crossfade-icon .mango-button-spotlight-L, .sampler-crossfade-icon .discussion-delete-dialog .mango-button-negative-L, .discussion-delete-dialog .sampler-crossfade-icon .mango-button-negative-L, .sampler-crossfade-icon .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .sampler-crossfade-icon .mango-icon-button-special-L, .sampler-crossfade-icon .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .sampler-crossfade-icon .st-dialog-footer > button:last-child, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .sampler-crossfade-icon .project-template.project-template-type-template.project-template-kind-podcast, .sampler-crossfade-icon .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .sampler-crossfade-icon .status-area-background, .sampler-crossfade-icon .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .sampler-crossfade-icon .status-icon:not(.ok), .sampler-crossfade-icon .st-card__failure, .sampler-crossfade-icon .st-card-button__failure, .sampler-crossfade-handle-chamfer .st-negative-set, .sampler-crossfade-handle-chamfer .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .sampler-crossfade-handle-chamfer .failure, .sampler-crossfade-handle-chamfer .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .sampler-crossfade-handle-chamfer .result-description-background, .sampler-crossfade-handle-chamfer .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .sampler-crossfade-handle-chamfer .mango-button-special-L, .sampler-crossfade-handle-chamfer .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .sampler-crossfade-handle-chamfer .mango-button-spotlight-L, .sampler-crossfade-handle-chamfer .discussion-delete-dialog .mango-button-negative-L, .discussion-delete-dialog .sampler-crossfade-handle-chamfer .mango-button-negative-L, .sampler-crossfade-handle-chamfer .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .sampler-crossfade-handle-chamfer .mango-icon-button-special-L, .sampler-crossfade-handle-chamfer .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .sampler-crossfade-handle-chamfer .st-dialog-footer > button:last-child, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .sampler-crossfade-handle-chamfer .project-template.project-template-type-template.project-template-kind-podcast, .sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .sampler-crossfade-handle-chamfer .status-area-background, .sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .sampler-crossfade-handle-chamfer .status-icon:not(.ok), .sampler-crossfade-handle-chamfer .st-card__failure, .sampler-crossfade-handle-chamfer .st-card-button__failure, .sampler-crossfade-handle .st-negative-set, .sampler-crossfade-handle .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .sampler-crossfade-handle .failure, .sampler-crossfade-handle .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .sampler-crossfade-handle .result-description-background, .sampler-crossfade-handle .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .sampler-crossfade-handle .mango-button-special-L, .sampler-crossfade-handle .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .sampler-crossfade-handle .mango-button-spotlight-L, .sampler-crossfade-handle .discussion-delete-dialog .mango-button-negative-L, .discussion-delete-dialog .sampler-crossfade-handle .mango-button-negative-L, .sampler-crossfade-handle .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .sampler-crossfade-handle .mango-icon-button-special-L, .sampler-crossfade-handle .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .sampler-crossfade-handle .st-dialog-footer > button:last-child, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .sampler-crossfade-handle .project-template.project-template-type-template.project-template-kind-podcast, .sampler-crossfade-handle .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .sampler-crossfade-handle .status-area-background, .sampler-crossfade-handle .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .sampler-crossfade-handle .status-icon:not(.ok), .sampler-crossfade-handle .st-card__failure, .sampler-crossfade-handle .st-card-button__failure, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-negative-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .failure, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .result-description-background, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-special-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-spotlight-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .discussion-delete-dialog .mango-button-negative-L, .discussion-delete-dialog .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-icon-button-special-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-dialog-footer > button:last-child, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .project-template.project-template-type-template.project-template-kind-podcast, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-area-background, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-icon:not(.ok), .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card__failure, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button__failure, .st-dark-theme .transport-controls .rec.selected, .sampler-crossfade-icon .transport-controls .rec.selected, .sampler-crossfade-handle-chamfer .transport-controls .rec.selected, .sampler-crossfade-handle .transport-controls .rec.selected, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .transport-controls .rec.selected, .transport-controls .st-dark-theme .rec.selected, .transport-controls .sampler-crossfade-icon .rec.selected, .transport-controls .sampler-crossfade-handle-chamfer .rec.selected, .transport-controls .sampler-crossfade-handle .rec.selected, .transport-controls .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .rec.selected, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .transport-controls .quickcontrols .rec.selected, .st-dark-theme .vocalsinstrumentgui .stop-button, .sampler-crossfade-icon .vocalsinstrumentgui .stop-button, .sampler-crossfade-handle-chamfer .vocalsinstrumentgui .stop-button, .sampler-crossfade-handle .vocalsinstrumentgui .stop-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocalsinstrumentgui .stop-button, .vocalsinstrumentgui .st-dark-theme .stop-button, .vocalsinstrumentgui .sampler-crossfade-icon .stop-button, .vocalsinstrumentgui .sampler-crossfade-handle-chamfer .stop-button, .vocalsinstrumentgui .sampler-crossfade-handle .stop-button, .vocalsinstrumentgui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stop-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .vocalsinstrumentgui .quickcontrols .stop-button, .st-dark-theme .vocalsinstrumentgui .record-button, .sampler-crossfade-icon .vocalsinstrumentgui .record-button, .sampler-crossfade-handle-chamfer .vocalsinstrumentgui .record-button, .sampler-crossfade-handle .vocalsinstrumentgui .record-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocalsinstrumentgui .record-button, .vocalsinstrumentgui .st-dark-theme .record-button, .vocalsinstrumentgui .sampler-crossfade-icon .record-button, .vocalsinstrumentgui .sampler-crossfade-handle-chamfer .record-button, .vocalsinstrumentgui .sampler-crossfade-handle .record-button, .vocalsinstrumentgui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .record-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .vocalsinstrumentgui .quickcontrols .record-button, .st-dark-theme .mango-button-negative-XL, .sampler-crossfade-icon .mango-button-negative-XL, .sampler-crossfade-handle-chamfer .mango-button-negative-XL, .sampler-crossfade-handle .mango-button-negative-XL, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-XL, .st-dark-theme .mango-button-negative-L, .sampler-crossfade-icon .mango-button-negative-L, .sampler-crossfade-handle-chamfer .mango-button-negative-L, .sampler-crossfade-handle .mango-button-negative-L, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-L, .st-dark-theme .mango-button-negative-M, .sampler-crossfade-icon .mango-button-negative-M, .sampler-crossfade-handle-chamfer .mango-button-negative-M, .sampler-crossfade-handle .mango-button-negative-M, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-M, .st-dark-theme .mango-button-negative-S, .sampler-crossfade-icon .mango-button-negative-S, .sampler-crossfade-handle-chamfer .mango-button-negative-S, .sampler-crossfade-handle .mango-button-negative-S, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mango-button-negative-S {
  --background-base: #b4074b; /* The default background color of the negative set. */
  --background-highlight: #a50645; /* A background color that indicates the hover state of a component. */
  --background-press: #96063f; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #b4074b; /* fallback */
  --background-elevated-highlight: #b4074b; /* fallback */
  --background-elevated-press: #b4074b; /* fallback */
  --background-tinted-base: #b4074b; /* fallback */
  --background-tinted-highlight: #b4074b; /* fallback */
  --background-tinted-press: #b4074b; /* fallback */
  --text-base: #ffffff; /* The default text and icon color of the negative set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the negative set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the negative set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #d60859; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-positive-set, .st-dark-theme .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .st-dark-theme .success, .st-dark-theme .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .st-dark-theme .result-description-background, .st-dark-theme .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .st-dark-theme .new-preset-announcement-text, .st-dark-theme .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .st-dark-theme .new-preset-announcement-badge, .st-dark-theme .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .st-dark-theme .status-area-background, .st-dark-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .st-dark-theme .status-icon.ok, .st-dark-theme .download-card__best-quality, .st-dark-theme .st-card__success, .st-dark-theme .st-card__mini-icon, .st-dark-theme .st-card-button__success, .st-dark-theme .st-card-button__mini-icon, .sampler-crossfade-icon .st-positive-set, .sampler-crossfade-icon .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .sampler-crossfade-icon .success, .sampler-crossfade-icon .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .sampler-crossfade-icon .result-description-background, .sampler-crossfade-icon .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .sampler-crossfade-icon .new-preset-announcement-text, .sampler-crossfade-icon .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .sampler-crossfade-icon .new-preset-announcement-badge, .sampler-crossfade-icon .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .sampler-crossfade-icon .status-area-background, .sampler-crossfade-icon .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .sampler-crossfade-icon .status-icon.ok, .sampler-crossfade-icon .download-card__best-quality, .sampler-crossfade-icon .st-card__success, .sampler-crossfade-icon .st-card__mini-icon, .sampler-crossfade-icon .st-card-button__success, .sampler-crossfade-icon .st-card-button__mini-icon, .sampler-crossfade-handle-chamfer .st-positive-set, .sampler-crossfade-handle-chamfer .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .sampler-crossfade-handle-chamfer .success, .sampler-crossfade-handle-chamfer .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .sampler-crossfade-handle-chamfer .result-description-background, .sampler-crossfade-handle-chamfer .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .sampler-crossfade-handle-chamfer .new-preset-announcement-text, .sampler-crossfade-handle-chamfer .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .sampler-crossfade-handle-chamfer .new-preset-announcement-badge, .sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .sampler-crossfade-handle-chamfer .status-area-background, .sampler-crossfade-handle-chamfer .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .sampler-crossfade-handle-chamfer .status-icon.ok, .sampler-crossfade-handle-chamfer .download-card__best-quality, .sampler-crossfade-handle-chamfer .st-card__success, .sampler-crossfade-handle-chamfer .st-card__mini-icon, .sampler-crossfade-handle-chamfer .st-card-button__success, .sampler-crossfade-handle-chamfer .st-card-button__mini-icon, .sampler-crossfade-handle .st-positive-set, .sampler-crossfade-handle .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .sampler-crossfade-handle .success, .sampler-crossfade-handle .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .sampler-crossfade-handle .result-description-background, .sampler-crossfade-handle .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .sampler-crossfade-handle .new-preset-announcement-text, .sampler-crossfade-handle .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .sampler-crossfade-handle .new-preset-announcement-badge, .sampler-crossfade-handle .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .sampler-crossfade-handle .status-area-background, .sampler-crossfade-handle .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .sampler-crossfade-handle .status-icon.ok, .sampler-crossfade-handle .download-card__best-quality, .sampler-crossfade-handle .st-card__success, .sampler-crossfade-handle .st-card__mini-icon, .sampler-crossfade-handle .st-card-button__success, .sampler-crossfade-handle .st-card-button__mini-icon, .st-dark-theme .search-type-new-tag, .sampler-crossfade-icon .search-type-new-tag, .sampler-crossfade-handle-chamfer .search-type-new-tag, .sampler-crossfade-handle .search-type-new-tag, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-positive-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .success, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .result-description-background, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .new-preset-announcement-text, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .new-preset-announcement-badge, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-area-background, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .status-icon.ok, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .download-card__best-quality, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card__success, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card__mini-icon, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button__success, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button__mini-icon, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .search-type-new-tag, .st-dark-theme .presetselectorpresetitem .new-preset-badge, .sampler-crossfade-icon .presetselectorpresetitem .new-preset-badge, .sampler-crossfade-handle-chamfer .presetselectorpresetitem .new-preset-badge, .sampler-crossfade-handle .presetselectorpresetitem .new-preset-badge, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .presetselectorpresetitem .new-preset-badge, .presetselectorpresetitem .st-dark-theme .new-preset-badge, .presetselectorpresetitem .sampler-crossfade-icon .new-preset-badge, .presetselectorpresetitem .sampler-crossfade-handle-chamfer .new-preset-badge, .presetselectorpresetitem .sampler-crossfade-handle .new-preset-badge, .presetselectorpresetitem .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .new-preset-badge, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .presetselectorpresetitem .quickcontrols .new-preset-badge {
  --background-base: #008744; /* The default background color of the positive set. */
  --background-highlight: #007d3f; /* A background color that indicates the hover state of a component. */
  --background-press: #00743a; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #008744; /* fallback */
  --background-elevated-highlight: #008744; /* fallback */
  --background-elevated-press: #008744; /* fallback */
  --background-tinted-base: #008744; /* fallback */
  --background-tinted-highlight: #008744; /* fallback */
  --background-tinted-press: #008744; /* fallback */
  --text-base: #ffffff; /* The default text and icon color of the positive set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the positive set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the positive set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #009b4e; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-contrasting-base-set, .st-dark-theme .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .st-dark-theme .try-vocal-tuner, .st-dark-theme .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .st-dark-theme .upgrade-icon-wrapper, .st-dark-theme .st-premium-badge, .st-dark-theme .download-card__paywall-icon, .st-dark-theme .st-slider.contrasting-theme, .st-dark-theme .playable-waveform-preview.waveform-inverted-theme, .sampler-crossfade-icon .st-contrasting-base-set, .sampler-crossfade-icon .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .sampler-crossfade-icon .try-vocal-tuner, .sampler-crossfade-icon .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .sampler-crossfade-icon .upgrade-icon-wrapper, .sampler-crossfade-icon .st-premium-badge, .sampler-crossfade-icon .download-card__paywall-icon, .sampler-crossfade-icon .st-slider.contrasting-theme, .sampler-crossfade-icon .playable-waveform-preview.waveform-inverted-theme, .sampler-crossfade-handle-chamfer .st-contrasting-base-set, .sampler-crossfade-handle-chamfer .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .sampler-crossfade-handle-chamfer .try-vocal-tuner, .sampler-crossfade-handle-chamfer .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .sampler-crossfade-handle-chamfer .upgrade-icon-wrapper, .sampler-crossfade-handle-chamfer .st-premium-badge, .sampler-crossfade-handle-chamfer .download-card__paywall-icon, .sampler-crossfade-handle-chamfer .st-slider.contrasting-theme, .sampler-crossfade-handle-chamfer .playable-waveform-preview.waveform-inverted-theme, .sampler-crossfade-handle .st-contrasting-base-set, .sampler-crossfade-handle .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .sampler-crossfade-handle .try-vocal-tuner, .sampler-crossfade-handle .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .sampler-crossfade-handle .upgrade-icon-wrapper, .sampler-crossfade-handle .st-premium-badge, .sampler-crossfade-handle .download-card__paywall-icon, .sampler-crossfade-handle .st-slider.contrasting-theme, .sampler-crossfade-handle .playable-waveform-preview.waveform-inverted-theme, .st-dark-theme .star-rating-survey, .sampler-crossfade-icon .star-rating-survey, .sampler-crossfade-handle-chamfer .star-rating-survey, .sampler-crossfade-handle .star-rating-survey, .st-dark-theme .add-lane-button, .sampler-crossfade-icon .add-lane-button, .sampler-crossfade-handle-chamfer .add-lane-button, .sampler-crossfade-handle .add-lane-button, .st-dark-theme .step-sequencer-cell, .sampler-crossfade-icon .step-sequencer-cell, .sampler-crossfade-handle-chamfer .step-sequencer-cell, .sampler-crossfade-handle .step-sequencer-cell, .st-dark-theme .step-sequencer-view .step-sequencer-editor .bar-markers, .sampler-crossfade-icon .step-sequencer-view .step-sequencer-editor .bar-markers, .sampler-crossfade-handle-chamfer .step-sequencer-view .step-sequencer-editor .bar-markers, .sampler-crossfade-handle .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .st-dark-theme .bar-markers, .step-sequencer-view .step-sequencer-editor .sampler-crossfade-icon .bar-markers, .step-sequencer-view .step-sequencer-editor .sampler-crossfade-handle-chamfer .bar-markers, .step-sequencer-view .step-sequencer-editor .sampler-crossfade-handle .bar-markers, .st-dark-theme .step-sequencer-view .step-sequencer-editor .headers .lane-header, .sampler-crossfade-icon .step-sequencer-view .step-sequencer-editor .headers .lane-header, .sampler-crossfade-handle-chamfer .step-sequencer-view .step-sequencer-editor .headers .lane-header, .sampler-crossfade-handle .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .st-dark-theme .lane-header, .step-sequencer-view .step-sequencer-editor .headers .sampler-crossfade-icon .lane-header, .step-sequencer-view .step-sequencer-editor .headers .sampler-crossfade-handle-chamfer .lane-header, .step-sequencer-view .step-sequencer-editor .headers .sampler-crossfade-handle .lane-header, .st-dark-theme .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .sampler-crossfade-icon .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .sampler-crossfade-handle-chamfer .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .sampler-crossfade-handle .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .st-dark-theme .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .sampler-crossfade-icon .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .sampler-crossfade-handle-chamfer .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .sampler-crossfade-handle .step-sequencer-lanes-scrollable, .st-dark-theme .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .sampler-crossfade-icon .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .sampler-crossfade-handle-chamfer .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .sampler-crossfade-handle .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .st-dark-theme .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .sampler-crossfade-icon .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .sampler-crossfade-handle-chamfer .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .sampler-crossfade-handle .playhead-cell, .st-dark-theme .step-sequencer-view .step-sequencer-editor, .sampler-crossfade-icon .step-sequencer-view .step-sequencer-editor, .sampler-crossfade-handle-chamfer .step-sequencer-view .step-sequencer-editor, .sampler-crossfade-handle .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .st-dark-theme .step-sequencer-editor, .step-sequencer-view .sampler-crossfade-icon .step-sequencer-editor, .step-sequencer-view .sampler-crossfade-handle-chamfer .step-sequencer-editor, .step-sequencer-view .sampler-crossfade-handle .step-sequencer-editor, .st-dark-theme .drum-controller-desktop .elem-l .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-l .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-l .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .st-dark-theme .inner-1, .drum-controller-desktop .elem-l .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-l .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-l .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-l, .sampler-crossfade-icon .drum-controller-desktop .elem-l, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-l, .sampler-crossfade-handle .drum-controller-desktop .elem-l, .drum-controller-desktop .st-dark-theme .elem-l, .drum-controller-desktop .sampler-crossfade-icon .elem-l, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-l, .drum-controller-desktop .sampler-crossfade-handle .elem-l, .st-dark-theme .drum-controller-desktop .elem-k .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-k .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-k .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .st-dark-theme .inner-1, .drum-controller-desktop .elem-k .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-k .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-k .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-k, .sampler-crossfade-icon .drum-controller-desktop .elem-k, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-k, .sampler-crossfade-handle .drum-controller-desktop .elem-k, .drum-controller-desktop .st-dark-theme .elem-k, .drum-controller-desktop .sampler-crossfade-icon .elem-k, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-k, .drum-controller-desktop .sampler-crossfade-handle .elem-k, .st-dark-theme .drum-controller-desktop .elem-j .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-j .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-j .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .st-dark-theme .inner-1, .drum-controller-desktop .elem-j .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-j .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-j .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-j, .sampler-crossfade-icon .drum-controller-desktop .elem-j, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-j, .sampler-crossfade-handle .drum-controller-desktop .elem-j, .drum-controller-desktop .st-dark-theme .elem-j, .drum-controller-desktop .sampler-crossfade-icon .elem-j, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-j, .drum-controller-desktop .sampler-crossfade-handle .elem-j, .st-dark-theme .drum-controller-desktop .elem-i .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-i .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-i .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .st-dark-theme .inner-2, .drum-controller-desktop .elem-i .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-i .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-i .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-i .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-i .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-i .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .st-dark-theme .inner-1, .drum-controller-desktop .elem-i .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-i .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-i .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-i, .sampler-crossfade-icon .drum-controller-desktop .elem-i, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-i, .sampler-crossfade-handle .drum-controller-desktop .elem-i, .drum-controller-desktop .st-dark-theme .elem-i, .drum-controller-desktop .sampler-crossfade-icon .elem-i, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-i, .drum-controller-desktop .sampler-crossfade-handle .elem-i, .st-dark-theme .drum-controller-desktop .elem-h .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-h .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-h .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .st-dark-theme .inner-2, .drum-controller-desktop .elem-h .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-h .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-h .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-h .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-h .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-h .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .st-dark-theme .inner-1, .drum-controller-desktop .elem-h .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-h .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-h .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-h, .sampler-crossfade-icon .drum-controller-desktop .elem-h, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-h, .sampler-crossfade-handle .drum-controller-desktop .elem-h, .drum-controller-desktop .st-dark-theme .elem-h, .drum-controller-desktop .sampler-crossfade-icon .elem-h, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-h, .drum-controller-desktop .sampler-crossfade-handle .elem-h, .st-dark-theme .drum-controller-desktop .elem-g .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-g .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-g .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .st-dark-theme .inner-2, .drum-controller-desktop .elem-g .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-g .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-g .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-g .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-g .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-g .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .st-dark-theme .inner-1, .drum-controller-desktop .elem-g .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-g .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-g .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-g, .sampler-crossfade-icon .drum-controller-desktop .elem-g, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-g, .sampler-crossfade-handle .drum-controller-desktop .elem-g, .drum-controller-desktop .st-dark-theme .elem-g, .drum-controller-desktop .sampler-crossfade-icon .elem-g, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-g, .drum-controller-desktop .sampler-crossfade-handle .elem-g, .st-dark-theme .drum-controller-desktop .elem-f .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-f .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-f .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .st-dark-theme .inner-2, .drum-controller-desktop .elem-f .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-f .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-f .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-f .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-f .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-f .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .st-dark-theme .inner-1, .drum-controller-desktop .elem-f .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-f .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-f .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-f, .sampler-crossfade-icon .drum-controller-desktop .elem-f, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-f, .sampler-crossfade-handle .drum-controller-desktop .elem-f, .drum-controller-desktop .st-dark-theme .elem-f, .drum-controller-desktop .sampler-crossfade-icon .elem-f, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-f, .drum-controller-desktop .sampler-crossfade-handle .elem-f, .st-dark-theme .drum-controller-desktop .elem-e .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-e .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-e .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .st-dark-theme .inner-2, .drum-controller-desktop .elem-e .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-e .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-e .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-e .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-e .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-e .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .st-dark-theme .inner-1, .drum-controller-desktop .elem-e .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-e .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-e .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-e, .sampler-crossfade-icon .drum-controller-desktop .elem-e, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-e, .sampler-crossfade-handle .drum-controller-desktop .elem-e, .drum-controller-desktop .st-dark-theme .elem-e, .drum-controller-desktop .sampler-crossfade-icon .elem-e, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-e, .drum-controller-desktop .sampler-crossfade-handle .elem-e, .st-dark-theme .drum-controller-desktop .elem-d .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-d .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-d .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .st-dark-theme .inner-2, .drum-controller-desktop .elem-d .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-d .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-d .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-d .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-d .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-d .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .st-dark-theme .inner-1, .drum-controller-desktop .elem-d .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-d .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-d .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-d, .sampler-crossfade-icon .drum-controller-desktop .elem-d, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-d, .sampler-crossfade-handle .drum-controller-desktop .elem-d, .drum-controller-desktop .st-dark-theme .elem-d, .drum-controller-desktop .sampler-crossfade-icon .elem-d, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-d, .drum-controller-desktop .sampler-crossfade-handle .elem-d, .st-dark-theme .drum-controller-desktop .elem-c .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-c .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-c .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .st-dark-theme .inner-2, .drum-controller-desktop .elem-c .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-c .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-c .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-c .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-c .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-c .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .st-dark-theme .inner-1, .drum-controller-desktop .elem-c .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-c .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-c .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-c, .sampler-crossfade-icon .drum-controller-desktop .elem-c, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-c, .sampler-crossfade-handle .drum-controller-desktop .elem-c, .drum-controller-desktop .st-dark-theme .elem-c, .drum-controller-desktop .sampler-crossfade-icon .elem-c, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-c, .drum-controller-desktop .sampler-crossfade-handle .elem-c, .st-dark-theme .drum-controller-desktop .elem-b .inner-2, .sampler-crossfade-icon .drum-controller-desktop .elem-b .inner-2, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-b .inner-2, .sampler-crossfade-handle .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .st-dark-theme .inner-2, .drum-controller-desktop .elem-b .sampler-crossfade-icon .inner-2, .drum-controller-desktop .elem-b .sampler-crossfade-handle-chamfer .inner-2, .drum-controller-desktop .elem-b .sampler-crossfade-handle .inner-2, .st-dark-theme .drum-controller-desktop .elem-b .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-b .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-b .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .st-dark-theme .inner-1, .drum-controller-desktop .elem-b .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-b .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-b .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-b, .sampler-crossfade-icon .drum-controller-desktop .elem-b, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-b, .sampler-crossfade-handle .drum-controller-desktop .elem-b, .drum-controller-desktop .st-dark-theme .elem-b, .drum-controller-desktop .sampler-crossfade-icon .elem-b, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-b, .drum-controller-desktop .sampler-crossfade-handle .elem-b, .st-dark-theme .drum-controller-desktop .elem-a .inner-1, .sampler-crossfade-icon .drum-controller-desktop .elem-a .inner-1, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-a .inner-1, .sampler-crossfade-handle .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .st-dark-theme .inner-1, .drum-controller-desktop .elem-a .sampler-crossfade-icon .inner-1, .drum-controller-desktop .elem-a .sampler-crossfade-handle-chamfer .inner-1, .drum-controller-desktop .elem-a .sampler-crossfade-handle .inner-1, .st-dark-theme .drum-controller-desktop .elem-a, .sampler-crossfade-icon .drum-controller-desktop .elem-a, .sampler-crossfade-handle-chamfer .drum-controller-desktop .elem-a, .sampler-crossfade-handle .drum-controller-desktop .elem-a, .drum-controller-desktop .st-dark-theme .elem-a, .drum-controller-desktop .sampler-crossfade-icon .elem-a, .drum-controller-desktop .sampler-crossfade-handle-chamfer .elem-a, .drum-controller-desktop .sampler-crossfade-handle .elem-a, .st-dark-theme .drum-controller-desktop .key, .sampler-crossfade-icon .drum-controller-desktop .key, .sampler-crossfade-handle-chamfer .drum-controller-desktop .key, .sampler-crossfade-handle .drum-controller-desktop .key, .drum-controller-desktop .st-dark-theme .key, .drum-controller-desktop .sampler-crossfade-icon .key, .drum-controller-desktop .sampler-crossfade-handle-chamfer .key, .drum-controller-desktop .sampler-crossfade-handle .key, .st-dark-theme .drum-controller-desktop .hit-overlay, .sampler-crossfade-icon .drum-controller-desktop .hit-overlay, .sampler-crossfade-handle-chamfer .drum-controller-desktop .hit-overlay, .sampler-crossfade-handle .drum-controller-desktop .hit-overlay, .drum-controller-desktop .st-dark-theme .hit-overlay, .drum-controller-desktop .sampler-crossfade-icon .hit-overlay, .drum-controller-desktop .sampler-crossfade-handle-chamfer .hit-overlay, .drum-controller-desktop .sampler-crossfade-handle .hit-overlay, .st-dark-theme .drum-controller-touch, .sampler-crossfade-icon .drum-controller-touch, .sampler-crossfade-handle-chamfer .drum-controller-touch, .sampler-crossfade-handle .drum-controller-touch, .st-dark-theme .dnd-sampler-engine-gui, .sampler-crossfade-icon .dnd-sampler-engine-gui, .sampler-crossfade-handle-chamfer .dnd-sampler-engine-gui, .sampler-crossfade-handle .dnd-sampler-engine-gui, .st-dark-theme .bass808enginegui, .sampler-crossfade-icon .bass808enginegui, .sampler-crossfade-handle-chamfer .bass808enginegui, .sampler-crossfade-handle .bass808enginegui, .st-dark-theme .sampler1enginegui, .sampler-crossfade-icon .sampler1enginegui, .sampler-crossfade-handle-chamfer .sampler1enginegui, .sampler-crossfade-handle .sampler1enginegui, .st-dark-theme .synth78enginegui, .sampler-crossfade-icon .synth78enginegui, .sampler-crossfade-handle-chamfer .synth78enginegui, .sampler-crossfade-handle .synth78enginegui, .st-dark-theme .looptab-banner_close-button, .sampler-crossfade-icon .looptab-banner_close-button, .sampler-crossfade-handle-chamfer .looptab-banner_close-button, .sampler-crossfade-handle .looptab-banner_close-button, .st-dark-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .sampler-crossfade-icon .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .sampler-crossfade-handle-chamfer .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .sampler-crossfade-handle .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .st-dark-theme .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .sampler-crossfade-icon .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .sampler-crossfade-handle-chamfer .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .sampler-crossfade-handle .cta-text, .st-dark-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .sampler-crossfade-icon .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .sampler-crossfade-handle-chamfer .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .sampler-crossfade-handle .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .st-dark-theme .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .sampler-crossfade-icon .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .sampler-crossfade-handle-chamfer .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .sampler-crossfade-handle .loop-awareness-banner-container, .st-dark-theme .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .sampler-crossfade-icon .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .sampler-crossfade-handle-chamfer .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .sampler-crossfade-handle .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .st-dark-theme .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .sampler-crossfade-icon .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .sampler-crossfade-handle-chamfer .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .sampler-crossfade-handle .tagbutton.highlighted, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-contrasting-base-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .try-vocal-tuner, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .upgrade-icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-premium-badge, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .download-card__paywall-icon, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-slider.contrasting-theme, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playable-waveform-preview.waveform-inverted-theme, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .star-rating-survey, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .add-lane-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-cell, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .bar-markers, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .lane-header, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-lanes-scrollable, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playhead-cell, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .step-sequencer-editor, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-l, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-l, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-k, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-k, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-j, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-j, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-i, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-i, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-h, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-h, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-g, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-g, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-f, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-f, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-e, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-e, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-d, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-d, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-c, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-c, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-2, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-b, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-b, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .inner-1, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .elem-a, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .elem-a, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .key, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .key, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-desktop .hit-overlay, .drum-controller-desktop .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .hit-overlay, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .drum-controller-touch, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .dnd-sampler-engine-gui, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .bass808enginegui, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .sampler1enginegui, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth78enginegui, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab-banner_close-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .cta-text, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .loop-awareness-banner-container, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tagbutton.highlighted, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .st-dark-theme .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .sampler-crossfade-icon .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .sampler-crossfade-handle-chamfer .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .sampler-crossfade-handle .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .instrument-logo-bass808, .st-dark-theme .druminstrumentgui .interaction-area, .sampler-crossfade-icon .druminstrumentgui .interaction-area, .sampler-crossfade-handle-chamfer .druminstrumentgui .interaction-area, .sampler-crossfade-handle .druminstrumentgui .interaction-area, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .druminstrumentgui .interaction-area, .druminstrumentgui .st-dark-theme .interaction-area, .druminstrumentgui .sampler-crossfade-icon .interaction-area, .druminstrumentgui .sampler-crossfade-handle-chamfer .interaction-area, .druminstrumentgui .sampler-crossfade-handle .interaction-area, .druminstrumentgui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .interaction-area, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .druminstrumentgui .quickcontrols .interaction-area, .st-dark-theme .effects-editor-carousel__placeholder-card, .sampler-crossfade-icon .effects-editor-carousel__placeholder-card, .sampler-crossfade-handle-chamfer .effects-editor-carousel__placeholder-card, .sampler-crossfade-handle .effects-editor-carousel__placeholder-card, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effects-editor-carousel__placeholder-card, .st-dark-theme .effects-editor-carousel .effects-editor-carousel__scroll-window, .sampler-crossfade-icon .effects-editor-carousel .effects-editor-carousel__scroll-window, .sampler-crossfade-handle-chamfer .effects-editor-carousel .effects-editor-carousel__scroll-window, .sampler-crossfade-handle .effects-editor-carousel .effects-editor-carousel__scroll-window, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effects-editor-carousel .effects-editor-carousel__scroll-window, .effects-editor-carousel .st-dark-theme .effects-editor-carousel__scroll-window, .effects-editor-carousel .sampler-crossfade-icon .effects-editor-carousel__scroll-window, .effects-editor-carousel .sampler-crossfade-handle-chamfer .effects-editor-carousel__scroll-window, .effects-editor-carousel .sampler-crossfade-handle .effects-editor-carousel__scroll-window, .effects-editor-carousel .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effects-editor-carousel__scroll-window, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .effects-editor-carousel .quickcontrols .effects-editor-carousel__scroll-window, .st-dark-theme .effects-editor-carousel, .sampler-crossfade-icon .effects-editor-carousel, .sampler-crossfade-handle-chamfer .effects-editor-carousel, .sampler-crossfade-handle .effects-editor-carousel, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .effects-editor-carousel, .st-dark-theme .vocal-tuner__disabled-overlay, .sampler-crossfade-icon .vocal-tuner__disabled-overlay, .sampler-crossfade-handle-chamfer .vocal-tuner__disabled-overlay, .sampler-crossfade-handle .vocal-tuner__disabled-overlay, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocal-tuner__disabled-overlay, .st-dark-theme .vocal-tools-container, .sampler-crossfade-icon .vocal-tools-container, .sampler-crossfade-handle-chamfer .vocal-tools-container, .sampler-crossfade-handle .vocal-tools-container, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocal-tools-container, .st-dark-theme .vocalsinstrumentgui .interaction-area, .sampler-crossfade-icon .vocalsinstrumentgui .interaction-area, .sampler-crossfade-handle-chamfer .vocalsinstrumentgui .interaction-area, .sampler-crossfade-handle .vocalsinstrumentgui .interaction-area, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocalsinstrumentgui .interaction-area, .vocalsinstrumentgui .st-dark-theme .interaction-area, .vocalsinstrumentgui .sampler-crossfade-icon .interaction-area, .vocalsinstrumentgui .sampler-crossfade-handle-chamfer .interaction-area, .vocalsinstrumentgui .sampler-crossfade-handle .interaction-area, .vocalsinstrumentgui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .interaction-area, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .vocalsinstrumentgui .quickcontrols .interaction-area, .st-dark-theme .stomp .disabled-effect, .sampler-crossfade-icon .stomp .disabled-effect, .sampler-crossfade-handle-chamfer .stomp .disabled-effect, .sampler-crossfade-handle .stomp .disabled-effect, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stomp .disabled-effect, .stomp .st-dark-theme .disabled-effect, .stomp .sampler-crossfade-icon .disabled-effect, .stomp .sampler-crossfade-handle-chamfer .disabled-effect, .stomp .sampler-crossfade-handle .disabled-effect, .stomp .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .disabled-effect, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .stomp .quickcontrols .disabled-effect, .st-dark-theme .stomp .is-paid-effect, .sampler-crossfade-icon .stomp .is-paid-effect, .sampler-crossfade-handle-chamfer .stomp .is-paid-effect, .sampler-crossfade-handle .stomp .is-paid-effect, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stomp .is-paid-effect, .stomp .st-dark-theme .is-paid-effect, .stomp .sampler-crossfade-icon .is-paid-effect, .stomp .sampler-crossfade-handle-chamfer .is-paid-effect, .stomp .sampler-crossfade-handle .is-paid-effect, .stomp .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .is-paid-effect, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .stomp .quickcontrols .is-paid-effect, .st-dark-theme .stomp--disabled-effect .power-on, .sampler-crossfade-icon .stomp--disabled-effect .power-on, .sampler-crossfade-handle-chamfer .stomp--disabled-effect .power-on, .sampler-crossfade-handle .stomp--disabled-effect .power-on, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stomp--disabled-effect .power-on, .stomp--disabled-effect .st-dark-theme .power-on, .stomp--disabled-effect .sampler-crossfade-icon .power-on, .stomp--disabled-effect .sampler-crossfade-handle-chamfer .power-on, .stomp--disabled-effect .sampler-crossfade-handle .power-on, .stomp--disabled-effect .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .power-on, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .stomp--disabled-effect .quickcontrols .power-on, .st-dark-theme .stomp--disabled-effect .closer, .sampler-crossfade-icon .stomp--disabled-effect .closer, .sampler-crossfade-handle-chamfer .stomp--disabled-effect .closer, .sampler-crossfade-handle .stomp--disabled-effect .closer, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stomp--disabled-effect .closer, .stomp--disabled-effect .st-dark-theme .closer, .stomp--disabled-effect .sampler-crossfade-icon .closer, .stomp--disabled-effect .sampler-crossfade-handle-chamfer .closer, .stomp--disabled-effect .sampler-crossfade-handle .closer, .stomp--disabled-effect .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .closer, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .stomp--disabled-effect .quickcontrols .closer, .st-dark-theme .stomp--paywalled .power-on, .sampler-crossfade-icon .stomp--paywalled .power-on, .sampler-crossfade-handle-chamfer .stomp--paywalled .power-on, .sampler-crossfade-handle .stomp--paywalled .power-on, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stomp--paywalled .power-on, .stomp--paywalled .st-dark-theme .power-on, .stomp--paywalled .sampler-crossfade-icon .power-on, .stomp--paywalled .sampler-crossfade-handle-chamfer .power-on, .stomp--paywalled .sampler-crossfade-handle .power-on, .stomp--paywalled .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .power-on, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .stomp--paywalled .quickcontrols .power-on, .st-dark-theme .stomp--paywalled .closer, .sampler-crossfade-icon .stomp--paywalled .closer, .sampler-crossfade-handle-chamfer .stomp--paywalled .closer, .sampler-crossfade-handle .stomp--paywalled .closer, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .stomp--paywalled .closer, .stomp--paywalled .st-dark-theme .closer, .stomp--paywalled .sampler-crossfade-icon .closer, .stomp--paywalled .sampler-crossfade-handle-chamfer .closer, .stomp--paywalled .sampler-crossfade-handle .closer, .stomp--paywalled .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .closer, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .stomp--paywalled .quickcontrols .closer, .st-dark-theme .st-toggle-button-wrapper.contrastingbase, .sampler-crossfade-icon .st-toggle-button-wrapper.contrastingbase, .sampler-crossfade-handle-chamfer .st-toggle-button-wrapper.contrastingbase, .sampler-crossfade-handle .st-toggle-button-wrapper.contrastingbase, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-toggle-button-wrapper.contrastingbase {
  --background-base: #290247; /* The default background color of the contrastingBase set. */
  --background-highlight: #380361; /* A background color that indicates the hover state of a component. */
  --background-press: #130120; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #3e036c; /* The default background color for elevated elements in the contrastingBase set. */
  --background-elevated-highlight: #4b0481; /* For hover states of elevated elements */
  --background-elevated-press: #310255; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.12); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the contrastingBase set. */
  --text-subdued: #c884fc; /* For text and icons that are less prominent. */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the contrastingBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #aa43fa; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the contrastingBase set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #3f036d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-inverted-primary-set, .st-dark-theme .de-esser-gui .meter .mark, .de-esser-gui .meter .st-dark-theme .mark, .st-dark-theme .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .st-dark-theme .preview-waveform, .st-dark-theme .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .st-dark-theme button.st-button.button_circular, .sampler-crossfade-icon .st-inverted-primary-set, .sampler-crossfade-icon .de-esser-gui .meter .mark, .de-esser-gui .meter .sampler-crossfade-icon .mark, .sampler-crossfade-icon .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .sampler-crossfade-icon .preview-waveform, .sampler-crossfade-icon .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .sampler-crossfade-icon button.st-button.button_circular, .sampler-crossfade-handle-chamfer .st-inverted-primary-set, .sampler-crossfade-handle-chamfer .de-esser-gui .meter .mark, .de-esser-gui .meter .sampler-crossfade-handle-chamfer .mark, .sampler-crossfade-handle-chamfer .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .sampler-crossfade-handle-chamfer .preview-waveform, .sampler-crossfade-handle-chamfer .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .sampler-crossfade-handle-chamfer button.st-button.button_circular, .sampler-crossfade-handle .st-inverted-primary-set, .sampler-crossfade-handle .de-esser-gui .meter .mark, .de-esser-gui .meter .sampler-crossfade-handle .mark, .sampler-crossfade-handle .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .sampler-crossfade-handle .preview-waveform, .sampler-crossfade-handle .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .sampler-crossfade-handle button.st-button.button_circular, .st-dark-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .sampler-crossfade-icon .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .sampler-crossfade-handle-chamfer .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .sampler-crossfade-handle .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-dark-theme .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .sampler-crossfade-icon .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .sampler-crossfade-handle-chamfer .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .sampler-crossfade-handle .playing, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-inverted-primary-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .de-esser-gui .meter .mark, .de-esser-gui .meter .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mark, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .preview-waveform, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols button.st-button.button_circular, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .playing, .st-dark-theme .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .sampler-crossfade-icon .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .sampler-crossfade-handle-chamfer .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .sampler-crossfade-handle .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .st-dark-theme .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .sampler-crossfade-icon .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .sampler-crossfade-handle-chamfer .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .sampler-crossfade-handle .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-toggle-button, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .st-toggle-button-wrapper.contrastingbase.on .quickcontrols .st-toggle-button {
  --background-base: #ffffff; /* The default background color of the invertedPrimary set. */
  --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */
  --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #ffffff; /* fallback */
  --background-elevated-highlight: #ffffff; /* fallback */
  --background-elevated-press: #ffffff; /* fallback */
  --background-tinted-base: #ffffff; /* fallback */
  --background-tinted-highlight: #ffffff; /* fallback */
  --background-tinted-press: #ffffff; /* fallback */
  --text-base: #430877; /* The default text and icon color of the invertedPrimary set. */
  --text-subdued: #9024f0; /* For text and icons that are less prominent. */
  --text-primary: #430877; /* fallback */
  --text-negative: #430877; /* fallback */
  --text-spotlight: #430877; /* fallback */
  --text-positive: #430877; /* fallback */
  --essential-base: #430877; /* The default essential color of the invertedPrimary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #b267f5; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #430877; /* fallback */
  --essential-negative: #430877; /* fallback */
  --essential-spotlight: #430877; /* fallback */
  --essential-positive: #430877; /* fallback */
  --decorative-base: #430877; /* The default decorative color of the invertedPrimary set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-inverted-set, .sampler-crossfade-icon .st-inverted-set, .sampler-crossfade-handle-chamfer .st-inverted-set, .sampler-crossfade-handle .st-inverted-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-inverted-set {
  --background-base: #ffffff; /* The default background color of the inverted set. */
  --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */
  --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #ffffff; /* The default background color for elevated elements in the inverted set. */
  --background-elevated-highlight: #f1f1f1; /* For hover states of elevated elements */
  --background-elevated-press: #e3e3e3; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(0, 0, 0, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(0, 0, 0, 0.1); /* For hover states of tinted elements */
  --background-tinted-press: rgba(0, 0, 0, 0.13); /* For pressed states of tinted elements */
  --text-base: #2d2d2d; /* The default text and icon color of the inverted set. */
  --text-subdued: #606060; /* For text and icons that are less prominent. */
  --text-primary: #2d2d2d; /* fallback */
  --text-negative: #2d2d2d; /* fallback */
  --text-spotlight: #2d2d2d; /* fallback */
  --text-positive: #2d2d2d; /* fallback */
  --essential-base: #2d2d2d; /* The default essential color of the inverted set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #838383; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #2d2d2d; /* fallback */
  --essential-negative: #2d2d2d; /* fallback */
  --essential-spotlight: #2d2d2d; /* fallback */
  --essential-positive: #2d2d2d; /* fallback */
  --decorative-base: #2d2d2d; /* The default decorative color of the inverted set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-simply-red-set, .sampler-crossfade-icon .st-simply-red-set, .sampler-crossfade-handle-chamfer .st-simply-red-set, .sampler-crossfade-handle .st-simply-red-set, .st-dark-theme .automationeditors.col0 svg, .sampler-crossfade-icon .automationeditors.col0 svg, .sampler-crossfade-handle-chamfer .automationeditors.col0 svg, .sampler-crossfade-handle .automationeditors.col0 svg, .automationeditors.col0 .st-dark-theme svg, .automationeditors.col0 .sampler-crossfade-icon svg, .automationeditors.col0 .sampler-crossfade-handle-chamfer svg, .automationeditors.col0 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col0 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col0 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col0 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col0 .automationcontrolpoint,
.automationeditors.col0 .st-dark-theme .automationcontrolpoint,
.automationeditors.col0 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col0 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col0 .sampler-crossfade-handle .automationcontrolpoint, .st-dark-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .sampler-crossfade-icon .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .sampler-crossfade-handle-chamfer .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .sampler-crossfade-handle .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .st-dark-theme .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-icon .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle-chamfer .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle .synth-led-on, .st-dark-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .sampler-crossfade-icon .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .sampler-crossfade-handle-chamfer .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .sampler-crossfade-handle .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .st-dark-theme .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-icon .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle-chamfer .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .sampler-crossfade-handle .synth-led, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-simply-red-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col0 svg, .automationeditors.col0 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col0 .automationcontrolpoint,
.automationeditors.col0 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth-led-on, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .synth-led, .st-dark-theme .trackheader .trackgroup.drums, .sampler-crossfade-icon .trackheader .trackgroup.drums, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.drums, .sampler-crossfade-handle .trackheader .trackgroup.drums, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.drums, .trackheader .st-dark-theme .trackgroup.drums, .trackheader .sampler-crossfade-icon .trackgroup.drums, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.drums, .trackheader .sampler-crossfade-handle .trackgroup.drums, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.drums, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.drums, .st-dark-theme .region-tools .loophandle.col0, .sampler-crossfade-icon .region-tools .loophandle.col0, .sampler-crossfade-handle-chamfer .region-tools .loophandle.col0, .sampler-crossfade-handle .region-tools .loophandle.col0, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .region-tools .loophandle.col0, .region-tools .st-dark-theme .loophandle.col0, .region-tools .sampler-crossfade-icon .loophandle.col0, .region-tools .sampler-crossfade-handle-chamfer .loophandle.col0, .region-tools .sampler-crossfade-handle .loophandle.col0, .region-tools .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .loophandle.col0, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .region-tools .quickcontrols .loophandle.col0, .st-dark-theme .vocalsinstrumentgui .recording-label, .sampler-crossfade-icon .vocalsinstrumentgui .recording-label, .sampler-crossfade-handle-chamfer .vocalsinstrumentgui .recording-label, .sampler-crossfade-handle .vocalsinstrumentgui .recording-label, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .vocalsinstrumentgui .recording-label, .vocalsinstrumentgui .st-dark-theme .recording-label, .vocalsinstrumentgui .sampler-crossfade-icon .recording-label, .vocalsinstrumentgui .sampler-crossfade-handle-chamfer .recording-label, .vocalsinstrumentgui .sampler-crossfade-handle .recording-label, .vocalsinstrumentgui .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .recording-label, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .vocalsinstrumentgui .quickcontrols .recording-label {
  --background-base: #df2d47; /* The default background color of the simplyRed set. */
  --background-highlight: #da213c; /* A background color that indicates the hover state of a component. */
  --background-press: #8e1627; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #e44d63; /* The default background color for elevated elements in the simplyRed set. */
  --background-elevated-highlight: #e6596d; /* For hover states of elevated elements */
  --background-elevated-press: #ae1a30; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.15); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.21); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.08); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the simplyRed set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the simplyRed set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the simplyRed set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #e44f65; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-maroon-set, .st-dark-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .st-dark-theme .project-template-icon.podcaststudio, .sampler-crossfade-icon .st-maroon-set, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-icon .project-template-icon.podcaststudio, .sampler-crossfade-handle-chamfer .st-maroon-set, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle-chamfer .project-template-icon.podcaststudio, .sampler-crossfade-handle .st-maroon-set, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle .project-template-icon.podcaststudio, .st-dark-theme .with-synth-84-styling .tab-button.selected, .sampler-crossfade-icon .with-synth-84-styling .tab-button.selected, .sampler-crossfade-handle-chamfer .with-synth-84-styling .tab-button.selected, .sampler-crossfade-handle .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .st-dark-theme .tab-button.selected, .with-synth-84-styling .sampler-crossfade-icon .tab-button.selected, .with-synth-84-styling .sampler-crossfade-handle-chamfer .tab-button.selected, .with-synth-84-styling .sampler-crossfade-handle .tab-button.selected, .st-dark-theme .automationeditors.col1 svg, .sampler-crossfade-icon .automationeditors.col1 svg, .sampler-crossfade-handle-chamfer .automationeditors.col1 svg, .sampler-crossfade-handle .automationeditors.col1 svg, .automationeditors.col1 .st-dark-theme svg, .automationeditors.col1 .sampler-crossfade-icon svg, .automationeditors.col1 .sampler-crossfade-handle-chamfer svg, .automationeditors.col1 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col1 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col1 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col1 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col1 .automationcontrolpoint,
.automationeditors.col1 .st-dark-theme .automationcontrolpoint,
.automationeditors.col1 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col1 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col1 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-maroon-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .project-template-icon.podcaststudio, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .tab-button.selected, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col1 svg, .automationeditors.col1 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col1 .automationcontrolpoint,
.automationeditors.col1 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint {
  --background-base: #cd3a89; /* The default background color of the maroon set. */
  --background-highlight: #c73382; /* A background color that indicates the hover state of a component. */
  --background-press: #812155; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #d35398; /* The default background color for elevated elements in the maroon set. */
  --background-elevated-highlight: #d65e9e; /* For hover states of elevated elements */
  --background-elevated-press: #9e2868; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the maroon set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the maroon set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the maroon set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #d55a9c; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-iron-wine-set, .st-dark-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .st-dark-theme .project-template.project-template-type-template.project-template-kind-sketchpad, .st-dark-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .st-dark-theme .project-template-icon.sketchpad, .sampler-crossfade-icon .st-iron-wine-set, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .sampler-crossfade-icon .project-template.project-template-type-template.project-template-kind-sketchpad, .sampler-crossfade-icon .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-icon .project-template-icon.sketchpad, .sampler-crossfade-handle-chamfer .st-iron-wine-set, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .sampler-crossfade-handle-chamfer .project-template.project-template-type-template.project-template-kind-sketchpad, .sampler-crossfade-handle-chamfer .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle-chamfer .project-template-icon.sketchpad, .sampler-crossfade-handle .st-iron-wine-set, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .sampler-crossfade-handle .project-template.project-template-type-template.project-template-kind-sketchpad, .sampler-crossfade-handle .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .sampler-crossfade-handle .project-template-icon.sketchpad, .st-dark-theme .automationeditors.col2 svg, .sampler-crossfade-icon .automationeditors.col2 svg, .sampler-crossfade-handle-chamfer .automationeditors.col2 svg, .sampler-crossfade-handle .automationeditors.col2 svg, .automationeditors.col2 .st-dark-theme svg, .automationeditors.col2 .sampler-crossfade-icon svg, .automationeditors.col2 .sampler-crossfade-handle-chamfer svg, .automationeditors.col2 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col2 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col2 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col2 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col2 .automationcontrolpoint,
.automationeditors.col2 .st-dark-theme .automationcontrolpoint,
.automationeditors.col2 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col2 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col2 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-iron-wine-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .project-template.project-template-type-template.project-template-kind-sketchpad, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .project-template-icon.sketchpad, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col2 svg, .automationeditors.col2 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col2 .automationcontrolpoint,
.automationeditors.col2 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.recording, .sampler-crossfade-icon .trackheader .trackgroup.recording, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.recording, .sampler-crossfade-handle .trackheader .trackgroup.recording, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.recording, .trackheader .st-dark-theme .trackgroup.recording, .trackheader .sampler-crossfade-icon .trackgroup.recording, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.recording, .trackheader .sampler-crossfade-handle .trackgroup.recording, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.recording, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.recording {
  --background-base: #bc3fc0; /* The default background color of the ironWine set. */
  --background-highlight: #b33cb7; /* A background color that indicates the hover state of a component. */
  --background-press: #742777; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #c457c8; /* The default background color for elevated elements in the ironWine set. */
  --background-elevated-highlight: #c861cb; /* For hover states of elevated elements */
  --background-elevated-press: #8f3092; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the ironWine set. */
  --text-primary: #ffe9e9; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --text-subdued: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the ironWine set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-primary: #ffe9e9; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the ironWine set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #c75dca; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-purple-rain-set, .st-dark-theme .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .st-dark-theme .st-card__icon-wrapper, .st-dark-theme .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .st-dark-theme .st-card-button__icon-wrapper, .sampler-crossfade-icon .st-purple-rain-set, .sampler-crossfade-icon .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .sampler-crossfade-icon .st-card__icon-wrapper, .sampler-crossfade-icon .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .sampler-crossfade-icon .st-card-button__icon-wrapper, .sampler-crossfade-handle-chamfer .st-purple-rain-set, .sampler-crossfade-handle-chamfer .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .sampler-crossfade-handle-chamfer .st-card__icon-wrapper, .sampler-crossfade-handle-chamfer .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .sampler-crossfade-handle-chamfer .st-card-button__icon-wrapper, .sampler-crossfade-handle .st-purple-rain-set, .sampler-crossfade-handle .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .sampler-crossfade-handle .st-card__icon-wrapper, .sampler-crossfade-handle .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .sampler-crossfade-handle .st-card-button__icon-wrapper, .st-dark-theme .automationeditors.col3 svg, .sampler-crossfade-icon .automationeditors.col3 svg, .sampler-crossfade-handle-chamfer .automationeditors.col3 svg, .sampler-crossfade-handle .automationeditors.col3 svg, .automationeditors.col3 .st-dark-theme svg, .automationeditors.col3 .sampler-crossfade-icon svg, .automationeditors.col3 .sampler-crossfade-handle-chamfer svg, .automationeditors.col3 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col3 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col3 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col3 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col3 .automationcontrolpoint,
.automationeditors.col3 .st-dark-theme .automationcontrolpoint,
.automationeditors.col3 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col3 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col3 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-purple-rain-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card__icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button__icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col3 svg, .automationeditors.col3 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col3 .automationcontrolpoint,
.automationeditors.col3 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.vocal, .sampler-crossfade-icon .trackheader .trackgroup.vocal, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.vocal, .sampler-crossfade-handle .trackheader .trackgroup.vocal, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.vocal, .trackheader .st-dark-theme .trackgroup.vocal, .trackheader .sampler-crossfade-icon .trackgroup.vocal, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.vocal, .trackheader .sampler-crossfade-handle .trackgroup.vocal, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.vocal, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.vocal {
  --background-base: #a33bff; /* The default background color of the purpleRain set. */
  --background-highlight: #9d2eff; /* A background color that indicates the hover state of a component. */
  --background-press: #6500bf; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #af55ff; /* The default background color for elevated elements in the purpleRain set. */
  --background-elevated-highlight: #b45fff; /* For hover states of elevated elements */
  --background-elevated-press: #7b00e8; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.07); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the purpleRain set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the purpleRain set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the purpleRain set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #b25bff; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-royal-blue-set, .st-dark-theme .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .st-dark-theme .st-card__icon-wrapper, .st-dark-theme .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .st-dark-theme .st-card-button__icon-wrapper, .sampler-crossfade-icon .st-royal-blue-set, .sampler-crossfade-icon .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .sampler-crossfade-icon .st-card__icon-wrapper, .sampler-crossfade-icon .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .sampler-crossfade-icon .st-card-button__icon-wrapper, .sampler-crossfade-handle-chamfer .st-royal-blue-set, .sampler-crossfade-handle-chamfer .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .sampler-crossfade-handle-chamfer .st-card__icon-wrapper, .sampler-crossfade-handle-chamfer .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .sampler-crossfade-handle-chamfer .st-card-button__icon-wrapper, .sampler-crossfade-handle .st-royal-blue-set, .sampler-crossfade-handle .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .sampler-crossfade-handle .st-card__icon-wrapper, .sampler-crossfade-handle .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .sampler-crossfade-handle .st-card-button__icon-wrapper, .st-dark-theme .automationeditors.col4 svg, .sampler-crossfade-icon .automationeditors.col4 svg, .sampler-crossfade-handle-chamfer .automationeditors.col4 svg, .sampler-crossfade-handle .automationeditors.col4 svg, .automationeditors.col4 .st-dark-theme svg, .automationeditors.col4 .sampler-crossfade-icon svg, .automationeditors.col4 .sampler-crossfade-handle-chamfer svg, .automationeditors.col4 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col4 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col4 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col4 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col4 .automationcontrolpoint,
.automationeditors.col4 .st-dark-theme .automationcontrolpoint,
.automationeditors.col4 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col4 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col4 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-royal-blue-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card__icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button__icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col4 svg, .automationeditors.col4 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col4 .automationcontrolpoint,
.automationeditors.col4 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.lead, .sampler-crossfade-icon .trackheader .trackgroup.lead, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.lead, .sampler-crossfade-handle .trackheader .trackgroup.lead, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.lead, .trackheader .st-dark-theme .trackgroup.lead, .trackheader .sampler-crossfade-icon .trackgroup.lead, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.lead, .trackheader .sampler-crossfade-handle .trackgroup.lead, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.lead, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.lead {
  --background-base: #4567fc; /* The default background color of the royalBlue set. */
  --background-highlight: #3c5ffc; /* A background color that indicates the hover state of a component. */
  --background-press: #032ad5; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #5a78fc; /* The default background color for elevated elements in the royalBlue set. */
  --background-elevated-highlight: #637ffc; /* For hover states of elevated elements */
  --background-elevated-press: #0c38fb; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.11); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.16); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the royalBlue set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the royalBlue set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the royalBlue set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #5f7cfc; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-ocean-eyes-set, .st-dark-theme .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .st-dark-theme .st-card__icon-wrapper, .st-dark-theme .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .st-dark-theme .st-card-button__icon-wrapper, .sampler-crossfade-icon .st-ocean-eyes-set, .sampler-crossfade-icon .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .sampler-crossfade-icon .st-card__icon-wrapper, .sampler-crossfade-icon .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .sampler-crossfade-icon .st-card-button__icon-wrapper, .sampler-crossfade-handle-chamfer .st-ocean-eyes-set, .sampler-crossfade-handle-chamfer .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .sampler-crossfade-handle-chamfer .st-card__icon-wrapper, .sampler-crossfade-handle-chamfer .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .sampler-crossfade-handle-chamfer .st-card-button__icon-wrapper, .sampler-crossfade-handle .st-ocean-eyes-set, .sampler-crossfade-handle .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .sampler-crossfade-handle .st-card__icon-wrapper, .sampler-crossfade-handle .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .sampler-crossfade-handle .st-card-button__icon-wrapper, .st-dark-theme .automationeditors.col5 svg, .sampler-crossfade-icon .automationeditors.col5 svg, .sampler-crossfade-handle-chamfer .automationeditors.col5 svg, .sampler-crossfade-handle .automationeditors.col5 svg, .automationeditors.col5 .st-dark-theme svg, .automationeditors.col5 .sampler-crossfade-icon svg, .automationeditors.col5 .sampler-crossfade-handle-chamfer svg, .automationeditors.col5 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col5 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col5 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col5 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col5 .automationcontrolpoint,
.automationeditors.col5 .st-dark-theme .automationcontrolpoint,
.automationeditors.col5 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col5 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col5 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-ocean-eyes-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card__icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-card-button__icon-wrapper, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col5 svg, .automationeditors.col5 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col5 .automationcontrolpoint,
.automationeditors.col5 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.other, .sampler-crossfade-icon .trackheader .trackgroup.other, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.other, .sampler-crossfade-handle .trackheader .trackgroup.other, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.other, .trackheader .st-dark-theme .trackgroup.other, .trackheader .sampler-crossfade-icon .trackgroup.other, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.other, .trackheader .sampler-crossfade-handle .trackgroup.other, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.other, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.other {
  --background-base: #128193; /* The default background color of the oceanEyes set. */
  --background-highlight: #117b8c; /* A background color that indicates the hover state of a component. */
  --background-press: #0b4f5a; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #148fa3; /* The default background color for elevated elements in the oceanEyes set. */
  --background-elevated-highlight: #1596ab; /* For hover states of elevated elements */
  --background-elevated-press: #0e616f; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.09); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.13); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the oceanEyes set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the oceanEyes set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the oceanEyes set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #1594a9; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-forest-set, .sampler-crossfade-icon .st-forest-set, .sampler-crossfade-handle-chamfer .st-forest-set, .sampler-crossfade-handle .st-forest-set, .st-dark-theme .automationeditors.col6 svg, .sampler-crossfade-icon .automationeditors.col6 svg, .sampler-crossfade-handle-chamfer .automationeditors.col6 svg, .sampler-crossfade-handle .automationeditors.col6 svg, .automationeditors.col6 .st-dark-theme svg, .automationeditors.col6 .sampler-crossfade-icon svg, .automationeditors.col6 .sampler-crossfade-handle-chamfer svg, .automationeditors.col6 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col6 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col6 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col6 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col6 .automationcontrolpoint,
.automationeditors.col6 .st-dark-theme .automationcontrolpoint,
.automationeditors.col6 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col6 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col6 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-forest-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col6 svg, .automationeditors.col6 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col6 .automationcontrolpoint,
.automationeditors.col6 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.bass, .sampler-crossfade-icon .trackheader .trackgroup.bass, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.bass, .sampler-crossfade-handle .trackheader .trackgroup.bass, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.bass, .trackheader .st-dark-theme .trackgroup.bass, .trackheader .sampler-crossfade-icon .trackgroup.bass, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.bass, .trackheader .sampler-crossfade-handle .trackgroup.bass, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.bass, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.bass {
  --background-base: #00856a; /* The default background color of the forest set. */
  --background-highlight: #007f65; /* A background color that indicates the hover state of a component. */
  --background-press: #005241; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #009476; /* The default background color for elevated elements in the forest set. */
  --background-elevated-highlight: #009a7b; /* For hover states of elevated elements */
  --background-elevated-press: #006550; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the forest set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the forest set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the forest set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #00997a; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-green-light-set, .sampler-crossfade-icon .st-green-light-set, .sampler-crossfade-handle-chamfer .st-green-light-set, .sampler-crossfade-handle .st-green-light-set, .st-dark-theme .automationeditors.col7 svg, .sampler-crossfade-icon .automationeditors.col7 svg, .sampler-crossfade-handle-chamfer .automationeditors.col7 svg, .sampler-crossfade-handle .automationeditors.col7 svg, .automationeditors.col7 .st-dark-theme svg, .automationeditors.col7 .sampler-crossfade-icon svg, .automationeditors.col7 .sampler-crossfade-handle-chamfer svg, .automationeditors.col7 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col7 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col7 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col7 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col7 .automationcontrolpoint,
.automationeditors.col7 .st-dark-theme .automationcontrolpoint,
.automationeditors.col7 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col7 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col7 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-green-light-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col7 svg, .automationeditors.col7 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col7 .automationcontrolpoint,
.automationeditors.col7 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint {
  --background-base: #278748; /* The default background color of the greenLight set. */
  --background-highlight: #258145; /* A background color that indicates the hover state of a component. */
  --background-press: #18532c; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #2b9650; /* The default background color for elevated elements in the greenLight set. */
  --background-elevated-highlight: #2d9d54; /* For hover states of elevated elements */
  --background-elevated-press: #1e6636; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.09); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the greenLight set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the greenLight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the greenLight set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #2d9b53; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-gold-frapp-set, .sampler-crossfade-icon .st-gold-frapp-set, .sampler-crossfade-handle-chamfer .st-gold-frapp-set, .sampler-crossfade-handle .st-gold-frapp-set, .st-dark-theme .automationeditors.col8 svg, .sampler-crossfade-icon .automationeditors.col8 svg, .sampler-crossfade-handle-chamfer .automationeditors.col8 svg, .sampler-crossfade-handle .automationeditors.col8 svg, .automationeditors.col8 .st-dark-theme svg, .automationeditors.col8 .sampler-crossfade-icon svg, .automationeditors.col8 .sampler-crossfade-handle-chamfer svg, .automationeditors.col8 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col8 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col8 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col8 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col8 .automationcontrolpoint,
.automationeditors.col8 .st-dark-theme .automationcontrolpoint,
.automationeditors.col8 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col8 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col8 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-gold-frapp-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col8 svg, .automationeditors.col8 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col8 .automationcontrolpoint,
.automationeditors.col8 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.harmonics, .sampler-crossfade-icon .trackheader .trackgroup.harmonics, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.harmonics, .sampler-crossfade-handle .trackheader .trackgroup.harmonics, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.harmonics, .trackheader .st-dark-theme .trackgroup.harmonics, .trackheader .sampler-crossfade-icon .trackgroup.harmonics, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.harmonics, .trackheader .sampler-crossfade-handle .trackgroup.harmonics, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.harmonics, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.harmonics {
  --background-base: #a46a1e; /* The default background color of the goldFrapp set. */
  --background-highlight: #9c651d; /* A background color that indicates the hover state of a component. */
  --background-press: #654112; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #b67621; /* The default background color for elevated elements in the goldFrapp set. */
  --background-elevated-highlight: #be7b23; /* For hover states of elevated elements */
  --background-elevated-press: #7c5017; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.14); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the goldFrapp set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the goldFrapp set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the goldFrapp set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #bc7a22; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

.st-dark-theme .st-orange-soda-set, .sampler-crossfade-icon .st-orange-soda-set, .sampler-crossfade-handle-chamfer .st-orange-soda-set, .sampler-crossfade-handle .st-orange-soda-set, .st-dark-theme .automationeditors.col9 svg, .sampler-crossfade-icon .automationeditors.col9 svg, .sampler-crossfade-handle-chamfer .automationeditors.col9 svg, .sampler-crossfade-handle .automationeditors.col9 svg, .automationeditors.col9 .st-dark-theme svg, .automationeditors.col9 .sampler-crossfade-icon svg, .automationeditors.col9 .sampler-crossfade-handle-chamfer svg, .automationeditors.col9 .sampler-crossfade-handle svg,
.st-dark-theme .automationeditors.col9 .automationcontrolpoint,
.sampler-crossfade-icon .automationeditors.col9 .automationcontrolpoint,
.sampler-crossfade-handle-chamfer .automationeditors.col9 .automationcontrolpoint,
.sampler-crossfade-handle .automationeditors.col9 .automationcontrolpoint,
.automationeditors.col9 .st-dark-theme .automationcontrolpoint,
.automationeditors.col9 .sampler-crossfade-icon .automationcontrolpoint,
.automationeditors.col9 .sampler-crossfade-handle-chamfer .automationcontrolpoint,
.automationeditors.col9 .sampler-crossfade-handle .automationcontrolpoint, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-orange-soda-set, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col9 svg, .automationeditors.col9 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols svg,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationeditors.col9 .automationcontrolpoint,
.automationeditors.col9 .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .automationcontrolpoint, .st-dark-theme .trackheader .trackgroup.fx, .sampler-crossfade-icon .trackheader .trackgroup.fx, .sampler-crossfade-handle-chamfer .trackheader .trackgroup.fx, .sampler-crossfade-handle .trackheader .trackgroup.fx, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackheader .trackgroup.fx, .trackheader .st-dark-theme .trackgroup.fx, .trackheader .sampler-crossfade-icon .trackgroup.fx, .trackheader .sampler-crossfade-handle-chamfer .trackgroup.fx, .trackheader .sampler-crossfade-handle .trackgroup.fx, .trackheader .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .trackgroup.fx, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .trackheader .quickcontrols .trackgroup.fx {
  --background-base: #bf5737; /* The default background color of the orangeSoda set. */
  --background-highlight: #b65334; /* A background color that indicates the hover state of a component. */
  --background-press: #763622; /* A background color that indicates the press state of a component. */
  --background-elevated-base: #cb6749; /* The default background color for elevated elements in the orangeSoda set. */
  --background-elevated-highlight: #cd7053; /* For hover states of elevated elements */
  --background-elevated-press: #91422a; /* For pressed states of elevated elements */
  --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
  --background-tinted-highlight: rgba(255, 255, 255, 0.17); /* For hover states of tinted elements */
  --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
  --text-base: #ffffff; /* The default text and icon color of the orangeSoda set. */
  --text-subdued: #ffffff; /* fallback */
  --text-primary: #ffffff; /* fallback */
  --text-negative: #ffffff; /* fallback */
  --text-spotlight: #ffffff; /* fallback */
  --text-positive: #ffffff; /* fallback */
  --essential-base: #ffffff; /* The default essential color of the orangeSoda set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
  --essential-subdued: #ffffff; /* fallback */
  --essential-primary: #ffffff; /* fallback */
  --essential-negative: #ffffff; /* fallback */
  --essential-spotlight: #ffffff; /* fallback */
  --essential-positive: #ffffff; /* fallback */
  --decorative-base: #ffffff; /* The default decorative color of the orangeSoda set. Used for any graphical elements that are not essential for understanding the interface. */
  --decorative-subdued: #cd6d50; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
}

@media (prefers-color-scheme: dark) {
  .st-auto-theme,
  .st-auto-theme .st-base-set,
  .st-auto-theme .mididialog2 > .st-dialog-body .status-area.ok .status-message,
  .mididialog2 > .st-dialog-body .status-area.ok .st-auto-theme .status-message,
  .st-auto-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message,
  .mididialog2 > .st-dialog-body .status-area:not(.ok) .st-auto-theme .status-message,
  .st-auto-theme .mididialog2 > .st-dialog-body .status-area .status-description,
  .mididialog2 > .st-dialog-body .status-area .st-auto-theme .status-description,
  .st-auto-theme .save-preset-dialog .inner .body,
  .save-preset-dialog .inner .st-auto-theme .body,
  .st-auto-theme .save-preset-dialog .inner .closer,
  .save-preset-dialog .inner .st-auto-theme .closer,
  .st-auto-theme .radio-dialog.new-dialog .inner .closer,
  .radio-dialog.new-dialog .inner .st-auto-theme .closer,
  .st-auto-theme .key-selector-menu button[aria-checked=false],
  .key-selector-menu .st-auto-theme button[aria-checked=false],
  .st-auto-theme .st-curved-slider-container .st-curved-slider .thumb-visual,
  .st-curved-slider-container .st-curved-slider .st-auto-theme .thumb-visual,
  .st-auto-theme .st-curved-slider-container,
  .st-auto-theme .st-slider::-webkit-slider-runnable-track,
  .st-auto-theme .playable-waveform-preview.waveform-base-theme button.st-button.button_circular,
  .playable-waveform-preview.waveform-base-theme .st-auto-theme button.st-button.button_circular,
  .st-auto-theme .playable-waveform-preview.waveform-base-theme,
  .st-auto-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading,
  .sampler-ui-create-instrument-container .sampler-create-instrument-button .st-auto-theme .subheading,
  .st-auto-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging,
  .sampler-ui-create-instrument-container .st-auto-theme .sampler-create-instrument-button.button-search.drag-enabled.dragging,
  .st-auto-theme .sampler-ui-bottom-buttons .sampler-ui-delete,
  .sampler-ui-bottom-buttons .st-auto-theme .sampler-ui-delete,
  .st-auto-theme .tab-button,
  .st-auto-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected,
  .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-auto-theme .selected,
  .st-auto-theme .dnd-sampler-engine-gui .dnd-sampler-options,
  .dnd-sampler-engine-gui .st-auto-theme .dnd-sampler-options,
  .st-auto-theme .bass808enginegui .octaveselector .lblinline,
  .bass808enginegui .octaveselector .st-auto-theme .lblinline,
  .st-auto-theme .bass808enginegui .boxed,
  .bass808enginegui .st-auto-theme .boxed,
  .st-auto-theme .bass808enginegui,
  .st-auto-theme .sampler1enginegui .octaveselector .lblinline,
  .sampler1enginegui .octaveselector .st-auto-theme .lblinline,
  .st-auto-theme .sampler1enginegui .boxed,
  .sampler1enginegui .st-auto-theme .boxed,
  .st-auto-theme .sampler1enginegui,
  .st-auto-theme .synth84enginegui,
  .st-auto-theme .synth78enginegui .boxed,
  .synth78enginegui .st-auto-theme .boxed,
  .st-auto-theme .synth78enginegui,
  .st-auto-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
  .rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab.deemphasised,
  .st-auto-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised,
  .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab.deemphasised,
  .st-auto-theme .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab,
  .rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .st-auto-theme .tab,
  .st-auto-theme .new-ribbon,
  .st-auto-theme .looptab .results .addtrackshortcut .playityourself,
  .looptab .results .addtrackshortcut .st-auto-theme .playityourself,
  .st-auto-theme .looptab .results .addtrackshortcut,
  .looptab .results .st-auto-theme .addtrackshortcut,
  .st-auto-theme .looptab .loop-results-tabs-container .loop-results-tab-selected,
  .looptab .loop-results-tabs-container .st-auto-theme .loop-results-tab-selected,
  .st-auto-theme .looptab .loop-results-tabs-container .loop-results-tab,
  .looptab .loop-results-tabs-container .st-auto-theme .loop-results-tab,
  .st-auto-theme .looptab .loop-results-tabs-container,
  .looptab .st-auto-theme .loop-results-tabs-container,
  .st-auto-theme .keyboardinstrumentgui .row2 .octaveselector .lbl,
  .keyboardinstrumentgui .row2 .octaveselector .st-auto-theme .lbl,
  .st-auto-theme .effects-editor-carousel__container .stomp .name-ribbon,
  .effects-editor-carousel__container .stomp .st-auto-theme .name-ribbon,
  .st-auto-theme .mediumknob,
  .st-auto-theme .miniknob,
  .st-auto-theme .miniled,
  .st-auto-theme .mango-button.disabled,
  .st-auto-theme .disabled.mango-button-spotlight,
  .st-auto-theme .disabled.mango-button-weak-XL,
  .st-auto-theme .disabled.mango-icon-button-emphasized-XL,
  .st-auto-theme .disabled.mango-icon-button-weak-XL,
  .st-auto-theme .disabled.mango-button-weak-L,
  .st-auto-theme .disabled.mango-icon-button-emphasized-L,
  .st-auto-theme .disabled.mango-icon-button-weak-L,
  .st-auto-theme .disabled.mango-button-weak-M,
  .st-auto-theme .disabled.mango-icon-button-emphasized-M,
  .st-auto-theme .disabled.mango-icon-button-weak-M,
  .st-auto-theme .disabled.mango-button-weak-S,
  .st-auto-theme .disabled.mango-icon-button-emphasized-S,
  .st-auto-theme .disabled.mango-icon-button-weak-S,
  .st-auto-theme .disabled.mango-button-emphasised-XL,
  .st-auto-theme .disabled.mango-button-emphasised-L,
  .st-auto-theme .disabled.mango-button-emphasised-M,
  .st-auto-theme .disabled.mango-button-emphasised-S,
  .st-auto-theme .disabled.mango-button-regular-XL,
  .st-auto-theme .disabled.mango-icon-button-regular-XL,
  .st-auto-theme .disabled.mango-button-regular-L,
  .st-auto-theme .disabled.mango-icon-button-regular-L,
  .st-auto-theme .disabled.mango-button-regular-M,
  .st-auto-theme .disabled.mango-icon-button-regular-M,
  .st-auto-theme .disabled.mango-button-regular-S,
  .st-auto-theme .disabled.mango-icon-button-regular-S,
  .st-auto-theme .disabled.mango-button-special-S,
  .st-auto-theme .disabled.mango-icon-button-special-S,
  .st-auto-theme .disabled.mango-button-negative-S,
  .st-auto-theme .disabled.mango-button-spotlight-S,
  .st-auto-theme .disabled.mango-button-special-M,
  .st-auto-theme .disabled.mango-icon-button-special-M,
  .st-auto-theme .disabled.mango-button-negative-M,
  .st-auto-theme .disabled.mango-button-spotlight-M,
  .st-auto-theme .disabled.mango-button-special-L,
  .st-auto-theme .disabled.mango-icon-button-special-L,
  .st-auto-theme .disabled.mango-button-negative-L,
  .st-auto-theme .disabled.mango-button-spotlight-L,
  .st-auto-theme .disabled.mango-button-special-XL,
  .st-auto-theme .disabled.mango-icon-button-special-XL,
  .st-auto-theme .disabled.mango-button-negative-XL,
  .st-auto-theme .disabled.mango-button-spotlight-XL,
  .st-auto-theme .disabled.mango-button-weak,
  .st-auto-theme .disabled.mango-button-regular,
  .st-auto-theme .disabled.mango-button-special,
  .st-auto-theme .mango-button[disabled],
  .st-auto-theme [disabled].mango-button-spotlight,
  .st-auto-theme [disabled].mango-button-weak-XL,
  .st-auto-theme [disabled].mango-icon-button-emphasized-XL,
  .st-auto-theme [disabled].mango-icon-button-weak-XL,
  .st-auto-theme [disabled].mango-button-weak-L,
  .st-auto-theme [disabled].mango-icon-button-emphasized-L,
  .st-auto-theme [disabled].mango-icon-button-weak-L,
  .st-auto-theme [disabled].mango-button-weak-M,
  .st-auto-theme [disabled].mango-icon-button-emphasized-M,
  .st-auto-theme [disabled].mango-icon-button-weak-M,
  .st-auto-theme [disabled].mango-button-weak-S,
  .st-auto-theme [disabled].mango-icon-button-emphasized-S,
  .st-auto-theme [disabled].mango-icon-button-weak-S,
  .st-auto-theme [disabled].mango-button-emphasised-XL,
  .st-auto-theme [disabled].mango-button-emphasised-L,
  .st-auto-theme [disabled].mango-button-emphasised-M,
  .st-auto-theme [disabled].mango-button-emphasised-S,
  .st-auto-theme [disabled].mango-button-regular-XL,
  .st-auto-theme [disabled].mango-icon-button-regular-XL,
  .st-auto-theme [disabled].mango-button-regular-L,
  .st-auto-theme [disabled].mango-icon-button-regular-L,
  .st-auto-theme [disabled].mango-button-regular-M,
  .st-auto-theme [disabled].mango-icon-button-regular-M,
  .st-auto-theme [disabled].mango-button-regular-S,
  .st-auto-theme [disabled].mango-icon-button-regular-S,
  .st-auto-theme [disabled].mango-button-special-S,
  .st-auto-theme [disabled].mango-icon-button-special-S,
  .st-auto-theme [disabled].mango-button-negative-S,
  .st-auto-theme [disabled].mango-button-spotlight-S,
  .st-auto-theme [disabled].mango-button-special-M,
  .st-auto-theme [disabled].mango-icon-button-special-M,
  .st-auto-theme [disabled].mango-button-negative-M,
  .st-auto-theme [disabled].mango-button-spotlight-M,
  .st-auto-theme [disabled].mango-button-special-L,
  .st-auto-theme [disabled].mango-icon-button-special-L,
  .st-auto-theme [disabled].mango-button-negative-L,
  .st-auto-theme [disabled].mango-button-spotlight-L,
  .st-auto-theme [disabled].mango-button-special-XL,
  .st-auto-theme [disabled].mango-icon-button-special-XL,
  .st-auto-theme [disabled].mango-button-negative-XL,
  .st-auto-theme [disabled].mango-button-spotlight-XL,
  .st-auto-theme [disabled].mango-button-weak,
  .st-auto-theme [disabled].mango-button-regular,
  .st-auto-theme [disabled].mango-button-special {
    --background-base: #262529; /* The default background color of the base set. */
    --background-highlight: #2c2b30; /* A background color that indicates the hover state of a component. */
    --background-press: #000000; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #2d2c31; /* The default background color for elevated elements in the base set. */
    --background-elevated-highlight: #333237; /* For hover states of elevated elements */
    --background-elevated-press: #000000; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.08); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
    --text-base: #e6e6e6; /* The default text and icon color of the base set. */
    --text-subdued: #aeacb4; /* For text and icons that are less prominent. */
    --text-primary: #b096ec; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --text-spotlight: #ff811b; /* A text and icon color associated with subscriptions and purchasing. */
    --text-negative: #fa7aac; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --text-positive: #00bd5f; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --essential-base: #e6e6e6; /* The default essential color of the base set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #85828f; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #9b7ae7; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --essential-spotlight: #ff780a; /* An essential color associated with with subscriptions and purchasing. */
    --essential-negative: #f72d7c; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --essential-positive: #00984d; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --decorative-base: #e6e6e6; /* The default decorative color of the base set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #3c3a40; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-secondary-base-set, .st-auto-theme .rtc-beta-onboarding-tips, .st-auto-theme .basicdialog, .st-auto-theme .fxtoggle, .st-auto-theme .rounded-fxtoggle-wrapper, .st-auto-theme .miniknob,
  .st-auto-theme .smallknob,
  .st-auto-theme .mediumknob,
  .st-auto-theme .bigknob {
    --background-base: #1e1d20; /* The default background color of the secondaryBase set. */
    --background-highlight: #252427; /* A background color that indicates the hover state of a component. */
    --background-press: #000000; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #262529; /* The default background color for elevated elements in the secondaryBase set. */
    --background-elevated-highlight: #2c2b2f; /* For hover states of elevated elements */
    --background-elevated-press: #000000; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.08); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
    --text-base: #e6e6e6; /* The default text and icon color of the secondaryBase set. */
    --text-subdued: #a6a3ac; /* For text and icons that are less prominent. */
    --text-primary: #a98cea; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --text-spotlight: #ff780a; /* A text and icon color associated with subscriptions and purchasing. */
    --text-negative: #f96aa2; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --text-positive: #00b35a; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --essential-base: #e6e6e6; /* The default essential color of the secondaryBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #7f7b87; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #9b7ae7; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --essential-spotlight: #ff780a; /* An essential color associated with with subscriptions and purchasing. */
    --essential-negative: #f40966; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */
    --essential-positive: #009049; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */
    --decorative-base: #e6e6e6; /* The default decorative color of the secondaryBase set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #343238; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-primary-set, .st-auto-theme .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta, .horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .st-auto-theme .button-cta, .st-auto-theme .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-auto-theme .list-icon, .st-auto-theme .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon, .vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .st-auto-theme .list-icon, .st-auto-theme .soundsetupwizard .bullets .bullet .circled, .soundsetupwizard .bullets .bullet .st-auto-theme .circled, .st-auto-theme .add-loop-dialog .input-row input[type=checkbox], .add-loop-dialog .input-row .st-auto-theme input[type=checkbox],
  .st-auto-theme .edit-loop-dialog .input-row input[type=checkbox],
  .edit-loop-dialog .input-row .st-auto-theme input[type=checkbox], .st-auto-theme .add-loop-dialog .inner .header, .add-loop-dialog .inner .st-auto-theme .header,
  .st-auto-theme .edit-loop-dialog .inner .header,
  .edit-loop-dialog .inner .st-auto-theme .header, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .tooltip, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .tooltip, .st-auto-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music, .create-from-template-dialog-2 .inner .st-auto-theme .project-template.project-template-type-template.project-template-kind-music, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .project-template-icon.musicstudio, .st-auto-theme body.ff-handheld .new-dialog-large .title, body.ff-handheld .new-dialog-large .st-auto-theme .title, .st-auto-theme .new-dialog-purple .title, .new-dialog-purple .st-auto-theme .title, .st-auto-theme .new-dialog .closer, .new-dialog .st-auto-theme .closer, .st-auto-theme .arpeggiator-transform-controls__pattern-buttons button.selected-pattern, .arpeggiator-transform-controls__pattern-buttons .st-auto-theme button.selected-pattern, .st-auto-theme .key-selector-menu button[aria-checked=true], .key-selector-menu .st-auto-theme button[aria-checked=true], .st-auto-theme .threshold-control .threshold-thumb, .threshold-control .st-auto-theme .threshold-thumb, .st-auto-theme .vocal-clarity-gui .vocal-clarity-visualization, .vocal-clarity-gui .st-auto-theme .vocal-clarity-visualization, .st-auto-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search, .sampler-ui-create-instrument-container .st-auto-theme .sampler-create-instrument-button.button-search, .st-auto-theme .loop-tab-search-type-selector .option .st-radio, .loop-tab-search-type-selector .option .st-auto-theme .st-radio, .st-auto-theme .chatbubble-bubble.right, .st-auto-theme .st-beta-tag, .st-auto-theme .notification-area .notification, .notification-area .st-auto-theme .notification, .st-auto-theme .tempo-tapper, .st-auto-theme .st-anchored-tool-tip, .st-auto-theme .sync-area, .st-auto-theme .tippopup, .st-auto-theme .effect-picker__search-tag.active, .st-auto-theme .assistant .MessageBubble--right, .assistant .st-auto-theme .MessageBubble--right, .st-auto-theme .rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab, .st-auto-theme .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab, .rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .st-auto-theme .tab, .st-auto-theme .instrument-loading-progress, .st-auto-theme .transport-controls__button.selected, .st-auto-theme .tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before, .tracklistheader__localOverride--enabled .st-auto-theme .tracklistheader__localOverrideButtonArea:before, .st-auto-theme .trackheader .controls-row-local-override .local-overlay.local-mute-solo:before, .trackheader .controls-row-local-override .st-auto-theme .local-overlay.local-mute-solo:before, .st-auto-theme .notificationmessage, .st-auto-theme .effects-editor-card__movement-controls, .st-auto-theme .st-tooltip2-callout, .st-auto-theme .st-toggle-button-wrapper.base.on .st-toggle-button, .st-toggle-button-wrapper.base.on .st-auto-theme .st-toggle-button, .st-auto-theme .mango-button-special-S, .st-auto-theme .mango-icon-button-special-S, .st-auto-theme .mango-button-negative-S, .st-auto-theme .mango-button-spotlight-S, .st-auto-theme .mango-button-special-M, .st-auto-theme .mango-icon-button-special-M, .st-auto-theme .mango-button-negative-M, .st-auto-theme .mango-button-spotlight-M, .st-auto-theme .mango-button-special-L, .st-auto-theme .mango-icon-button-special-L, .st-auto-theme .mango-button-negative-L, .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .mango-button-special-XL, .st-auto-theme .mango-icon-button-special-XL, .st-auto-theme .mango-button-negative-XL, .st-auto-theme .mango-button-spotlight-XL {
    --background-base: #9b7ae7; /* The default background color of the primary set. */
    --background-highlight: #a486e9; /* A background color that indicates the hover state of a component. */
    --background-press: #926ee5; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #9b7ae7; /* fallback */
    --background-elevated-highlight: #9b7ae7; /* fallback */
    --background-elevated-press: #9b7ae7; /* fallback */
    --background-tinted-base: #9b7ae7; /* fallback */
    --background-tinted-highlight: #9b7ae7; /* fallback */
    --background-tinted-press: #9b7ae7; /* fallback */
    --text-base: #000000; /* The default text and icon color of the primary set. */
    --text-subdued: #000000; /* fallback */
    --text-primary: #000000; /* fallback */
    --text-negative: #000000; /* fallback */
    --text-spotlight: #000000; /* fallback */
    --text-positive: #000000; /* fallback */
    --essential-base: #000000; /* The default essential color of the primary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #000000; /* fallback */
    --essential-primary: #000000; /* fallback */
    --essential-negative: #000000; /* fallback */
    --essential-spotlight: #000000; /* fallback */
    --essential-positive: #000000; /* fallback */
    --decorative-base: #000000; /* The default decorative color of the primary set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #8a64e3; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-spotlight-set, .st-auto-theme .cyclemarker.selected.spotlight, .st-auto-theme .pianoroll .piano-roll-cycle-marker, .pianoroll .st-auto-theme .piano-roll-cycle-marker, .st-auto-theme .middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected, .middleheader .compositionheader .gridcontrols .st-auto-theme .fatfingerbutton.cycletoggle > button.selected, .st-auto-theme .middleheader .compositionheader .cycleendguide.spotlight, .middleheader .compositionheader .st-auto-theme .cycleendguide.spotlight, .st-auto-theme .middleheader .compositionheader .cyclestartguide.spotlight, .middleheader .compositionheader .st-auto-theme .cyclestartguide.spotlight, .st-auto-theme .mango-button-spotlight-XL, .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .mango-button-spotlight-M, .st-auto-theme .mango-button-spotlight-S, .st-auto-theme .mango-button-spotlight {
    --background-base: #ff780a; /* The default background color of the spotlight set. */
    --background-highlight: #ff8b2d; /* A background color that indicates the hover state of a component. */
    --background-press: #f36d00; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #ff780a; /* fallback */
    --background-elevated-highlight: #ff780a; /* fallback */
    --background-elevated-press: #ff780a; /* fallback */
    --background-tinted-base: #ff780a; /* fallback */
    --background-tinted-highlight: #ff780a; /* fallback */
    --background-tinted-press: #ff780a; /* fallback */
    --text-base: #000000; /* The default text and icon color of the spotlight set. */
    --text-subdued: #000000; /* fallback */
    --text-primary: #000000; /* fallback */
    --text-negative: #000000; /* fallback */
    --text-spotlight: #000000; /* fallback */
    --text-positive: #000000; /* fallback */
    --essential-base: #000000; /* The default essential color of the spotlight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #000000; /* fallback */
    --essential-primary: #000000; /* fallback */
    --essential-negative: #000000; /* fallback */
    --essential-spotlight: #000000; /* fallback */
    --essential-positive: #000000; /* fallback */
    --decorative-base: #000000; /* The default decorative color of the spotlight set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #e26500; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-negative-set, .st-auto-theme .latency-calibration-diagram .calibration-status-icon-container .failure, .latency-calibration-diagram .calibration-status-icon-container .st-auto-theme .failure, .st-auto-theme .latency-calibration-dialog .content .result-description-container .result-description-background, .latency-calibration-dialog .content .result-description-container .st-auto-theme .result-description-background, .st-auto-theme .discussion-delete-dialog .mango-button-special-L, .discussion-delete-dialog .st-auto-theme .mango-button-special-L, .st-auto-theme .discussion-delete-dialog .mango-button-spotlight-L, .discussion-delete-dialog .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .discussion-delete-dialog .mango-icon-button-special-L, .discussion-delete-dialog .st-auto-theme .mango-icon-button-special-L, .st-auto-theme .remove-collaborator-confirmation-container .st-dialog-footer > button:last-child, .remove-collaborator-confirmation-container .st-auto-theme .st-dialog-footer > button:last-child, .st-auto-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast, .create-from-template-dialog-2 .inner .st-auto-theme .project-template.project-template-type-template.project-template-kind-podcast, .st-auto-theme .mididialog2 > .st-dialog-body .status-area:not(.ok) .status-area-background, .mididialog2 > .st-dialog-body .status-area:not(.ok) .st-auto-theme .status-area-background, .st-auto-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon:not(.ok), .mididialog2 > .st-dialog-body .device-selection-area .st-auto-theme .status-icon:not(.ok), .st-auto-theme .st-card__failure, .st-auto-theme .st-card-button__failure, .st-auto-theme .transport-controls .rec.selected, .transport-controls .st-auto-theme .rec.selected, .st-auto-theme .vocalsinstrumentgui .stop-button, .vocalsinstrumentgui .st-auto-theme .stop-button, .st-auto-theme .vocalsinstrumentgui .record-button, .vocalsinstrumentgui .st-auto-theme .record-button, .st-auto-theme .mango-button-negative-XL, .st-auto-theme .mango-button-negative-L, .st-auto-theme .mango-button-negative-M, .st-auto-theme .mango-button-negative-S {
    --background-base: #b4074b; /* The default background color of the negative set. */
    --background-highlight: #a50645; /* A background color that indicates the hover state of a component. */
    --background-press: #96063f; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #b4074b; /* fallback */
    --background-elevated-highlight: #b4074b; /* fallback */
    --background-elevated-press: #b4074b; /* fallback */
    --background-tinted-base: #b4074b; /* fallback */
    --background-tinted-highlight: #b4074b; /* fallback */
    --background-tinted-press: #b4074b; /* fallback */
    --text-base: #ffffff; /* The default text and icon color of the negative set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the negative set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the negative set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #d60859; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-positive-set, .st-auto-theme .latency-calibration-diagram .calibration-status-icon-container .success, .latency-calibration-diagram .calibration-status-icon-container .st-auto-theme .success, .st-auto-theme .latency-calibration-dialog .content .result-description-container.success .result-description-background, .latency-calibration-dialog .content .result-description-container.success .st-auto-theme .result-description-background, .st-auto-theme .presetselectordialog .dialogcontent .new-preset-announcement-text, .presetselectordialog .dialogcontent .st-auto-theme .new-preset-announcement-text, .st-auto-theme .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectordialog .dialogcontent .st-auto-theme .new-preset-announcement-badge, .st-auto-theme .mididialog2 > .st-dialog-body .status-area.ok .status-area-background, .mididialog2 > .st-dialog-body .status-area.ok .st-auto-theme .status-area-background, .st-auto-theme .mididialog2 > .st-dialog-body .device-selection-area .status-icon.ok, .mididialog2 > .st-dialog-body .device-selection-area .st-auto-theme .status-icon.ok, .st-auto-theme .download-card__best-quality, .st-auto-theme .st-card__success, .st-auto-theme .st-card__mini-icon, .st-auto-theme .st-card-button__success, .st-auto-theme .st-card-button__mini-icon, .st-auto-theme .search-type-new-tag, .st-auto-theme .presetselectorpresetitem .new-preset-badge, .presetselectorpresetitem .st-auto-theme .new-preset-badge {
    --background-base: #008744; /* The default background color of the positive set. */
    --background-highlight: #007d3f; /* A background color that indicates the hover state of a component. */
    --background-press: #00743a; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #008744; /* fallback */
    --background-elevated-highlight: #008744; /* fallback */
    --background-elevated-press: #008744; /* fallback */
    --background-tinted-base: #008744; /* fallback */
    --background-tinted-highlight: #008744; /* fallback */
    --background-tinted-press: #008744; /* fallback */
    --text-base: #ffffff; /* The default text and icon color of the positive set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the positive set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the positive set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #009b4e; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-contrasting-base-set, .st-auto-theme .realtime-vocal-tuner-upsell-dialog .try-vocal-tuner, .realtime-vocal-tuner-upsell-dialog .st-auto-theme .try-vocal-tuner, .st-auto-theme .remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper, .remove-paid-effect-warning-dialog .upgrade-icon-container .st-auto-theme .upgrade-icon-wrapper, .st-auto-theme .st-premium-badge, .st-auto-theme .download-card__paywall-icon, .st-auto-theme .st-slider.contrasting-theme, .st-auto-theme .playable-waveform-preview.waveform-inverted-theme, .st-auto-theme .star-rating-survey, .st-auto-theme .add-lane-button, .st-auto-theme .step-sequencer-cell, .st-auto-theme .step-sequencer-view .step-sequencer-editor .bar-markers, .step-sequencer-view .step-sequencer-editor .st-auto-theme .bar-markers, .st-auto-theme .step-sequencer-view .step-sequencer-editor .headers .lane-header, .step-sequencer-view .step-sequencer-editor .headers .st-auto-theme .lane-header, .st-auto-theme .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable, .step-sequencer-view .step-sequencer-editor .st-auto-theme .step-sequencer-lanes-scrollable, .st-auto-theme .step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell, .step-sequencer-view .step-sequencer-editor .playhead-lane .st-auto-theme .playhead-cell, .st-auto-theme .step-sequencer-view .step-sequencer-editor, .step-sequencer-view .st-auto-theme .step-sequencer-editor, .st-auto-theme .drum-controller-desktop .elem-l .inner-1, .drum-controller-desktop .elem-l .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-l, .drum-controller-desktop .st-auto-theme .elem-l, .st-auto-theme .drum-controller-desktop .elem-k .inner-1, .drum-controller-desktop .elem-k .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-k, .drum-controller-desktop .st-auto-theme .elem-k, .st-auto-theme .drum-controller-desktop .elem-j .inner-1, .drum-controller-desktop .elem-j .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-j, .drum-controller-desktop .st-auto-theme .elem-j, .st-auto-theme .drum-controller-desktop .elem-i .inner-2, .drum-controller-desktop .elem-i .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-i .inner-1, .drum-controller-desktop .elem-i .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-i, .drum-controller-desktop .st-auto-theme .elem-i, .st-auto-theme .drum-controller-desktop .elem-h .inner-2, .drum-controller-desktop .elem-h .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-h .inner-1, .drum-controller-desktop .elem-h .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-h, .drum-controller-desktop .st-auto-theme .elem-h, .st-auto-theme .drum-controller-desktop .elem-g .inner-2, .drum-controller-desktop .elem-g .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-g .inner-1, .drum-controller-desktop .elem-g .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-g, .drum-controller-desktop .st-auto-theme .elem-g, .st-auto-theme .drum-controller-desktop .elem-f .inner-2, .drum-controller-desktop .elem-f .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-f .inner-1, .drum-controller-desktop .elem-f .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-f, .drum-controller-desktop .st-auto-theme .elem-f, .st-auto-theme .drum-controller-desktop .elem-e .inner-2, .drum-controller-desktop .elem-e .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-e .inner-1, .drum-controller-desktop .elem-e .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-e, .drum-controller-desktop .st-auto-theme .elem-e, .st-auto-theme .drum-controller-desktop .elem-d .inner-2, .drum-controller-desktop .elem-d .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-d .inner-1, .drum-controller-desktop .elem-d .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-d, .drum-controller-desktop .st-auto-theme .elem-d, .st-auto-theme .drum-controller-desktop .elem-c .inner-2, .drum-controller-desktop .elem-c .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-c .inner-1, .drum-controller-desktop .elem-c .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-c, .drum-controller-desktop .st-auto-theme .elem-c, .st-auto-theme .drum-controller-desktop .elem-b .inner-2, .drum-controller-desktop .elem-b .st-auto-theme .inner-2, .st-auto-theme .drum-controller-desktop .elem-b .inner-1, .drum-controller-desktop .elem-b .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-b, .drum-controller-desktop .st-auto-theme .elem-b, .st-auto-theme .drum-controller-desktop .elem-a .inner-1, .drum-controller-desktop .elem-a .st-auto-theme .inner-1, .st-auto-theme .drum-controller-desktop .elem-a, .drum-controller-desktop .st-auto-theme .elem-a, .st-auto-theme .drum-controller-desktop .key, .drum-controller-desktop .st-auto-theme .key, .st-auto-theme .drum-controller-desktop .hit-overlay, .drum-controller-desktop .st-auto-theme .hit-overlay, .st-auto-theme .drum-controller-touch, .st-auto-theme .dnd-sampler-engine-gui, .st-auto-theme .bass808enginegui, .st-auto-theme .sampler1enginegui, .st-auto-theme .synth78enginegui, .st-auto-theme .looptab-banner_close-button, .st-auto-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text, .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .st-auto-theme .cta-text, .st-auto-theme .looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container, .looptab .results .loop-awareness-banner-holder .st-auto-theme .loop-awareness-banner-container, .st-auto-theme .looptab .tagbuttons .tagbutton-list .tagbutton.highlighted, .looptab .tagbuttons .tagbutton-list .st-auto-theme .tagbutton.highlighted, .st-auto-theme .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-auto-theme .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-auto-theme .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-auto-theme .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .st-auto-theme .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .st-auto-theme .instrument-logo-bass808, .st-auto-theme .druminstrumentgui .interaction-area, .druminstrumentgui .st-auto-theme .interaction-area, .st-auto-theme .effects-editor-carousel__placeholder-card, .st-auto-theme .effects-editor-carousel .effects-editor-carousel__scroll-window, .effects-editor-carousel .st-auto-theme .effects-editor-carousel__scroll-window, .st-auto-theme .effects-editor-carousel, .st-auto-theme .vocal-tuner__disabled-overlay, .st-auto-theme .vocal-tools-container, .st-auto-theme .vocalsinstrumentgui .interaction-area, .vocalsinstrumentgui .st-auto-theme .interaction-area, .st-auto-theme .stomp .disabled-effect, .stomp .st-auto-theme .disabled-effect, .st-auto-theme .stomp .is-paid-effect, .stomp .st-auto-theme .is-paid-effect, .st-auto-theme .stomp--disabled-effect .power-on, .stomp--disabled-effect .st-auto-theme .power-on, .st-auto-theme .stomp--disabled-effect .closer, .stomp--disabled-effect .st-auto-theme .closer, .st-auto-theme .stomp--paywalled .power-on, .stomp--paywalled .st-auto-theme .power-on, .st-auto-theme .stomp--paywalled .closer, .stomp--paywalled .st-auto-theme .closer, .st-auto-theme .st-toggle-button-wrapper.contrastingbase {
    --background-base: #290247; /* The default background color of the contrastingBase set. */
    --background-highlight: #380361; /* A background color that indicates the hover state of a component. */
    --background-press: #130120; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #3e036c; /* The default background color for elevated elements in the contrastingBase set. */
    --background-elevated-highlight: #4b0481; /* For hover states of elevated elements */
    --background-elevated-press: #310255; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.12); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the contrastingBase set. */
    --text-subdued: #c884fc; /* For text and icons that are less prominent. */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the contrastingBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #aa43fa; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the contrastingBase set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #3f036d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-inverted-primary-set, .st-auto-theme .de-esser-gui .meter .mark, .de-esser-gui .meter .st-auto-theme .mark, .st-auto-theme .playable-waveform-preview.waveform-inverted-theme .preview-waveform, .playable-waveform-preview.waveform-inverted-theme .st-auto-theme .preview-waveform, .st-auto-theme .playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular, .playable-waveform-preview.waveform-inverted-theme .st-auto-theme button.st-button.button_circular, .st-auto-theme .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing, .transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .st-auto-theme .playing, .st-auto-theme .st-toggle-button-wrapper.contrastingbase.on .st-toggle-button, .st-toggle-button-wrapper.contrastingbase.on .st-auto-theme .st-toggle-button {
    --background-base: #ffffff; /* The default background color of the invertedPrimary set. */
    --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */
    --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #ffffff; /* fallback */
    --background-elevated-highlight: #ffffff; /* fallback */
    --background-elevated-press: #ffffff; /* fallback */
    --background-tinted-base: #ffffff; /* fallback */
    --background-tinted-highlight: #ffffff; /* fallback */
    --background-tinted-press: #ffffff; /* fallback */
    --text-base: #430877; /* The default text and icon color of the invertedPrimary set. */
    --text-subdued: #9024f0; /* For text and icons that are less prominent. */
    --text-primary: #430877; /* fallback */
    --text-negative: #430877; /* fallback */
    --text-spotlight: #430877; /* fallback */
    --text-positive: #430877; /* fallback */
    --essential-base: #430877; /* The default essential color of the invertedPrimary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #b267f5; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #430877; /* fallback */
    --essential-negative: #430877; /* fallback */
    --essential-spotlight: #430877; /* fallback */
    --essential-positive: #430877; /* fallback */
    --decorative-base: #430877; /* The default decorative color of the invertedPrimary set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-simply-red-set, .st-auto-theme .automationeditors.col0 svg, .automationeditors.col0 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col0 .automationcontrolpoint,
  .automationeditors.col0 .st-auto-theme .automationcontrolpoint, .st-auto-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on, .synth84enginegui .container .control-container .control-area .button-wrapper .st-auto-theme .synth-led-on, .st-auto-theme .synth84enginegui .container .control-container .control-area .button-wrapper .synth-led, .synth84enginegui .container .control-container .control-area .button-wrapper .st-auto-theme .synth-led, .st-auto-theme .trackheader .trackgroup.drums, .trackheader .st-auto-theme .trackgroup.drums, .st-auto-theme .region-tools .loophandle.col0, .region-tools .st-auto-theme .loophandle.col0, .st-auto-theme .vocalsinstrumentgui .recording-label, .vocalsinstrumentgui .st-auto-theme .recording-label {
    --background-base: #df2d47; /* The default background color of the simplyRed set. */
    --background-highlight: #da213c; /* A background color that indicates the hover state of a component. */
    --background-press: #8e1627; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #e44d63; /* The default background color for elevated elements in the simplyRed set. */
    --background-elevated-highlight: #e6596d; /* For hover states of elevated elements */
    --background-elevated-press: #ae1a30; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.15); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.21); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.08); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the simplyRed set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the simplyRed set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the simplyRed set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #e44f65; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-maroon-set, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .project-template-icon.podcaststudio, .st-auto-theme .with-synth-84-styling .tab-button.selected, .with-synth-84-styling .st-auto-theme .tab-button.selected, .st-auto-theme .automationeditors.col1 svg, .automationeditors.col1 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col1 .automationcontrolpoint,
  .automationeditors.col1 .st-auto-theme .automationcontrolpoint {
    --background-base: #cd3a89; /* The default background color of the maroon set. */
    --background-highlight: #c73382; /* A background color that indicates the hover state of a component. */
    --background-press: #812155; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #d35398; /* The default background color for elevated elements in the maroon set. */
    --background-elevated-highlight: #d65e9e; /* For hover states of elevated elements */
    --background-elevated-press: #9e2868; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the maroon set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the maroon set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the maroon set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #d55a9c; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-iron-wine-set, .st-auto-theme .create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad, .create-from-template-dialog-2 .inner .st-auto-theme .project-template.project-template-type-template.project-template-kind-sketchpad, .st-auto-theme .create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad, .create-from-template-dialog-2 .inner .project-template .st-auto-theme .project-template-icon.sketchpad, .st-auto-theme .automationeditors.col2 svg, .automationeditors.col2 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col2 .automationcontrolpoint,
  .automationeditors.col2 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.recording, .trackheader .st-auto-theme .trackgroup.recording {
    --background-base: #bc3fc0; /* The default background color of the ironWine set. */
    --background-highlight: #b33cb7; /* A background color that indicates the hover state of a component. */
    --background-press: #742777; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #c457c8; /* The default background color for elevated elements in the ironWine set. */
    --background-elevated-highlight: #c861cb; /* For hover states of elevated elements */
    --background-elevated-press: #8f3092; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the ironWine set. */
    --text-primary: #ffe9e9; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-subdued: #ffffff; /* fallback */
    --text-bright-accent: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the ironWine set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-primary: #ffe9e9; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-subdued: #ffffff; /* fallback */
    --essential-bright-accent: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the ironWine set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #c75dca; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-purple-rain-set, .st-auto-theme .st-card--theme-purple .st-card__icon-wrapper, .st-card--theme-purple .st-auto-theme .st-card__icon-wrapper, .st-auto-theme .st-card-button--theme-purple .st-card-button__icon-wrapper, .st-card-button--theme-purple .st-auto-theme .st-card-button__icon-wrapper, .st-auto-theme .automationeditors.col3 svg, .automationeditors.col3 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col3 .automationcontrolpoint,
  .automationeditors.col3 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.vocal, .trackheader .st-auto-theme .trackgroup.vocal {
    --background-base: #a33bff; /* The default background color of the purpleRain set. */
    --background-highlight: #9d2eff; /* A background color that indicates the hover state of a component. */
    --background-press: #6500bf; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #af55ff; /* The default background color for elevated elements in the purpleRain set. */
    --background-elevated-highlight: #b45fff; /* For hover states of elevated elements */
    --background-elevated-press: #7b00e8; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.07); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the purpleRain set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the purpleRain set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the purpleRain set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #b25bff; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-royal-blue-set, .st-auto-theme .st-card--theme-blue .st-card__icon-wrapper, .st-card--theme-blue .st-auto-theme .st-card__icon-wrapper, .st-auto-theme .st-card-button--theme-blue .st-card-button__icon-wrapper, .st-card-button--theme-blue .st-auto-theme .st-card-button__icon-wrapper, .st-auto-theme .automationeditors.col4 svg, .automationeditors.col4 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col4 .automationcontrolpoint,
  .automationeditors.col4 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.lead, .trackheader .st-auto-theme .trackgroup.lead {
    --background-base: #4567fc; /* The default background color of the royalBlue set. */
    --background-highlight: #3c5ffc; /* A background color that indicates the hover state of a component. */
    --background-press: #032ad5; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #5a78fc; /* The default background color for elevated elements in the royalBlue set. */
    --background-elevated-highlight: #637ffc; /* For hover states of elevated elements */
    --background-elevated-press: #0c38fb; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.11); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.16); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the royalBlue set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the royalBlue set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the royalBlue set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #5f7cfc; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-ocean-eyes-set, .st-auto-theme .st-card--theme-green .st-card__icon-wrapper, .st-card--theme-green .st-auto-theme .st-card__icon-wrapper, .st-auto-theme .st-card-button--theme-green .st-card-button__icon-wrapper, .st-card-button--theme-green .st-auto-theme .st-card-button__icon-wrapper, .st-auto-theme .automationeditors.col5 svg, .automationeditors.col5 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col5 .automationcontrolpoint,
  .automationeditors.col5 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.other, .trackheader .st-auto-theme .trackgroup.other {
    --background-base: #128193; /* The default background color of the oceanEyes set. */
    --background-highlight: #117b8c; /* A background color that indicates the hover state of a component. */
    --background-press: #0b4f5a; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #148fa3; /* The default background color for elevated elements in the oceanEyes set. */
    --background-elevated-highlight: #1596ab; /* For hover states of elevated elements */
    --background-elevated-press: #0e616f; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.09); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.13); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the oceanEyes set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the oceanEyes set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the oceanEyes set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #1594a9; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-forest-set, .st-auto-theme .automationeditors.col6 svg, .automationeditors.col6 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col6 .automationcontrolpoint,
  .automationeditors.col6 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.bass, .trackheader .st-auto-theme .trackgroup.bass {
    --background-base: #00856a; /* The default background color of the forest set. */
    --background-highlight: #007f65; /* A background color that indicates the hover state of a component. */
    --background-press: #005241; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #009476; /* The default background color for elevated elements in the forest set. */
    --background-elevated-highlight: #009a7b; /* For hover states of elevated elements */
    --background-elevated-press: #006550; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the forest set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the forest set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the forest set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #00997a; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-green-light-set, .st-auto-theme .automationeditors.col7 svg, .automationeditors.col7 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col7 .automationcontrolpoint,
  .automationeditors.col7 .st-auto-theme .automationcontrolpoint {
    --background-base: #278748; /* The default background color of the greenLight set. */
    --background-highlight: #258145; /* A background color that indicates the hover state of a component. */
    --background-press: #18532c; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #2b9650; /* The default background color for elevated elements in the greenLight set. */
    --background-elevated-highlight: #2d9d54; /* For hover states of elevated elements */
    --background-elevated-press: #1e6636; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.09); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the greenLight set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the greenLight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the greenLight set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #2d9b53; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-gold-frapp-set, .st-auto-theme .automationeditors.col8 svg, .automationeditors.col8 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col8 .automationcontrolpoint,
  .automationeditors.col8 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.harmonics, .trackheader .st-auto-theme .trackgroup.harmonics {
    --background-base: #a46a1e; /* The default background color of the goldFrapp set. */
    --background-highlight: #9c651d; /* A background color that indicates the hover state of a component. */
    --background-press: #654112; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #b67621; /* The default background color for elevated elements in the goldFrapp set. */
    --background-elevated-highlight: #be7b23; /* For hover states of elevated elements */
    --background-elevated-press: #7c5017; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.14); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the goldFrapp set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the goldFrapp set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the goldFrapp set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #bc7a22; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
  .st-auto-theme .st-orange-soda-set, .st-auto-theme .automationeditors.col9 svg, .automationeditors.col9 .st-auto-theme svg,
  .st-auto-theme .automationeditors.col9 .automationcontrolpoint,
  .automationeditors.col9 .st-auto-theme .automationcontrolpoint, .st-auto-theme .trackheader .trackgroup.fx, .trackheader .st-auto-theme .trackgroup.fx {
    --background-base: #bf5737; /* The default background color of the orangeSoda set. */
    --background-highlight: #b65334; /* A background color that indicates the hover state of a component. */
    --background-press: #763622; /* A background color that indicates the press state of a component. */
    --background-elevated-base: #cb6749; /* The default background color for elevated elements in the orangeSoda set. */
    --background-elevated-highlight: #cd7053; /* For hover states of elevated elements */
    --background-elevated-press: #91422a; /* For pressed states of elevated elements */
    --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */
    --background-tinted-highlight: rgba(255, 255, 255, 0.17); /* For hover states of tinted elements */
    --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */
    --text-base: #ffffff; /* The default text and icon color of the orangeSoda set. */
    --text-subdued: #ffffff; /* fallback */
    --text-primary: #ffffff; /* fallback */
    --text-negative: #ffffff; /* fallback */
    --text-spotlight: #ffffff; /* fallback */
    --text-positive: #ffffff; /* fallback */
    --essential-base: #ffffff; /* The default essential color of the orangeSoda set. Used for borders, indicators, or graphics that are essential for understanding the UI. */
    --essential-subdued: #ffffff; /* fallback */
    --essential-primary: #ffffff; /* fallback */
    --essential-negative: #ffffff; /* fallback */
    --essential-spotlight: #ffffff; /* fallback */
    --essential-positive: #ffffff; /* fallback */
    --decorative-base: #ffffff; /* The default decorative color of the orangeSoda set. Used for any graphical elements that are not essential for understanding the interface. */
    --decorative-subdued: #cd6d50; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */
  }
}
/**
 Mango Foundation
 */
:root {
  --white: #ffffff;
  --black: #000000;
  --focus: #3c95ff;
  --dialog-shadow-light: rgba(0, 0, 0, 0.15);
  --dialog-shadow-dark: rgba(0, 0, 0, 0.45);
  --space-nano: 4px;
  --space-tiny: 8px;
  --space-tiny-1: 12px;
  --space-small: 16px;
  --space-small-1: 20px;
  --space-medium: 24px;
  --space-medium-1: 28px;
  --space-medium-2: 32px;
  --space-large: 40px;
  --space-large-1: 48px;
  --space-large-2: 56px;
  --space-huge: 64px;
  --space-huge-1: 80px;
  --space-huge-2: 96px;
  --space-huge-3: 120px;
}

@media all and (min-width: 768px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

:root {
  --desktop: 1920px;
  --laptop: 1199px;
  --tablet: 1023px;
  --tablet-portrait: 880px;
  --mobile: 768px;
  --mobile-medium: 534px;
  --mobile-portrait: 380px;
  --height-small: 320px;
  --height-tiny: 225px;
}

@font-face {
  font-family: "soundtrap-icons";
  src: url("fonts/soundtrap-icons.eot?v=5");
  src: url("fonts/soundtrap-icons.eot?v=5#iefix") format("embedded-opentype"), url("fonts/soundtrap-icons.woff?v=5") format("woff"), url("fonts/soundtrap-icons.ttf?v=5") format("truetype"), url("fonts/soundtrap-icons.svg?v=5#soundtrap-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
.soundtrap-icon {
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
}

.soundtrap-icon--svg {
  font-family: inherit;
}
.soundtrap-icon--svg:before {
  content: "" !important;
  font-family: inherit !important;
  display: none;
}
.soundtrap-icon--svg svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: text-bottom;
}

.soundtrap-icon--tiny {
  font-size: var(--space-tiny);
}

.soundtrap-icon--tiny-1 {
  font-size: var(--space-tiny-1);
}

.soundtrap-icon--small {
  font-size: var(--space-small);
}

.soundtrap-icon--small-1 {
  font-size: var(--space-small-1);
}

.soundtrap-icon--medium {
  font-size: var(--space-medium);
}

[data-icon]:before {
  content: attr(data-icon);
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
}

[class^=ic-]:before,
[class*=" ic-"]:before {
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
}

.ic-add:before {
  content: "\e000";
}

.ic-arrow-down:before {
  content: "\e001";
}

.ic-arrow-left:before {
  content: "\e002";
}

.ic-arrow-right:before {
  content: "\e003";
}

.ic-arrow-up:before {
  content: "\e004";
}

.ic-audio:before {
  content: "\e005";
}

.ic-automation:before {
  content: "\e006";
}

.ic-award-1:before {
  content: "\e007";
}

.ic-award-2:before {
  content: "\e008";
}

.ic-back-to-start:before {
  content: "\e009";
}

.ic-calendar:before {
  content: "\e00a";
}

.ic-call-end:before {
  content: "\e00b";
}

.ic-call-start:before {
  content: "\e00c";
}

.ic-camera:before {
  content: "\e00d";
}

.ic-cancel:before {
  content: "\e00e";
}

.ic-chat:before {
  content: "\e00f";
}

.ic-chat-2:before {
  content: "\e010";
}

.ic-chevron-double:before {
  content: "\e011";
}

.ic-chevron-down:before {
  content: "\e012";
}

.ic-chevron-left:before {
  content: "\e013";
}

.ic-chevron-right:before {
  content: "\e014";
}

.ic-chevron-up:before {
  content: "\e015";
}

.ic-circle-cancel:before {
  content: "\e016";
}

.ic-circle-minus:before {
  content: "\e017";
}

.ic-circle-ok:before {
  content: "\e018";
}

.ic-circle-plus:before {
  content: "\e019";
}

.ic-clock:before {
  content: "\e01a";
}

.ic-computer:before {
  content: "\e01b";
}

.ic-copy:before {
  content: "\e01c";
}

.ic-cut:before {
  content: "\e01d";
}

.ic-delete:before {
  content: "\e01e";
}

.ic-download:before {
  content: "\e01f";
}

.ic-edit:before {
  content: "\e020";
}

.ic-education:before {
  content: "\e021";
}

.ic-effect:before {
  content: "\e022";
}

.ic-equalizer:before {
  content: "\e023";
}

.ic-erase:before {
  content: "\e024";
}

.ic-exit:before {
  content: "\e025";
}

.ic-eye-close:before {
  content: "\e026";
}

.ic-eye-open:before {
  content: "\e027";
}

.ic-file:before {
  content: "\e028";
}

.ic-file-import:before {
  content: "\e029";
}

.ic-folder-add:before {
  content: "\e02a";
}

.ic-folder-closed:before {
  content: "\e02b";
}

.ic-folder-open:before {
  content: "\e02c";
}

.ic-forward:before {
  content: "\e02d";
}

.ic-gift:before {
  content: "\e02e";
}

.ic-globe:before {
  content: "\e02f";
}

.ic-grid:before {
  content: "\e030";
}

.ic-headphones:before {
  content: "\e031";
}

.ic-heart:before {
  content: "\e032";
}

.ic-heart-empty:before {
  content: "\e033";
}

.ic-history:before {
  content: "\e034";
}

.ic-idea:before {
  content: "\e035";
}

.ic-info:before {
  content: "\e036";
}

.ic-instrument-amp:before {
  content: "\e037";
}

.ic-instrument-brass:before {
  content: "\e038";
}

.ic-instrument-drums:before {
  content: "\e039";
}

.ic-instrument-guitar:before {
  content: "\e03a";
}

.ic-instrument-mic:before {
  content: "\e03b";
}

.ic-instrument-piano:before {
  content: "\e03c";
}

.ic-instrument-strings:before {
  content: "\e03d";
}

.ic-instrument-synth:before {
  content: "\e03e";
}

.ic-like:before {
  content: "\e03f";
}

.ic-link:before {
  content: "\e040";
}

.ic-location:before {
  content: "\e041";
}

.ic-lock-close:before {
  content: "\e042";
}

.ic-lock-open:before {
  content: "\e043";
}

.ic-lock-rotation:before {
  content: "\e044";
}

.ic-mail:before {
  content: "\e045";
}

.ic-menu-dots:before {
  content: "\e046";
}

.ic-menu-grid:before {
  content: "\e047";
}

.ic-menu-hamburger:before {
  content: "\e048";
}

.ic-merge:before {
  content: "\e049";
}

.ic-metronome:before {
  content: "\e04a";
}

.ic-mic:before {
  content: "\e04b";
}

.ic-mic-mute:before {
  content: "\e04c";
}

.ic-midi:before {
  content: "\e04d";
}

.ic-music:before {
  content: "\e04e";
}

.ic-mute:before {
  content: "\e04f";
}

.ic-name:before {
  content: "\e050";
}

.ic-new-window:before {
  content: "\e051";
}

.ic-notification:before {
  content: "\e052";
}

.ic-ok:before {
  content: "\e053";
}

.ic-on:before {
  content: "\e054";
}

.ic-paste:before {
  content: "\e055";
}

.ic-pause:before {
  content: "\e056";
}

.ic-people:before {
  content: "\e057";
}

.ic-picture:before {
  content: "\e058";
}

.ic-play:before {
  content: "\e059";
}

.ic-power-up:before {
  content: "\e05a";
}

.ic-projects:before {
  content: "\e05b";
}

.ic-quantize:before {
  content: "\e05c";
}

.ic-quote:before {
  content: "\e05d";
}

.ic-randomize:before {
  content: "\e05e";
}

.ic-record:before {
  content: "\e05f";
}

.ic-redo:before {
  content: "\e060";
}

.ic-refresh:before {
  content: "\e061";
}

.ic-repeat:before {
  content: "\e062";
}

.ic-resize-full:before {
  content: "\e063";
}

.ic-resize-small:before {
  content: "\e064";
}

.ic-rewind:before {
  content: "\e065";
}

.ic-search:before {
  content: "\e066";
}

.ic-send:before {
  content: "\e067";
}

.ic-settings:before {
  content: "\e068";
}

.ic-share:before {
  content: "\e069";
}

.ic-shout:before {
  content: "\e06a";
}

.ic-snap-to-grid:before {
  content: "\e06b";
}

.ic-speakers:before {
  content: "\e06c";
}

.ic-split:before {
  content: "\e06d";
}

.ic-star:before {
  content: "\e06e";
}

.ic-stop:before {
  content: "\e06f";
}

.ic-thumbs-up:before {
  content: "\e070";
}

.ic-tools:before {
  content: "\e071";
}

.ic-tuner:before {
  content: "\e072";
}

.ic-undo:before {
  content: "\e073";
}

.ic-upload:before {
  content: "\e074";
}

.ic-user:before {
  content: "\e075";
}

.ic-user-add:before {
  content: "\e076";
}

.ic-user-remove:before {
  content: "\e077";
}

.ic-video:before {
  content: "\e078";
}

.ic-video-call:before {
  content: "\e079";
}

.ic-video-call-mute:before {
  content: "\e07a";
}

.ic-volume-down:before {
  content: "\e07b";
}

.ic-volume-up:before {
  content: "\e07c";
}

.ic-warning-sign:before {
  content: "\e07d";
}

.ic-zoom-in:before {
  content: "\e07e";
}

.ic-zoom-out:before {
  content: "\e07f";
}

.ic-brightness:before {
  content: "\e080";
}

.ic-chat-new:before {
  content: "\e081";
}

.ic-cursor-filled:before {
  content: "\e082";
}

.ic-cursor-outlined:before {
  content: "\e083";
}

.ic-device-phone:before {
  content: "\e084";
}

.ic-device-tablet:before {
  content: "\e085";
}

.ic-discount:before {
  content: "\e086";
}

.ic-fade-in:before {
  content: "\e087";
}

.ic-fade-out:before {
  content: "\e088";
}

.ic-point:before {
  content: "\e089";
}

.ic-save:before {
  content: "\e08a";
}

.ic-scissors:before {
  content: "\e08b";
}

.ic-soundtrap:before {
  content: "\e08c";
}

.ic-spotify:before {
  content: "\e08d";
}

.ic-voice:before {
  content: "\e08e";
}

.ic-808:before {
  content: "\e08f";
}

.ic-stars:before {
  content: "\e090";
}

.mango-button, .mango-button-spotlight, .mango-button-weak-XL, .mango-icon-button-emphasized-XL, .mango-icon-button-weak-XL, .mango-button-weak-L, .mango-icon-button-emphasized-L, .mango-icon-button-weak-L, .mango-button-weak-M, .mango-icon-button-emphasized-M, .mango-icon-button-weak-M, .mango-button-weak-S, .mango-icon-button-emphasized-S, .mango-icon-button-weak-S, .mango-button-emphasised-XL, .mango-button-emphasised-L, .mango-button-emphasised-M, .mango-button-emphasised-S, .mango-button-regular-XL, .mango-icon-button-regular-XL, .mango-button-regular-L, .mango-icon-button-regular-L, .mango-button-regular-M, .mango-icon-button-regular-M, .mango-button-regular-S, .mango-icon-button-regular-S, .mango-button-special-S, .mango-icon-button-special-S, .mango-button-negative-S, .mango-button-spotlight-S, .mango-button-special-M, .mango-icon-button-special-M, .mango-button-negative-M, .mango-button-spotlight-M, .mango-button-special-L, .mango-icon-button-special-L, .mango-button-negative-L, .mango-button-spotlight-L, .mango-button-special-XL, .mango-icon-button-special-XL, .mango-button-negative-XL, .mango-button-spotlight-XL, .mango-button-weak, .mango-button-regular, .mango-button-special {
  font-family: var(--font-family);
  font-weight: 400;
  position: relative;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 50px;
  font-weight: 500;
  transition: background 0.1s ease-out;
  text-decoration: none;
  border: 1px solid transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.mango-button:hover, .mango-button-spotlight:hover, .mango-button-weak-XL:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-weak-XL:hover, .mango-button-weak-L:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-weak-L:hover, .mango-button-weak-M:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-weak-M:hover, .mango-button-weak-S:hover, .mango-icon-button-emphasized-S:hover, .mango-icon-button-weak-S:hover, .mango-button-emphasised-XL:hover, .mango-button-emphasised-L:hover, .mango-button-emphasised-M:hover, .mango-button-emphasised-S:hover, .mango-button-regular-XL:hover, .mango-icon-button-regular-XL:hover, .mango-button-regular-L:hover, .mango-icon-button-regular-L:hover, .mango-button-regular-M:hover, .mango-icon-button-regular-M:hover, .mango-button-regular-S:hover, .mango-icon-button-regular-S:hover, .mango-button-special-S:hover, .mango-icon-button-special-S:hover, .mango-button-negative-S:hover, .mango-button-spotlight-S:hover, .mango-button-special-M:hover, .mango-icon-button-special-M:hover, .mango-button-negative-M:hover, .mango-button-spotlight-M:hover, .mango-button-special-L:hover, .mango-icon-button-special-L:hover, .mango-button-negative-L:hover, .mango-button-spotlight-L:hover, .mango-button-special-XL:hover, .mango-icon-button-special-XL:hover, .mango-button-negative-XL:hover, .mango-button-spotlight-XL:hover, .mango-button-weak:hover, .mango-button-regular:hover, .mango-button-special:hover {
  transition: background 0.03s ease-out;
  text-decoration: none;
}
.mango-button.hide, .hide.mango-button-spotlight, .hide.mango-button-weak-XL, .hide.mango-icon-button-emphasized-XL, .hide.mango-icon-button-weak-XL, .hide.mango-button-weak-L, .hide.mango-icon-button-emphasized-L, .hide.mango-icon-button-weak-L, .hide.mango-button-weak-M, .hide.mango-icon-button-emphasized-M, .hide.mango-icon-button-weak-M, .hide.mango-button-weak-S, .hide.mango-icon-button-emphasized-S, .hide.mango-icon-button-weak-S, .hide.mango-button-emphasised-XL, .hide.mango-button-emphasised-L, .hide.mango-button-emphasised-M, .hide.mango-button-emphasised-S, .hide.mango-button-regular-XL, .hide.mango-icon-button-regular-XL, .hide.mango-button-regular-L, .hide.mango-icon-button-regular-L, .hide.mango-button-regular-M, .hide.mango-icon-button-regular-M, .hide.mango-button-regular-S, .hide.mango-icon-button-regular-S, .hide.mango-button-special-S, .hide.mango-icon-button-special-S, .hide.mango-button-negative-S, .hide.mango-button-spotlight-S, .hide.mango-button-special-M, .hide.mango-icon-button-special-M, .hide.mango-button-negative-M, .hide.mango-button-spotlight-M, .hide.mango-button-special-L, .hide.mango-icon-button-special-L, .hide.mango-button-negative-L, .hide.mango-button-spotlight-L, .hide.mango-button-special-XL, .hide.mango-icon-button-special-XL, .hide.mango-button-negative-XL, .hide.mango-button-spotlight-XL, .hide.mango-button-weak, .hide.mango-button-regular, .hide.mango-button-special {
  display: none;
}
.mango-button.no-uppercase, .no-uppercase.mango-button-spotlight, .no-uppercase.mango-button-weak-XL, .no-uppercase.mango-icon-button-emphasized-XL, .no-uppercase.mango-icon-button-weak-XL, .no-uppercase.mango-button-weak-L, .no-uppercase.mango-icon-button-emphasized-L, .no-uppercase.mango-icon-button-weak-L, .no-uppercase.mango-button-weak-M, .no-uppercase.mango-icon-button-emphasized-M, .no-uppercase.mango-icon-button-weak-M, .no-uppercase.mango-button-weak-S, .no-uppercase.mango-icon-button-emphasized-S, .no-uppercase.mango-icon-button-weak-S, .no-uppercase.mango-button-emphasised-XL, .no-uppercase.mango-button-emphasised-L, .no-uppercase.mango-button-emphasised-M, .no-uppercase.mango-button-emphasised-S, .no-uppercase.mango-button-regular-XL, .no-uppercase.mango-icon-button-regular-XL, .no-uppercase.mango-button-regular-L, .no-uppercase.mango-icon-button-regular-L, .no-uppercase.mango-button-regular-M, .no-uppercase.mango-icon-button-regular-M, .no-uppercase.mango-button-regular-S, .no-uppercase.mango-icon-button-regular-S, .no-uppercase.mango-button-special-S, .no-uppercase.mango-icon-button-special-S, .no-uppercase.mango-button-negative-S, .no-uppercase.mango-button-spotlight-S, .no-uppercase.mango-button-special-M, .no-uppercase.mango-icon-button-special-M, .no-uppercase.mango-button-negative-M, .no-uppercase.mango-button-spotlight-M, .no-uppercase.mango-button-special-L, .no-uppercase.mango-icon-button-special-L, .no-uppercase.mango-button-negative-L, .no-uppercase.mango-button-spotlight-L, .no-uppercase.mango-button-special-XL, .no-uppercase.mango-icon-button-special-XL, .no-uppercase.mango-button-negative-XL, .no-uppercase.mango-button-spotlight-XL, .no-uppercase.mango-button-weak, .no-uppercase.mango-button-regular, .no-uppercase.mango-button-special {
  text-transform: none;
}

.mango-button.disabled, .disabled.mango-button-spotlight, .disabled.mango-button-weak-XL, .disabled.mango-icon-button-emphasized-XL, .disabled.mango-icon-button-weak-XL, .disabled.mango-button-weak-L, .disabled.mango-icon-button-emphasized-L, .disabled.mango-icon-button-weak-L, .disabled.mango-button-weak-M, .disabled.mango-icon-button-emphasized-M, .disabled.mango-icon-button-weak-M, .disabled.mango-button-weak-S, .disabled.mango-icon-button-emphasized-S, .disabled.mango-icon-button-weak-S, .disabled.mango-button-emphasised-XL, .disabled.mango-button-emphasised-L, .disabled.mango-button-emphasised-M, .disabled.mango-button-emphasised-S, .disabled.mango-button-regular-XL, .disabled.mango-icon-button-regular-XL, .disabled.mango-button-regular-L, .disabled.mango-icon-button-regular-L, .disabled.mango-button-regular-M, .disabled.mango-icon-button-regular-M, .disabled.mango-button-regular-S, .disabled.mango-icon-button-regular-S, .disabled.mango-button-special-S, .disabled.mango-icon-button-special-S, .disabled.mango-button-negative-S, .disabled.mango-button-spotlight-S, .disabled.mango-button-special-M, .disabled.mango-icon-button-special-M, .disabled.mango-button-negative-M, .disabled.mango-button-spotlight-M, .disabled.mango-button-special-L, .disabled.mango-icon-button-special-L, .disabled.mango-button-negative-L, .disabled.mango-button-spotlight-L, .disabled.mango-button-special-XL, .disabled.mango-icon-button-special-XL, .disabled.mango-button-negative-XL, .disabled.mango-button-spotlight-XL, .disabled.mango-button-weak, .disabled.mango-button-regular, .disabled.mango-button-special,
.mango-button[disabled],
[disabled].mango-button-spotlight,
[disabled].mango-button-weak-XL,
[disabled].mango-icon-button-emphasized-XL,
[disabled].mango-icon-button-weak-XL,
[disabled].mango-button-weak-L,
[disabled].mango-icon-button-emphasized-L,
[disabled].mango-icon-button-weak-L,
[disabled].mango-button-weak-M,
[disabled].mango-icon-button-emphasized-M,
[disabled].mango-icon-button-weak-M,
[disabled].mango-button-weak-S,
[disabled].mango-icon-button-emphasized-S,
[disabled].mango-icon-button-weak-S,
[disabled].mango-button-emphasised-XL,
[disabled].mango-button-emphasised-L,
[disabled].mango-button-emphasised-M,
[disabled].mango-button-emphasised-S,
[disabled].mango-button-regular-XL,
[disabled].mango-icon-button-regular-XL,
[disabled].mango-button-regular-L,
[disabled].mango-icon-button-regular-L,
[disabled].mango-button-regular-M,
[disabled].mango-icon-button-regular-M,
[disabled].mango-button-regular-S,
[disabled].mango-icon-button-regular-S,
[disabled].mango-button-special-S,
[disabled].mango-icon-button-special-S,
[disabled].mango-button-negative-S,
[disabled].mango-button-spotlight-S,
[disabled].mango-button-special-M,
[disabled].mango-icon-button-special-M,
[disabled].mango-button-negative-M,
[disabled].mango-button-spotlight-M,
[disabled].mango-button-special-L,
[disabled].mango-icon-button-special-L,
[disabled].mango-button-negative-L,
[disabled].mango-button-spotlight-L,
[disabled].mango-button-special-XL,
[disabled].mango-icon-button-special-XL,
[disabled].mango-button-negative-XL,
[disabled].mango-button-spotlight-XL,
[disabled].mango-button-weak,
[disabled].mango-button-regular,
[disabled].mango-button-special {
  cursor: default;
  background: var(--background-tinted-base);
  opacity: var(--disabled-opacity);
}

.mango-button.disabled, .disabled.mango-button-spotlight, .disabled.mango-button-weak-XL, .disabled.mango-icon-button-emphasized-XL, .disabled.mango-icon-button-weak-XL, .disabled.mango-button-weak-L, .disabled.mango-icon-button-emphasized-L, .disabled.mango-icon-button-weak-L, .disabled.mango-button-weak-M, .disabled.mango-icon-button-emphasized-M, .disabled.mango-icon-button-weak-M, .disabled.mango-button-weak-S, .disabled.mango-icon-button-emphasized-S, .disabled.mango-icon-button-weak-S, .disabled.mango-button-emphasised-XL, .disabled.mango-button-emphasised-L, .disabled.mango-button-emphasised-M, .disabled.mango-button-emphasised-S, .disabled.mango-button-regular-XL, .disabled.mango-icon-button-regular-XL, .disabled.mango-button-regular-L, .disabled.mango-icon-button-regular-L, .disabled.mango-button-regular-M, .disabled.mango-icon-button-regular-M, .disabled.mango-button-regular-S, .disabled.mango-icon-button-regular-S, .disabled.mango-button-special-S, .disabled.mango-icon-button-special-S, .disabled.mango-button-negative-S, .disabled.mango-button-spotlight-S, .disabled.mango-button-special-M, .disabled.mango-icon-button-special-M, .disabled.mango-button-negative-M, .disabled.mango-button-spotlight-M, .disabled.mango-button-special-L, .disabled.mango-icon-button-special-L, .disabled.mango-button-negative-L, .disabled.mango-button-spotlight-L, .disabled.mango-button-special-XL, .disabled.mango-icon-button-special-XL, .disabled.mango-button-negative-XL, .disabled.mango-button-spotlight-XL, .disabled.mango-button-weak, .disabled.mango-button-regular, .disabled.mango-button-special,
.mango-button[disabled],
[disabled].mango-button-spotlight,
[disabled].mango-button-weak-XL,
[disabled].mango-icon-button-emphasized-XL,
[disabled].mango-icon-button-weak-XL,
[disabled].mango-button-weak-L,
[disabled].mango-icon-button-emphasized-L,
[disabled].mango-icon-button-weak-L,
[disabled].mango-button-weak-M,
[disabled].mango-icon-button-emphasized-M,
[disabled].mango-icon-button-weak-M,
[disabled].mango-button-weak-S,
[disabled].mango-icon-button-emphasized-S,
[disabled].mango-icon-button-weak-S,
[disabled].mango-button-emphasised-XL,
[disabled].mango-button-emphasised-L,
[disabled].mango-button-emphasised-M,
[disabled].mango-button-emphasised-S,
[disabled].mango-button-regular-XL,
[disabled].mango-icon-button-regular-XL,
[disabled].mango-button-regular-L,
[disabled].mango-icon-button-regular-L,
[disabled].mango-button-regular-M,
[disabled].mango-icon-button-regular-M,
[disabled].mango-button-regular-S,
[disabled].mango-icon-button-regular-S,
[disabled].mango-button-special-S,
[disabled].mango-icon-button-special-S,
[disabled].mango-button-negative-S,
[disabled].mango-button-spotlight-S,
[disabled].mango-button-special-M,
[disabled].mango-icon-button-special-M,
[disabled].mango-button-negative-M,
[disabled].mango-button-spotlight-M,
[disabled].mango-button-special-L,
[disabled].mango-icon-button-special-L,
[disabled].mango-button-negative-L,
[disabled].mango-button-spotlight-L,
[disabled].mango-button-special-XL,
[disabled].mango-icon-button-special-XL,
[disabled].mango-button-negative-XL,
[disabled].mango-button-spotlight-XL,
[disabled].mango-button-weak,
[disabled].mango-button-regular,
[disabled].mango-button-special,
fieldset[disabled] .mango-button,
fieldset[disabled] .mango-button-spotlight,
fieldset[disabled] .mango-button-weak-XL,
fieldset[disabled] .mango-icon-button-emphasized-XL,
fieldset[disabled] .mango-icon-button-weak-XL,
fieldset[disabled] .mango-button-weak-L,
fieldset[disabled] .mango-icon-button-emphasized-L,
fieldset[disabled] .mango-icon-button-weak-L,
fieldset[disabled] .mango-button-weak-M,
fieldset[disabled] .mango-icon-button-emphasized-M,
fieldset[disabled] .mango-icon-button-weak-M,
fieldset[disabled] .mango-button-weak-S,
fieldset[disabled] .mango-icon-button-emphasized-S,
fieldset[disabled] .mango-icon-button-weak-S,
fieldset[disabled] .mango-button-emphasised-XL,
fieldset[disabled] .mango-button-emphasised-L,
fieldset[disabled] .mango-button-emphasised-M,
fieldset[disabled] .mango-button-emphasised-S,
fieldset[disabled] .mango-button-regular-XL,
fieldset[disabled] .mango-icon-button-regular-XL,
fieldset[disabled] .mango-button-regular-L,
fieldset[disabled] .mango-icon-button-regular-L,
fieldset[disabled] .mango-button-regular-M,
fieldset[disabled] .mango-icon-button-regular-M,
fieldset[disabled] .mango-button-regular-S,
fieldset[disabled] .mango-icon-button-regular-S,
fieldset[disabled] .mango-button-special-S,
fieldset[disabled] .mango-icon-button-special-S,
fieldset[disabled] .mango-button-negative-S,
fieldset[disabled] .mango-button-spotlight-S,
fieldset[disabled] .mango-button-special-M,
fieldset[disabled] .mango-icon-button-special-M,
fieldset[disabled] .mango-button-negative-M,
fieldset[disabled] .mango-button-spotlight-M,
fieldset[disabled] .mango-button-special-L,
fieldset[disabled] .mango-icon-button-special-L,
fieldset[disabled] .mango-button-negative-L,
fieldset[disabled] .mango-button-spotlight-L,
fieldset[disabled] .mango-button-special-XL,
fieldset[disabled] .mango-icon-button-special-XL,
fieldset[disabled] .mango-button-negative-XL,
fieldset[disabled] .mango-button-spotlight-XL,
fieldset[disabled] .mango-button-weak,
fieldset[disabled] .mango-button-regular,
fieldset[disabled] .mango-button-special {
  will-change: transform;
}

.mango-button-special {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
}
.mango-button-special .soundtrap-icon {
  line-height: inherit;
}
.mango-button-special:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-special:focus {
  color: var(--text-base);
}
.mango-button-special:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-special:disabled, .mango-button-special[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.mango-button-regular {
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
}
.mango-button-regular:focus {
  color: var(--text-base);
}
.mango-button-regular.selected {
  background-color: var(--background-press);
}
.mango-button-regular.selected:hover {
  background-color: var(--background-press);
}
.mango-button-regular:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-regular:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-regular:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.mango-button-weak {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-base);
}
.mango-button-weak:focus {
  color: var(--text-base);
}
.mango-button-weak.selected {
  background-color: var(--background-press);
}
.mango-button-weak.selected:hover {
  background-color: var(--background-press);
}
.mango-button-weak:hover {
  color: var(--text-base);
  border-color: var(--essential-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-weak:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-weak:disabled, .mango-button-weak.disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
  color: var(--text-base) !important;
}

.mango-button-special-XL, .mango-icon-button-special-XL, .mango-button-negative-XL, .mango-button-spotlight-XL {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 17px;
  height: 44px;
  min-width: 120px;
  letter-spacing: 0;
}
.mango-button-special-XL .soundtrap-icon, .mango-icon-button-special-XL .soundtrap-icon, .mango-button-negative-XL .soundtrap-icon, .mango-button-spotlight-XL .soundtrap-icon {
  line-height: inherit;
}
.mango-button-special-XL:hover, .mango-icon-button-special-XL:hover, .mango-button-negative-XL:hover, .mango-button-spotlight-XL:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-special-XL:focus, .mango-icon-button-special-XL:focus, .mango-button-negative-XL:focus, .mango-button-spotlight-XL:focus {
  color: var(--text-base);
}
.mango-button-special-XL:active, .mango-icon-button-special-XL:active, .mango-button-negative-XL:active, .mango-button-spotlight-XL:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-special-XL:disabled, .mango-icon-button-special-XL:disabled, .mango-button-negative-XL:disabled, .mango-button-spotlight-XL:disabled, .mango-button-special-XL[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-XL, [aria-disabled=true].mango-button-negative-XL, [aria-disabled=true].mango-button-spotlight-XL {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-special-XL .soundtrap-icon, .mango-icon-button-special-XL .soundtrap-icon, .mango-button-negative-XL .soundtrap-icon, .mango-button-spotlight-XL .soundtrap-icon {
  margin-right: 10px;
}
.mango-button-special-XL.button_circular, .button_circular.mango-icon-button-special-XL, .button_circular.mango-button-negative-XL, .button_circular.mango-button-spotlight-XL {
  width: 44px;
}

.mango-button-special-L, .mango-icon-button-special-L, .mango-button-negative-L, .mango-button-spotlight-L {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
  line-height: 32px;
  height: 34px;
  min-width: 100px;
  letter-spacing: 0;
}
.mango-button-special-L .soundtrap-icon, .mango-icon-button-special-L .soundtrap-icon, .mango-button-negative-L .soundtrap-icon, .mango-button-spotlight-L .soundtrap-icon {
  line-height: inherit;
}
.mango-button-special-L:hover, .mango-icon-button-special-L:hover, .mango-button-negative-L:hover, .mango-button-spotlight-L:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-special-L:focus, .mango-icon-button-special-L:focus, .mango-button-negative-L:focus, .mango-button-spotlight-L:focus {
  color: var(--text-base);
}
.mango-button-special-L:active, .mango-icon-button-special-L:active, .mango-button-negative-L:active, .mango-button-spotlight-L:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-special-L:disabled, .mango-icon-button-special-L:disabled, .mango-button-negative-L:disabled, .mango-button-spotlight-L:disabled, .mango-button-special-L[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-L, [aria-disabled=true].mango-button-negative-L, [aria-disabled=true].mango-button-spotlight-L {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-special-L.button_circular, .button_circular.mango-icon-button-special-L, .button_circular.mango-button-negative-L, .button_circular.mango-button-spotlight-L {
  min-width: auto;
  padding: 0;
  text-align: center;
  width: 34px;
}
.mango-button-special-L.button_circular .soundtrap-icon, .button_circular.mango-icon-button-special-L .soundtrap-icon, .button_circular.mango-button-negative-L .soundtrap-icon, .button_circular.mango-button-spotlight-L .soundtrap-icon {
  margin-right: 0;
}

.mango-button-special-M, .mango-icon-button-special-M, .mango-button-negative-M, .mango-button-spotlight-M {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  font-size: 12px;
  height: 26px;
  letter-spacing: 0;
  min-width: 90px;
  padding-bottom: 1px;
  padding-left: 14px;
  padding-right: 14px;
}
.mango-button-special-M .soundtrap-icon, .mango-icon-button-special-M .soundtrap-icon, .mango-button-negative-M .soundtrap-icon, .mango-button-spotlight-M .soundtrap-icon {
  line-height: inherit;
}
.mango-button-special-M:hover, .mango-icon-button-special-M:hover, .mango-button-negative-M:hover, .mango-button-spotlight-M:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-special-M:focus, .mango-icon-button-special-M:focus, .mango-button-negative-M:focus, .mango-button-spotlight-M:focus {
  color: var(--text-base);
}
.mango-button-special-M:active, .mango-icon-button-special-M:active, .mango-button-negative-M:active, .mango-button-spotlight-M:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-special-M:disabled, .mango-icon-button-special-M:disabled, .mango-button-negative-M:disabled, .mango-button-spotlight-M:disabled, .mango-button-special-M[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-M, [aria-disabled=true].mango-button-negative-M, [aria-disabled=true].mango-button-spotlight-M {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-special-M.button_circular, .button_circular.mango-icon-button-special-M, .button_circular.mango-button-negative-M, .button_circular.mango-button-spotlight-M {
  width: 26px;
}

.mango-button-special-S, .mango-icon-button-special-S, .mango-button-negative-S, .mango-button-spotlight-S {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 1px;
  font-size: 12px;
  line-height: 19px;
  height: 22px;
  min-width: 80px;
  letter-spacing: 0;
}
.mango-button-special-S .soundtrap-icon, .mango-icon-button-special-S .soundtrap-icon, .mango-button-negative-S .soundtrap-icon, .mango-button-spotlight-S .soundtrap-icon {
  line-height: inherit;
}
.mango-button-special-S:hover, .mango-icon-button-special-S:hover, .mango-button-negative-S:hover, .mango-button-spotlight-S:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-special-S:focus, .mango-icon-button-special-S:focus, .mango-button-negative-S:focus, .mango-button-spotlight-S:focus {
  color: var(--text-base);
}
.mango-button-special-S:active, .mango-icon-button-special-S:active, .mango-button-negative-S:active, .mango-button-spotlight-S:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-special-S:disabled, .mango-icon-button-special-S:disabled, .mango-button-negative-S:disabled, .mango-button-spotlight-S:disabled, .mango-button-special-S[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-S, [aria-disabled=true].mango-button-negative-S, [aria-disabled=true].mango-button-spotlight-S {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-special-S.button_circular, .button_circular.mango-icon-button-special-S, .button_circular.mango-button-negative-S, .button_circular.mango-button-spotlight-S {
  width: 22px;
}

.mango-button-regular-S, .mango-icon-button-regular-S {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 1px;
  font-size: 12px;
  line-height: 19px;
  height: 22px;
  min-width: 80px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
}
.mango-button-regular-S .soundtrap-icon, .mango-icon-button-regular-S .soundtrap-icon {
  line-height: inherit;
}
.mango-button-regular-S:hover, .mango-icon-button-regular-S:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-regular-S:focus, .mango-icon-button-regular-S:focus {
  color: var(--text-base);
}
.mango-button-regular-S:active, .mango-icon-button-regular-S:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-regular-S:disabled, .mango-icon-button-regular-S:disabled, .mango-button-regular-S[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-S {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-regular-S.button_circular, .button_circular.mango-icon-button-regular-S {
  width: 22px;
}
.mango-button-regular-S:focus, .mango-icon-button-regular-S:focus {
  color: var(--text-base);
}
.mango-button-regular-S.selected, .selected.mango-icon-button-regular-S {
  background-color: var(--background-press);
}
.mango-button-regular-S.selected:hover, .selected.mango-icon-button-regular-S:hover {
  background-color: var(--background-press);
}
.mango-button-regular-S:hover, .mango-icon-button-regular-S:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-regular-S:active, .mango-icon-button-regular-S:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-regular-S:disabled, .mango-icon-button-regular-S:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.mango-button-regular-M, .mango-icon-button-regular-M {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  font-size: 12px;
  height: 26px;
  letter-spacing: 0;
  min-width: 90px;
  padding-bottom: 1px;
  padding-left: 14px;
  padding-right: 14px;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
}
.mango-button-regular-M .soundtrap-icon, .mango-icon-button-regular-M .soundtrap-icon {
  line-height: inherit;
}
.mango-button-regular-M:hover, .mango-icon-button-regular-M:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-regular-M:focus, .mango-icon-button-regular-M:focus {
  color: var(--text-base);
}
.mango-button-regular-M:active, .mango-icon-button-regular-M:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-regular-M:disabled, .mango-icon-button-regular-M:disabled, .mango-button-regular-M[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-M {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-regular-M.button_circular, .button_circular.mango-icon-button-regular-M {
  width: 26px;
}
.mango-button-regular-M:focus, .mango-icon-button-regular-M:focus {
  color: var(--text-base);
}
.mango-button-regular-M.selected, .selected.mango-icon-button-regular-M {
  background-color: var(--background-press);
}
.mango-button-regular-M.selected:hover, .selected.mango-icon-button-regular-M:hover {
  background-color: var(--background-press);
}
.mango-button-regular-M:hover, .mango-icon-button-regular-M:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-regular-M:active, .mango-icon-button-regular-M:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-regular-M:disabled, .mango-icon-button-regular-M:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.mango-button-regular-L, .mango-icon-button-regular-L {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
  line-height: 32px;
  height: 34px;
  min-width: 100px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
}
.mango-button-regular-L .soundtrap-icon, .mango-icon-button-regular-L .soundtrap-icon {
  line-height: inherit;
}
.mango-button-regular-L:hover, .mango-icon-button-regular-L:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-regular-L:focus, .mango-icon-button-regular-L:focus {
  color: var(--text-base);
}
.mango-button-regular-L:active, .mango-icon-button-regular-L:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-regular-L:disabled, .mango-icon-button-regular-L:disabled, .mango-button-regular-L[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-L {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-regular-L.button_circular, .button_circular.mango-icon-button-regular-L {
  min-width: auto;
  padding: 0;
  text-align: center;
  width: 34px;
}
.mango-button-regular-L.button_circular .soundtrap-icon, .button_circular.mango-icon-button-regular-L .soundtrap-icon {
  margin-right: 0;
}
.mango-button-regular-L:focus, .mango-icon-button-regular-L:focus {
  color: var(--text-base);
}
.mango-button-regular-L.selected, .selected.mango-icon-button-regular-L {
  background-color: var(--background-press);
}
.mango-button-regular-L.selected:hover, .selected.mango-icon-button-regular-L:hover {
  background-color: var(--background-press);
}
.mango-button-regular-L:hover, .mango-icon-button-regular-L:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-regular-L:active, .mango-icon-button-regular-L:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-regular-L:disabled, .mango-icon-button-regular-L:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.mango-button-regular-XL, .mango-icon-button-regular-XL {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 17px;
  height: 44px;
  min-width: 120px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
}
.mango-button-regular-XL .soundtrap-icon, .mango-icon-button-regular-XL .soundtrap-icon {
  line-height: inherit;
}
.mango-button-regular-XL:hover, .mango-icon-button-regular-XL:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-regular-XL:focus, .mango-icon-button-regular-XL:focus {
  color: var(--text-base);
}
.mango-button-regular-XL:active, .mango-icon-button-regular-XL:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-regular-XL:disabled, .mango-icon-button-regular-XL:disabled, .mango-button-regular-XL[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-XL {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-regular-XL .soundtrap-icon, .mango-icon-button-regular-XL .soundtrap-icon {
  margin-right: 10px;
}
.mango-button-regular-XL.button_circular, .button_circular.mango-icon-button-regular-XL {
  width: 44px;
}
.mango-button-regular-XL:focus, .mango-icon-button-regular-XL:focus {
  color: var(--text-base);
}
.mango-button-regular-XL.selected, .selected.mango-icon-button-regular-XL {
  background-color: var(--background-press);
}
.mango-button-regular-XL.selected:hover, .selected.mango-icon-button-regular-XL:hover {
  background-color: var(--background-press);
}
.mango-button-regular-XL:hover, .mango-icon-button-regular-XL:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-regular-XL:active, .mango-icon-button-regular-XL:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-regular-XL:disabled, .mango-icon-button-regular-XL:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.mango-button-emphasised-S {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 1px;
  font-size: 12px;
  line-height: 19px;
  height: 22px;
  min-width: 80px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
  background-color: var(--background-tinted-base);
}
.mango-button-emphasised-S .soundtrap-icon {
  line-height: inherit;
}
.mango-button-emphasised-S:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-emphasised-S:focus {
  color: var(--text-base);
}
.mango-button-emphasised-S:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-emphasised-S:disabled, .mango-button-emphasised-S[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-S.button_circular {
  width: 22px;
}
.mango-button-emphasised-S:focus {
  color: var(--text-base);
}
.mango-button-emphasised-S.selected {
  background-color: var(--background-press);
}
.mango-button-emphasised-S.selected:hover {
  background-color: var(--background-press);
}
.mango-button-emphasised-S:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-emphasised-S:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-emphasised-S:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-S:hover {
  background-color: var(--background-tinted-highlight);
}

.mango-button-emphasised-M {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  font-size: 12px;
  height: 26px;
  letter-spacing: 0;
  min-width: 90px;
  padding-bottom: 1px;
  padding-left: 14px;
  padding-right: 14px;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
  background-color: var(--background-tinted-base);
}
.mango-button-emphasised-M .soundtrap-icon {
  line-height: inherit;
}
.mango-button-emphasised-M:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-emphasised-M:focus {
  color: var(--text-base);
}
.mango-button-emphasised-M:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-emphasised-M:disabled, .mango-button-emphasised-M[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-M.button_circular {
  width: 26px;
}
.mango-button-emphasised-M:focus {
  color: var(--text-base);
}
.mango-button-emphasised-M.selected {
  background-color: var(--background-press);
}
.mango-button-emphasised-M.selected:hover {
  background-color: var(--background-press);
}
.mango-button-emphasised-M:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-emphasised-M:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-emphasised-M:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-M:hover {
  background-color: var(--background-tinted-highlight);
}

.mango-button-emphasised-L {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
  line-height: 32px;
  height: 34px;
  min-width: 100px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
  background-color: var(--background-tinted-base);
}
.mango-button-emphasised-L .soundtrap-icon {
  line-height: inherit;
}
.mango-button-emphasised-L:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-emphasised-L:focus {
  color: var(--text-base);
}
.mango-button-emphasised-L:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-emphasised-L:disabled, .mango-button-emphasised-L[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-L.button_circular {
  min-width: auto;
  padding: 0;
  text-align: center;
  width: 34px;
}
.mango-button-emphasised-L.button_circular .soundtrap-icon {
  margin-right: 0;
}
.mango-button-emphasised-L:focus {
  color: var(--text-base);
}
.mango-button-emphasised-L.selected {
  background-color: var(--background-press);
}
.mango-button-emphasised-L.selected:hover {
  background-color: var(--background-press);
}
.mango-button-emphasised-L:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-emphasised-L:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-emphasised-L:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-L:hover {
  background-color: var(--background-tinted-highlight);
}

.mango-button-emphasised-XL {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 17px;
  height: 44px;
  min-width: 120px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: var(--essential-subdued);
  color: var(--text-base) !important;
  background-color: var(--background-tinted-base);
}
.mango-button-emphasised-XL .soundtrap-icon {
  line-height: inherit;
}
.mango-button-emphasised-XL:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-emphasised-XL:focus {
  color: var(--text-base);
}
.mango-button-emphasised-XL:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-emphasised-XL:disabled, .mango-button-emphasised-XL[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-XL .soundtrap-icon {
  margin-right: 10px;
}
.mango-button-emphasised-XL.button_circular {
  width: 44px;
}
.mango-button-emphasised-XL:focus {
  color: var(--text-base);
}
.mango-button-emphasised-XL.selected {
  background-color: var(--background-press);
}
.mango-button-emphasised-XL.selected:hover {
  background-color: var(--background-press);
}
.mango-button-emphasised-XL:hover {
  color: var(--text-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-emphasised-XL:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-emphasised-XL:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-emphasised-XL:hover {
  background-color: var(--background-tinted-highlight);
}

.mango-button-weak-S, .mango-icon-button-emphasized-S, .mango-icon-button-weak-S {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 1px;
  font-size: 12px;
  line-height: 19px;
  height: 22px;
  min-width: 80px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: transparent;
  color: var(--text-base);
}
.mango-button-weak-S .soundtrap-icon, .mango-icon-button-emphasized-S .soundtrap-icon, .mango-icon-button-weak-S .soundtrap-icon {
  line-height: inherit;
}
.mango-button-weak-S:hover, .mango-icon-button-emphasized-S:hover, .mango-icon-button-weak-S:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-weak-S:focus, .mango-icon-button-emphasized-S:focus, .mango-icon-button-weak-S:focus {
  color: var(--text-base);
}
.mango-button-weak-S:active, .mango-icon-button-emphasized-S:active, .mango-icon-button-weak-S:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-weak-S:disabled, .mango-icon-button-emphasized-S:disabled, .mango-icon-button-weak-S:disabled, .mango-button-weak-S[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-S, [aria-disabled=true].mango-icon-button-weak-S {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-weak-S.button_circular, .button_circular.mango-icon-button-emphasized-S, .button_circular.mango-icon-button-weak-S {
  width: 22px;
}
.mango-button-weak-S:focus, .mango-icon-button-emphasized-S:focus, .mango-icon-button-weak-S:focus {
  color: var(--text-base);
}
.mango-button-weak-S.selected, .selected.mango-icon-button-emphasized-S, .selected.mango-icon-button-weak-S {
  background-color: var(--background-press);
}
.mango-button-weak-S.selected:hover, .selected.mango-icon-button-emphasized-S:hover, .selected.mango-icon-button-weak-S:hover {
  background-color: var(--background-press);
}
.mango-button-weak-S:hover, .mango-icon-button-emphasized-S:hover, .mango-icon-button-weak-S:hover {
  color: var(--text-base);
  border-color: var(--essential-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-weak-S:active, .mango-icon-button-emphasized-S:active, .mango-icon-button-weak-S:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-weak-S:disabled, .mango-icon-button-emphasized-S:disabled, .mango-icon-button-weak-S:disabled, .mango-button-weak-S.disabled, .disabled.mango-icon-button-emphasized-S, .disabled.mango-icon-button-weak-S {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
  color: var(--text-base) !important;
}

.mango-button-weak-M, .mango-icon-button-emphasized-M, .mango-icon-button-weak-M {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  font-size: 12px;
  height: 26px;
  letter-spacing: 0;
  min-width: 90px;
  padding-bottom: 1px;
  padding-left: 14px;
  padding-right: 14px;
  background-color: transparent;
  border-color: transparent;
  color: var(--text-base);
}
.mango-button-weak-M .soundtrap-icon, .mango-icon-button-emphasized-M .soundtrap-icon, .mango-icon-button-weak-M .soundtrap-icon {
  line-height: inherit;
}
.mango-button-weak-M:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-weak-M:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-weak-M:focus, .mango-icon-button-emphasized-M:focus, .mango-icon-button-weak-M:focus {
  color: var(--text-base);
}
.mango-button-weak-M:active, .mango-icon-button-emphasized-M:active, .mango-icon-button-weak-M:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-weak-M:disabled, .mango-icon-button-emphasized-M:disabled, .mango-icon-button-weak-M:disabled, .mango-button-weak-M[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-M, [aria-disabled=true].mango-icon-button-weak-M {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-weak-M.button_circular, .button_circular.mango-icon-button-emphasized-M, .button_circular.mango-icon-button-weak-M {
  width: 26px;
}
.mango-button-weak-M:focus, .mango-icon-button-emphasized-M:focus, .mango-icon-button-weak-M:focus {
  color: var(--text-base);
}
.mango-button-weak-M.selected, .selected.mango-icon-button-emphasized-M, .selected.mango-icon-button-weak-M {
  background-color: var(--background-press);
}
.mango-button-weak-M.selected:hover, .selected.mango-icon-button-emphasized-M:hover, .selected.mango-icon-button-weak-M:hover {
  background-color: var(--background-press);
}
.mango-button-weak-M:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-weak-M:hover {
  color: var(--text-base);
  border-color: var(--essential-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-weak-M:active, .mango-icon-button-emphasized-M:active, .mango-icon-button-weak-M:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-weak-M:disabled, .mango-icon-button-emphasized-M:disabled, .mango-icon-button-weak-M:disabled, .mango-button-weak-M.disabled, .disabled.mango-icon-button-emphasized-M, .disabled.mango-icon-button-weak-M {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
  color: var(--text-base) !important;
}

.mango-button-weak-L, .mango-icon-button-emphasized-L, .mango-icon-button-weak-L {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
  line-height: 32px;
  height: 34px;
  min-width: 100px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: transparent;
  color: var(--text-base);
}
.mango-button-weak-L .soundtrap-icon, .mango-icon-button-emphasized-L .soundtrap-icon, .mango-icon-button-weak-L .soundtrap-icon {
  line-height: inherit;
}
.mango-button-weak-L:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-weak-L:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-weak-L:focus, .mango-icon-button-emphasized-L:focus, .mango-icon-button-weak-L:focus {
  color: var(--text-base);
}
.mango-button-weak-L:active, .mango-icon-button-emphasized-L:active, .mango-icon-button-weak-L:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-weak-L:disabled, .mango-icon-button-emphasized-L:disabled, .mango-icon-button-weak-L:disabled, .mango-button-weak-L[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-L, [aria-disabled=true].mango-icon-button-weak-L {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-weak-L.button_circular, .button_circular.mango-icon-button-emphasized-L, .button_circular.mango-icon-button-weak-L {
  min-width: auto;
  padding: 0;
  text-align: center;
  width: 34px;
}
.mango-button-weak-L.button_circular .soundtrap-icon, .button_circular.mango-icon-button-emphasized-L .soundtrap-icon, .button_circular.mango-icon-button-weak-L .soundtrap-icon {
  margin-right: 0;
}
.mango-button-weak-L:focus, .mango-icon-button-emphasized-L:focus, .mango-icon-button-weak-L:focus {
  color: var(--text-base);
}
.mango-button-weak-L.selected, .selected.mango-icon-button-emphasized-L, .selected.mango-icon-button-weak-L {
  background-color: var(--background-press);
}
.mango-button-weak-L.selected:hover, .selected.mango-icon-button-emphasized-L:hover, .selected.mango-icon-button-weak-L:hover {
  background-color: var(--background-press);
}
.mango-button-weak-L:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-weak-L:hover {
  color: var(--text-base);
  border-color: var(--essential-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-weak-L:active, .mango-icon-button-emphasized-L:active, .mango-icon-button-weak-L:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-weak-L:disabled, .mango-icon-button-emphasized-L:disabled, .mango-icon-button-weak-L:disabled, .mango-button-weak-L.disabled, .disabled.mango-icon-button-emphasized-L, .disabled.mango-icon-button-weak-L {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
  color: var(--text-base) !important;
}

.mango-button-weak-XL, .mango-icon-button-emphasized-XL, .mango-icon-button-weak-XL {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 17px;
  height: 44px;
  min-width: 120px;
  letter-spacing: 0;
  background-color: transparent;
  border-color: transparent;
  color: var(--text-base);
}
.mango-button-weak-XL .soundtrap-icon, .mango-icon-button-emphasized-XL .soundtrap-icon, .mango-icon-button-weak-XL .soundtrap-icon {
  line-height: inherit;
}
.mango-button-weak-XL:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-weak-XL:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-weak-XL:focus, .mango-icon-button-emphasized-XL:focus, .mango-icon-button-weak-XL:focus {
  color: var(--text-base);
}
.mango-button-weak-XL:active, .mango-icon-button-emphasized-XL:active, .mango-icon-button-weak-XL:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-weak-XL:disabled, .mango-icon-button-emphasized-XL:disabled, .mango-icon-button-weak-XL:disabled, .mango-button-weak-XL[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-XL, [aria-disabled=true].mango-icon-button-weak-XL {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.mango-button-weak-XL .soundtrap-icon, .mango-icon-button-emphasized-XL .soundtrap-icon, .mango-icon-button-weak-XL .soundtrap-icon {
  margin-right: 10px;
}
.mango-button-weak-XL.button_circular, .button_circular.mango-icon-button-emphasized-XL, .button_circular.mango-icon-button-weak-XL {
  width: 44px;
}
.mango-button-weak-XL:focus, .mango-icon-button-emphasized-XL:focus, .mango-icon-button-weak-XL:focus {
  color: var(--text-base);
}
.mango-button-weak-XL.selected, .selected.mango-icon-button-emphasized-XL, .selected.mango-icon-button-weak-XL {
  background-color: var(--background-press);
}
.mango-button-weak-XL.selected:hover, .selected.mango-icon-button-emphasized-XL:hover, .selected.mango-icon-button-weak-XL:hover {
  background-color: var(--background-press);
}
.mango-button-weak-XL:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-weak-XL:hover {
  color: var(--text-base);
  border-color: var(--essential-base);
  background-color: var(--background-highlight);
  opacity: 1;
}
.mango-button-weak-XL:active, .mango-icon-button-emphasized-XL:active, .mango-icon-button-weak-XL:active {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.mango-button-weak-XL:disabled, .mango-icon-button-emphasized-XL:disabled, .mango-icon-button-weak-XL:disabled, .mango-button-weak-XL.disabled, .disabled.mango-icon-button-emphasized-XL, .disabled.mango-icon-button-weak-XL {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
  color: var(--text-base) !important;
}

.mango-button-spotlight {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-base);
  color: var(--text-base);
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out;
}
.mango-button-spotlight .soundtrap-icon {
  line-height: inherit;
}
.mango-button-spotlight:hover {
  background-color: var(--background-highlight);
  color: var(--text-base);
  transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out;
}
.mango-button-spotlight:focus {
  color: var(--text-base);
}
.mango-button-spotlight:active {
  box-shadow: none;
  outline: 0 !important;
  color: var(--text-base);
  background-color: var(--background-press);
}
.mango-button-spotlight:disabled, .mango-button-spotlight[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.button-naked {
  background: none;
  appearance: none;
  border: none;
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  padding: 0;
}

.mango-label-base, .mango-label-small, .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectorpresetitem .new-preset-badge, .mango-label-medium {
  font-weight: 500;
  color: var(--text-base);
  letter-spacing: 0.2px;
}

.mango-label-medium {
  font-size: 13px;
}

.mango-label-small, .presetselectordialog .dialogcontent .new-preset-announcement-badge, .presetselectorpresetitem .new-preset-badge {
  font-size: 11px;
}

.mango-icon-button-special, .mango-icon-button-special-XL, .mango-icon-button-special-L, .mango-icon-button-special-M, .mango-icon-button-special-S {
  min-width: auto;
  background-color: var(--text-base);
  color: var(--background-base);
  border: 1px solid var(--background-base);
}
.mango-icon-button-special:active, .mango-icon-button-special-XL:active, .mango-icon-button-special-L:active, .mango-icon-button-special-M:active, .mango-icon-button-special-S:active, .mango-icon-button-special:focus, .mango-icon-button-special-XL:focus, .mango-icon-button-special-L:focus, .mango-icon-button-special-M:focus, .mango-icon-button-special-S:focus {
  color: var(--background-base);
  background-color: var(--text-base);
}
.mango-icon-button-special.selected, .selected.mango-icon-button-special-XL, .selected.mango-icon-button-special-L, .selected.mango-icon-button-special-M, .selected.mango-icon-button-special-S {
  background-color: var(--background-base);
  color: var(--text-base);
  border: 1px solid var(--background-base);
}
.mango-icon-button-special.selected:hover, .selected.mango-icon-button-special-XL:hover, .selected.mango-icon-button-special-L:hover, .selected.mango-icon-button-special-M:hover, .selected.mango-icon-button-special-S:hover {
  background-color: var(--background-base);
}
.mango-icon-button-special .soundtrap-icon, .mango-icon-button-special-XL .soundtrap-icon, .mango-icon-button-special-L .soundtrap-icon, .mango-icon-button-special-M .soundtrap-icon, .mango-icon-button-special-S .soundtrap-icon {
  margin: 0;
}

.mango-icon-button-regular, .mango-icon-button-regular-XL, .mango-icon-button-regular-L, .mango-icon-button-regular-M, .mango-icon-button-regular-S {
  color: var(--text-subdued);
  border: 1px solid var(--essential-subdued);
  min-width: auto;
}
.mango-icon-button-regular:active, .mango-icon-button-regular-XL:active, .mango-icon-button-regular-L:active, .mango-icon-button-regular-M:active, .mango-icon-button-regular-S:active, .mango-icon-button-regular:hover, .mango-icon-button-regular-XL:hover, .mango-icon-button-regular-L:hover, .mango-icon-button-regular-M:hover, .mango-icon-button-regular-S:hover {
  color: var(--text-base);
  background-color: var(--background-tinted-highlight);
}
.mango-icon-button-regular.selected, .selected.mango-icon-button-regular-XL, .selected.mango-icon-button-regular-L, .selected.mango-icon-button-regular-M, .selected.mango-icon-button-regular-S {
  background-color: var(--text-subdued);
  color: var(--background-base) !important;
  border: 1px solid var(--text-subdued);
}
.mango-icon-button-regular.selected:active, .selected.mango-icon-button-regular-XL:active, .selected.mango-icon-button-regular-L:active, .selected.mango-icon-button-regular-M:active, .selected.mango-icon-button-regular-S:active, .mango-icon-button-regular.selected:hover, .selected.mango-icon-button-regular-XL:hover, .selected.mango-icon-button-regular-L:hover, .selected.mango-icon-button-regular-M:hover, .selected.mango-icon-button-regular-S:hover {
  background-color: var(--text-subdued);
  color: var(--background-base);
}

.mango-icon-button-weak, .mango-icon-button-weak-XL, .mango-icon-button-weak-L, .mango-icon-button-weak-M, .mango-icon-button-weak-S {
  min-width: auto;
  background-color: transparent;
  color: var(--text-subdued);
  border: 1px solid transparent;
  padding: 0 6px;
}
.mango-icon-button-weak:active, .mango-icon-button-weak-XL:active, .mango-icon-button-weak-L:active, .mango-icon-button-weak-M:active, .mango-icon-button-weak-S:active, .mango-icon-button-weak:hover, .mango-icon-button-weak-XL:hover, .mango-icon-button-weak-L:hover, .mango-icon-button-weak-M:hover, .mango-icon-button-weak-S:hover {
  color: var(--text-base);
  background-color: var(--background-tinted-highlight);
  border-color: transparent;
}
.mango-icon-button-weak.selected, .selected.mango-icon-button-weak-XL, .selected.mango-icon-button-weak-L, .selected.mango-icon-button-weak-M, .selected.mango-icon-button-weak-S {
  background-color: var(--text-subdued);
  color: var(--background-base);
  border: 1px solid var(--text-subdued);
}
.mango-icon-button-weak.selected:active, .selected.mango-icon-button-weak-XL:active, .selected.mango-icon-button-weak-L:active, .selected.mango-icon-button-weak-M:active, .selected.mango-icon-button-weak-S:active, .mango-icon-button-weak.selected:hover, .selected.mango-icon-button-weak-XL:hover, .selected.mango-icon-button-weak-L:hover, .selected.mango-icon-button-weak-M:hover, .selected.mango-icon-button-weak-S:hover {
  background-color: var(--text-subdued);
}
.mango-icon-button-weak:disabled, .mango-icon-button-weak-XL:disabled, .mango-icon-button-weak-L:disabled, .mango-icon-button-weak-M:disabled, .mango-icon-button-weak-S:disabled, .mango-icon-button-weak.disabled, .disabled.mango-icon-button-weak-XL, .disabled.mango-icon-button-weak-L, .disabled.mango-icon-button-weak-M, .disabled.mango-icon-button-weak-S {
  background-color: transparent;
}
.mango-icon-button-weak .soundtrap-icon, .mango-icon-button-weak-XL .soundtrap-icon, .mango-icon-button-weak-L .soundtrap-icon, .mango-icon-button-weak-M .soundtrap-icon, .mango-icon-button-weak-S .soundtrap-icon {
  margin: 0;
}

.mango-icon-button-emphasized, .mango-icon-button-emphasized-XL, .mango-icon-button-emphasized-L, .mango-icon-button-emphasized-M, .mango-icon-button-emphasized-S {
  min-width: auto;
  background-color: var(--background-tinted-base);
  color: var(--text-subdued);
  border: 1px solid var(--essential-subdued);
}
.mango-icon-button-emphasized:active, .mango-icon-button-emphasized-XL:active, .mango-icon-button-emphasized-L:active, .mango-icon-button-emphasized-M:active, .mango-icon-button-emphasized-S:active, .mango-icon-button-emphasized:focus, .mango-icon-button-emphasized-XL:focus, .mango-icon-button-emphasized-L:focus, .mango-icon-button-emphasized-M:focus, .mango-icon-button-emphasized-S:focus, .mango-icon-button-emphasized:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-emphasized-S:hover {
  color: var(--text-base);
  background-color: var(--background-tinted-highlight);
  border-color: var(--essential-subdued);
}
.mango-icon-button-emphasized.selected, .selected.mango-icon-button-emphasized-XL, .selected.mango-icon-button-emphasized-L, .selected.mango-icon-button-emphasized-M, .selected.mango-icon-button-emphasized-S {
  background-color: var(--essential-primary);
  color: var(--background-base);
  border: 1px solid var(--essential-primary);
}
.mango-icon-button-emphasized.selected:active, .selected.mango-icon-button-emphasized-XL:active, .selected.mango-icon-button-emphasized-L:active, .selected.mango-icon-button-emphasized-M:active, .selected.mango-icon-button-emphasized-S:active, .mango-icon-button-emphasized.selected:focus, .selected.mango-icon-button-emphasized-XL:focus, .selected.mango-icon-button-emphasized-L:focus, .selected.mango-icon-button-emphasized-M:focus, .selected.mango-icon-button-emphasized-S:focus, .mango-icon-button-emphasized.selected:hover, .selected.mango-icon-button-emphasized-XL:hover, .selected.mango-icon-button-emphasized-L:hover, .selected.mango-icon-button-emphasized-M:hover, .selected.mango-icon-button-emphasized-S:hover {
  background-color: var(--essential-primary);
}
.mango-icon-button-emphasized .soundtrap-icon, .mango-icon-button-emphasized-XL .soundtrap-icon, .mango-icon-button-emphasized-L .soundtrap-icon, .mango-icon-button-emphasized-M .soundtrap-icon, .mango-icon-button-emphasized-S .soundtrap-icon {
  margin: 0;
}

.mango-toolbar .fatfingerbutton:first-child button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right: none;
}
.mango-toolbar .fatfingerbutton:last-child button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.mango-toolbar .fatfingerbutton:not(:first-child):not(:last-child) button {
  border-radius: 0;
  border-right: none;
}
.mango-toolbar .toolbar-icon {
  line-height: 1;
}

.mango-checkbox {
  display: inline-flex;
}
.mango-checkbox .mango-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--decorative-base);
  border-radius: 3px;
  cursor: pointer;
  color: var(--background-elevated-base);
  text-align: center;
  vertical-align: middle;
  margin: 0;
  transition: background-color 0.1s;
  border: solid 1px var(--essential-subdued);
  margin-right: 10px;
}
.mango-checkbox .mango-checkbox-input:hover {
  background-color: var(--background-tinted-base);
}
.mango-checkbox .mango-checkbox-input[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: inherit;
}
.mango-checkbox .mango-checkbox-input:checked {
  background-color: var(--background-tinted-base);
}
.mango-checkbox .mango-checkbox-input:checked:after {
  font-family: "soundtrap-icons";
  font-size: 12px;
  content: "\e053";
  top: 50%;
  margin-top: -6px;
}
.mango-checkbox .mango-checkbox-input:hover {
  border-color: var(--essential-primary);
}
.mango-checkbox .mango-checkbox-input:checked {
  border-color: var(--essential-primary);
  background-color: var(--essential-primary);
}

:root {
  --default-box-shadow-color: rgba(0, 0, 0, .25);
}

:root {
  --disabled-opacity: 0.5;
}

.st-light-theme .piano-keys, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .piano-keys, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .piano-keys, .synth84enginegui .container .control-container .control-area .button-wrapper button .piano-keys, .st-light-theme .keyboardkeyboardcontroller .keyring, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .keyboardkeyboardcontroller .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .keyboardkeyboardcontroller .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper button .keyboardkeyboardcontroller .keyring, .keyboardkeyboardcontroller .st-light-theme .keyring, .keyboardkeyboardcontroller .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .keyring, .horizontal-paywall-dialog .inner .body .artwork-background .keyboardkeyboardcontroller .artwork-title-container .keyring, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller .button-pressed .keyring, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper button .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller button .keyring, .st-light-theme .keyboardkeyboardcontroller .whitekey, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .keyboardkeyboardcontroller .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .keyboardkeyboardcontroller .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper button .keyboardkeyboardcontroller .whitekey, .keyboardkeyboardcontroller .st-light-theme .whitekey, .keyboardkeyboardcontroller .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .whitekey, .horizontal-paywall-dialog .inner .body .artwork-background .keyboardkeyboardcontroller .artwork-title-container .whitekey, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller .button-pressed .whitekey, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper button .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller button .whitekey,
.st-light-theme .keyboardkeyboardcontroller .blackkey,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .keyboardkeyboardcontroller .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .keyboardkeyboardcontroller .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper button .keyboardkeyboardcontroller .blackkey,
.keyboardkeyboardcontroller .st-light-theme .blackkey,
.keyboardkeyboardcontroller .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .blackkey,
.horizontal-paywall-dialog .inner .body .artwork-background .keyboardkeyboardcontroller .artwork-title-container .blackkey,
.keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller .button-pressed .blackkey,
.keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper button .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller button .blackkey, .st-light-theme .pianoroll .keys .white-key, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .pianoroll .keys .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .pianoroll .keys .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper button .pianoroll .keys .white-key, .pianoroll .keys .st-light-theme .white-key, .pianoroll .keys .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .white-key, .horizontal-paywall-dialog .inner .body .artwork-background .pianoroll .keys .artwork-title-container .white-key, .pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys .button-pressed .white-key, .pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper button .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys button .white-key,
.st-light-theme .pianoroll .keys .black-key,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .pianoroll .keys .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .pianoroll .keys .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper button .pianoroll .keys .black-key,
.pianoroll .keys .st-light-theme .black-key,
.pianoroll .keys .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .black-key,
.horizontal-paywall-dialog .inner .body .artwork-background .pianoroll .keys .artwork-title-container .black-key,
.pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys .button-pressed .black-key,
.pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper button .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys button .black-key {
  --white-key: hsl(0, 0%, 100%);
  --white-key-pressed: hsl(0, 0%, 82%);
  --white-key-hovered: hsl(0, 0%, 95%);
  --white-key-border: hsl(0, 0%, 82%);
  --white-key-text: hsl(0, 0%, 36%);
  --white-key-middle-c: hsl(120, 85%, 92%);
  --white-key-middle-c-hovered: hsl(120, 84%, 88%);
  --white-key-middle-c-pressed: hsl(120, 84%, 85%);
  --white-key-highlight: hsl(272, 87%, 25%);
  --black-key: hsl(0, 0%, 18%);
  --black-key-pressed: hsl(0, 0%, 61%);
  --black-key-hovered: hsl(0, 0%, 40%);
  --black-key-text: hsl(0, 0%, 97%);
  --black-key-highlight: hsl(258, 69%, 78%);
}

.st-light-theme .with-808-styling .piano-keys, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .piano-keys, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .piano-keys, .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .piano-keys, .st-light-theme .with-808-styling .keyboardkeyboardcontroller .keyring, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .keyboardkeyboardcontroller .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .keyboardkeyboardcontroller .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .keyboardkeyboardcontroller .keyring, .keyboardkeyboardcontroller .st-light-theme .with-808-styling .keyring, .keyboardkeyboardcontroller .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .keyring, .horizontal-paywall-dialog .inner .body .artwork-background .keyboardkeyboardcontroller .artwork-title-container .with-808-styling .keyring, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller .button-pressed .with-808-styling .keyring, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .keyring, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller button .with-808-styling .keyring, .st-light-theme .with-808-styling .keyboardkeyboardcontroller .whitekey, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .keyboardkeyboardcontroller .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .keyboardkeyboardcontroller .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .keyboardkeyboardcontroller .whitekey, .keyboardkeyboardcontroller .st-light-theme .with-808-styling .whitekey, .keyboardkeyboardcontroller .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .whitekey, .horizontal-paywall-dialog .inner .body .artwork-background .keyboardkeyboardcontroller .artwork-title-container .with-808-styling .whitekey, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller .button-pressed .with-808-styling .whitekey, .keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .whitekey, .synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller button .with-808-styling .whitekey,
.st-light-theme .with-808-styling .keyboardkeyboardcontroller .blackkey,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .keyboardkeyboardcontroller .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .keyboardkeyboardcontroller .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .keyboardkeyboardcontroller .blackkey,
.keyboardkeyboardcontroller .st-light-theme .with-808-styling .blackkey,
.keyboardkeyboardcontroller .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .blackkey,
.horizontal-paywall-dialog .inner .body .artwork-background .keyboardkeyboardcontroller .artwork-title-container .with-808-styling .blackkey,
.keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller .button-pressed .with-808-styling .blackkey,
.keyboardkeyboardcontroller .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .blackkey,
.synth84enginegui .container .control-container .control-area .button-wrapper .keyboardkeyboardcontroller button .with-808-styling .blackkey, .st-light-theme .with-808-styling .pianoroll .keys .white-key, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .pianoroll .keys .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .pianoroll .keys .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .pianoroll .keys .white-key, .pianoroll .keys .st-light-theme .with-808-styling .white-key, .pianoroll .keys .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .white-key, .horizontal-paywall-dialog .inner .body .artwork-background .pianoroll .keys .artwork-title-container .with-808-styling .white-key, .pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys .button-pressed .with-808-styling .white-key, .pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .white-key, .synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys button .with-808-styling .white-key,
.st-light-theme .with-808-styling .pianoroll .keys .black-key,
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .pianoroll .keys .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .pianoroll .keys .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .pianoroll .keys .black-key,
.pianoroll .keys .st-light-theme .with-808-styling .black-key,
.pianoroll .keys .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .with-808-styling .black-key,
.horizontal-paywall-dialog .inner .body .artwork-background .pianoroll .keys .artwork-title-container .with-808-styling .black-key,
.pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .with-808-styling .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys .button-pressed .with-808-styling .black-key,
.pianoroll .keys .synth84enginegui .container .control-container .control-area .button-wrapper button .with-808-styling .black-key,
.synth84enginegui .container .control-container .control-area .button-wrapper .pianoroll .keys button .with-808-styling .black-key {
  --white-key-pressed: hsl(34, 92%, 43%);
  --white-key-middle-c-pressed: hsl(34, 92%, 43%);
  --white-key-hovered: hsl(34, 92%, 63%);
  --white-key-middle-c-hovered: hsl(34, 92%, 63%);
}

.st-dark-theme .piano-keys, .sampler-crossfade-icon .piano-keys, .sampler-crossfade-handle-chamfer .piano-keys, .sampler-crossfade-handle .piano-keys, .st-dark-theme .keyboardkeyboardcontroller .keyring, .sampler-crossfade-icon .keyboardkeyboardcontroller .keyring, .sampler-crossfade-handle-chamfer .keyboardkeyboardcontroller .keyring, .sampler-crossfade-handle .keyboardkeyboardcontroller .keyring, .keyboardkeyboardcontroller .st-dark-theme .keyring, .keyboardkeyboardcontroller .sampler-crossfade-icon .keyring, .keyboardkeyboardcontroller .sampler-crossfade-handle-chamfer .keyring, .keyboardkeyboardcontroller .sampler-crossfade-handle .keyring, .st-dark-theme .keyboardkeyboardcontroller .whitekey, .sampler-crossfade-icon .keyboardkeyboardcontroller .whitekey, .sampler-crossfade-handle-chamfer .keyboardkeyboardcontroller .whitekey, .sampler-crossfade-handle .keyboardkeyboardcontroller .whitekey, .keyboardkeyboardcontroller .st-dark-theme .whitekey, .keyboardkeyboardcontroller .sampler-crossfade-icon .whitekey, .keyboardkeyboardcontroller .sampler-crossfade-handle-chamfer .whitekey, .keyboardkeyboardcontroller .sampler-crossfade-handle .whitekey,
.st-dark-theme .keyboardkeyboardcontroller .blackkey,
.sampler-crossfade-icon .keyboardkeyboardcontroller .blackkey,
.sampler-crossfade-handle-chamfer .keyboardkeyboardcontroller .blackkey,
.sampler-crossfade-handle .keyboardkeyboardcontroller .blackkey,
.keyboardkeyboardcontroller .st-dark-theme .blackkey,
.keyboardkeyboardcontroller .sampler-crossfade-icon .blackkey,
.keyboardkeyboardcontroller .sampler-crossfade-handle-chamfer .blackkey,
.keyboardkeyboardcontroller .sampler-crossfade-handle .blackkey, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .piano-keys, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .keyboardkeyboardcontroller .keyring, .keyboardkeyboardcontroller .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .keyring, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .keyboardkeyboardcontroller .whitekey, .keyboardkeyboardcontroller .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .whitekey,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .keyboardkeyboardcontroller .blackkey,
.keyboardkeyboardcontroller .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .blackkey, .st-dark-theme .pianoroll .keys .white-key, .sampler-crossfade-icon .pianoroll .keys .white-key, .sampler-crossfade-handle-chamfer .pianoroll .keys .white-key, .sampler-crossfade-handle .pianoroll .keys .white-key, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .pianoroll .keys .white-key, .pianoroll .keys .st-dark-theme .white-key, .pianoroll .keys .sampler-crossfade-icon .white-key, .pianoroll .keys .sampler-crossfade-handle-chamfer .white-key, .pianoroll .keys .sampler-crossfade-handle .white-key, .pianoroll .keys .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .white-key, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .pianoroll .keys .quickcontrols .white-key,
.st-dark-theme .pianoroll .keys .black-key,
.sampler-crossfade-icon .pianoroll .keys .black-key,
.sampler-crossfade-handle-chamfer .pianoroll .keys .black-key,
.sampler-crossfade-handle .pianoroll .keys .black-key,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .pianoroll .keys .black-key,
.pianoroll .keys .st-dark-theme .black-key,
.pianoroll .keys .sampler-crossfade-icon .black-key,
.pianoroll .keys .sampler-crossfade-handle-chamfer .black-key,
.pianoroll .keys .sampler-crossfade-handle .black-key,
.pianoroll .keys .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .black-key,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .pianoroll .keys .quickcontrols .black-key {
  --bright-multiplier: 0.9;
  --dark-multiplier: 0.8;
  --white-key: hsl(0, 0%, calc(100% * var(--bright-multiplier)));
  --white-key-pressed: hsl(0, 0%, calc(82% * var(--bright-multiplier)));
  --white-key-hovered: hsl(0, 0%, calc(95% * var(--bright-multiplier)));
  --white-key-border: hsl(0, 0%, calc(82% * var(--bright-multiplier)));
  --white-key-text: hsl(0, 0%, calc(36% * var(--dark-multiplier)));
  --white-key-middle-c: hsl(120, 85%, calc(92% * var(--bright-multiplier)));
  --white-key-middle-c-hovered: hsl(
    120,
    84%,
    calc(88% * var(--dark-multiplier))
  );
  --white-key-middle-c-pressed: hsl(
    120,
    84%,
    calc(85% * var(--dark-multiplier))
  );
  --white-key-highlight: hsl(272, 87%, calc(25% * var(--dark-multiplier)));
  --black-key: hsl(0, 0%, calc(18% * var(--dark-multiplier)));
  --black-key-pressed: hsl(0, 0%, calc(61% * var(--dark-multiplier)));
  --black-key-hovered: hsl(0, 0%, calc(40% * var(--dark-multiplier)));
  --black-key-text: hsl(0, 0%, calc(97% * var(--bright-multiplier)));
  --black-key-highlight: hsl(258, 69%, calc(78% * var(--bright-multiplier)));
}

.st-dark-theme .with-808-styling .piano-keys, .sampler-crossfade-icon .with-808-styling .piano-keys, .sampler-crossfade-handle-chamfer .with-808-styling .piano-keys, .sampler-crossfade-handle .with-808-styling .piano-keys, .st-dark-theme .with-808-styling .keyboardkeyboardcontroller .keyring, .sampler-crossfade-icon .with-808-styling .keyboardkeyboardcontroller .keyring, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardkeyboardcontroller .keyring, .sampler-crossfade-handle .with-808-styling .keyboardkeyboardcontroller .keyring, .keyboardkeyboardcontroller .st-dark-theme .with-808-styling .keyring, .keyboardkeyboardcontroller .sampler-crossfade-icon .with-808-styling .keyring, .keyboardkeyboardcontroller .sampler-crossfade-handle-chamfer .with-808-styling .keyring, .keyboardkeyboardcontroller .sampler-crossfade-handle .with-808-styling .keyring, .st-dark-theme .with-808-styling .keyboardkeyboardcontroller .whitekey, .sampler-crossfade-icon .with-808-styling .keyboardkeyboardcontroller .whitekey, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardkeyboardcontroller .whitekey, .sampler-crossfade-handle .with-808-styling .keyboardkeyboardcontroller .whitekey, .keyboardkeyboardcontroller .st-dark-theme .with-808-styling .whitekey, .keyboardkeyboardcontroller .sampler-crossfade-icon .with-808-styling .whitekey, .keyboardkeyboardcontroller .sampler-crossfade-handle-chamfer .with-808-styling .whitekey, .keyboardkeyboardcontroller .sampler-crossfade-handle .with-808-styling .whitekey,
.st-dark-theme .with-808-styling .keyboardkeyboardcontroller .blackkey,
.sampler-crossfade-icon .with-808-styling .keyboardkeyboardcontroller .blackkey,
.sampler-crossfade-handle-chamfer .with-808-styling .keyboardkeyboardcontroller .blackkey,
.sampler-crossfade-handle .with-808-styling .keyboardkeyboardcontroller .blackkey,
.keyboardkeyboardcontroller .st-dark-theme .with-808-styling .blackkey,
.keyboardkeyboardcontroller .sampler-crossfade-icon .with-808-styling .blackkey,
.keyboardkeyboardcontroller .sampler-crossfade-handle-chamfer .with-808-styling .blackkey,
.keyboardkeyboardcontroller .sampler-crossfade-handle .with-808-styling .blackkey, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .piano-keys, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardkeyboardcontroller .keyring, .keyboardkeyboardcontroller .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyring, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardkeyboardcontroller .whitekey, .keyboardkeyboardcontroller .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .whitekey,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardkeyboardcontroller .blackkey,
.keyboardkeyboardcontroller .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .blackkey, .st-dark-theme .with-808-styling .pianoroll .keys .white-key, .sampler-crossfade-icon .with-808-styling .pianoroll .keys .white-key, .sampler-crossfade-handle-chamfer .with-808-styling .pianoroll .keys .white-key, .sampler-crossfade-handle .with-808-styling .pianoroll .keys .white-key, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .pianoroll .keys .white-key, .pianoroll .keys .st-dark-theme .with-808-styling .white-key, .pianoroll .keys .sampler-crossfade-icon .with-808-styling .white-key, .pianoroll .keys .sampler-crossfade-handle-chamfer .with-808-styling .white-key, .pianoroll .keys .sampler-crossfade-handle .with-808-styling .white-key, .pianoroll .keys .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .white-key, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .pianoroll .keys .quickcontrols .with-808-styling .white-key,
.st-dark-theme .with-808-styling .pianoroll .keys .black-key,
.sampler-crossfade-icon .with-808-styling .pianoroll .keys .black-key,
.sampler-crossfade-handle-chamfer .with-808-styling .pianoroll .keys .black-key,
.sampler-crossfade-handle .with-808-styling .pianoroll .keys .black-key,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .pianoroll .keys .black-key,
.pianoroll .keys .st-dark-theme .with-808-styling .black-key,
.pianoroll .keys .sampler-crossfade-icon .with-808-styling .black-key,
.pianoroll .keys .sampler-crossfade-handle-chamfer .with-808-styling .black-key,
.pianoroll .keys .sampler-crossfade-handle .with-808-styling .black-key,
.pianoroll .keys .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .black-key,
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .pianoroll .keys .quickcontrols .with-808-styling .black-key {
  --white-key-pressed: hsl(34, 92%, calc(43% * var(--bright-multiplier)));
  --white-key-middle-c-pressed: hsl(
    34,
    92%,
    calc(43% * var(--bright-multiplier))
  );
  --white-key-hovered: hsl(34, 92%, calc(63% * var(--bright-multiplier)));
  --white-key-middle-c-hovered: hsl(
    34,
    92%,
    calc(63% * var(--bright-multiplier))
  );
}

.pl-mobile .touchable-opacity {
  transition: opacity 150ms;
}
.pl-mobile .touchable-opacity:active {
  opacity: 0.1;
  transition: opacity 0ms;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background-color: #e6e9eb;
  font-family: var(--font-family);
  color: var(--text-base);
  padding-top: 0 !important;
  margin-top: 0;
  overflow: hidden;
  font-variant-ligatures: no-contextual;
}

input,
textarea {
  background-color: var(--background-base);
  font-family: var(--font-family);
  color: var(--text-base);
  border: none;
  font-weight: 200;
  padding: 6px;
  box-shadow: none;
  border-radius: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  font-weight: 400;
}

h3,
h4 {
  font-family: var(--font-family);
  font-weight: 500;
}

h5 {
  color: var(--text-subdued);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
}

.modal button {
  min-width: 0;
}

object {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
}

a {
  text-decoration: none;
  color: var(--text-primary);
}
.pl-mobile a {
  transition: opacity 150ms;
}
.pl-mobile a:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
a:focus {
  color: var(--text-primary);
  outline-style: none;
}

a.tertiary-link {
  font-weight: 500;
  text-decoration: underline;
}
a.tertiary-link:hover {
  color: var(--text-primary);
}

.pl-computer a:hover,
.pl-computer a:active {
  cursor: pointer;
}

.pl-computer a.hover-darken:hover,
.pl-computer a.hover-darken:active {
  text-decoration: none;
  color: #000000;
}

p {
  color: var(--text-base);
}

.flipx {
  transform: scaleX(-1);
}

.pl-computer .secondaryhide {
  visibility: hidden;
}
.pl-computer .secondaryactivated:hover .secondaryhide {
  visibility: visible;
}

.hidden {
  display: none;
}

.visuallyhidden {
  visibility: hidden;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body .pl-mobile-visible {
  display: none;
}
body .pl-computer-visible {
  display: none;
}
body.pl-computer .pl-computer-hidden {
  display: none;
}
body.pl-computer .pl-computer-visible {
  display: block;
}
body.pl-computer span.pl-computer-visible {
  display: inline-block;
}
body.pl-mobile .pl-mobile-hidden {
  display: none;
}
body.pl-mobile .pl-mobile-visible {
  display: block;
}
body.pl-mobile span.pl-mobile-visible {
  display: inline-block;
}
body .layout-landscape-visible {
  display: none;
}
body .layout-portrait-visible {
  display: none;
}
body.layout-portrait .layout-portrait-visible {
  display: block;
}
body.layout-portrait .layout-portrait-hidden {
  display: none;
}
body.layout-landscape .layout-landscape-visible {
  display: block;
}
body.layout-landscape .layout-landscape-hidden {
  display: none;
}
body .ff-handheld-visible {
  display: none;
}
body .ff-handheld-hidden {
  display: block;
}
body span.ff-handheld-hidden {
  display: inline-block;
}
body.ff-handheld .ff-handheld-visible {
  display: block;
}
body.ff-handheld span.ff-handheld-visible {
  display: inline-block;
}
body.ff-handheld .ff-handheld-hidden {
  display: none;
}

.dialog-title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family);
  color: var(--text-base);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.dialog-title-big {
  margin-top: 20px;
  margin-bottom: 20px;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--text-base);
  font-size: 25px;
  line-height: 1.33;
  letter-spacing: -0.5px;
}

@font-face {
  font-family: "Matter";
  font-style: normal;
  font-weight: 300;
  src: url("https://static.soundtrap.com/mango-foundation/assets/fonts/Matter-Light-fdaf60a7.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  font-style: normal;
  font-weight: 400;
  src: url("https://static.soundtrap.com/mango-foundation/assets/fonts/Matter-Regular-a1d7a0ef.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  font-style: normal;
  font-weight: 500;
  src: url("https://static.soundtrap.com/mango-foundation/assets/fonts/Matter-Medium-69a2c5e0.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  font-style: normal;
  font-weight: 600;
  src: url("https://static.soundtrap.com/mango-foundation/assets/fonts/Matter-SemiBold-37ddec86.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  font-style: normal;
  font-weight: 700;
  src: url("https://static.soundtrap.com/mango-foundation/assets/fonts/Matter-Bold-46088047.woff2") format("woff2");
  font-display: swap;
}
.animations-shown-invisibly {
  display: block !important;
  visibility: hidden !important;
  opacity: 0;
}

.animations-fade-in-100-start {
  opacity: 0;
  transition: none;
}

.animations-fade-in-100-end {
  opacity: 1;
  transition: opacity 100ms ease-in;
}

.animations-fade-out-100-start {
  opacity: 1;
  transition: none;
}

.animations-fade-out-100-end {
  opacity: 0;
  transition: opacity 100ms ease-out;
}

.animations-fade-in-200-start {
  opacity: 0;
  transition: none;
}

.animations-fade-in-200-end {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.animations-fade-out-200-start {
  opacity: 1;
  transition: none;
}

.animations-fade-out-200-end {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.animations-fade-in-300-start {
  opacity: 0;
  transition: none;
}

.animations-fade-in-300-end {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.animations-fade-out-300-start {
  opacity: 1;
  transition: none;
}

.animations-fade-out-300-end {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.animations-enter-from-back-start {
  transform: scale(0.2, 0.2);
  opacity: 0;
  transition: none;
}

.animations-enter-from-back-end {
  transform: scale(1, 1);
  opacity: 1;
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98), opacity 300ms;
}

.animations-exit-to-back-start {
  transform: scale(1, 1);
  opacity: 1;
  transition: none;
}

.animations-exit-to-back-end {
  transform: scale(0.2, 0.2);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98), opacity 300ms;
}

.animations-enter-from-right-start {
  transform: translateX(110vw);
  transition: none;
}

.animations-enter-from-right-end {
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-enter-from-left-start {
  transform: translateX(-110vw);
  transition: none;
}

.animations-enter-from-left-end {
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-exit-to-right-start {
  transform: translateX(0);
  transition: none;
}

.animations-exit-to-right-end {
  transform: translateX(110vw);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-exit-to-left-start {
  transform: translateX(0);
  transition: none;
}

.animations-exit-to-left-end {
  transform: translateX(-110vw);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-enter-faded-from-right-start {
  opacity: 0;
  transform: translateX(90px);
  transition: none;
}

.animations-enter-faded-from-right-end {
  opacity: 1;
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98), opacity 300ms ease-in;
}

.animations-exit-faded-to-right-start {
  opacity: 1;
  transform: translateX(0);
  transition: none;
}

.animations-exit-faded-to-right-end {
  opacity: 0;
  transform: translateX(90px);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98), opacity 300ms ease-out;
}

.animations-enter-from-bottom-start {
  transform: translateY(110vh);
  transition: none;
}

.animations-enter-from-bottom-end {
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-exit-to-bottom-start {
  transform: translateY(0);
  transition: none;
}

.animations-exit-to-bottom-end {
  transform: translateY(110vh);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-enter-from-top-start {
  transform: translateY(-110vh);
  transition: none;
}

.animations-enter-from-top-end {
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-exit-to-top-start {
  transform: translateY(0);
  transition: none;
}

.animations-exit-to-top-end {
  transform: translateY(-110vh);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-unfold-y-start {
  transform: scaleY(0);
  transition: none;
}

.animations-unfold-y-end {
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-fold-y-start {
  transform: scaleY(1);
  transition: none;
}

.animations-fold-y-end {
  transform: scaleY(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-enter-from-top-20-start {
  transform: translateY(-20vh);
  transition: none;
}

.animations-enter-from-top-20-end {
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

.animations-exit-to-top-20-start {
  transform: translateY(0);
  transition: none;
}

.animations-exit-to-top-20-end {
  transform: translateY(-20vh);
  transition: transform 300ms cubic-bezier(0.23, 0.08, 0.34, 0.98);
}

@keyframes marksflashinganim {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes heartthrob {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loopaddedanim {
  0% {
    background-color: #ffffff;
  }
  100% {
    background-color: #aa8cf0;
  }
}
/* Generated with Bounce.js. Edit at http://goo.gl/7l4DPs */
@keyframes bounce-in {
  0% {
    transform: matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  5.61% {
    transform: matrix3d(0.633, 0, 0, 0, 0, 0.633, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  8.41% {
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  11.11% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.91% {
    transform: matrix3d(0.868, 0, 0, 0, 0, 0.868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.72% {
    transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  26.03% {
    transform: matrix3d(0.905, 0, 0, 0, 0, 0.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  33.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: matrix3d(0.969, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  55.66% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  77.88% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes tippopupanim {
  0% {
    margin-top: -3px;
  }
  100% {
    margin-top: 3px;
  }
}
@keyframes mutepulsatinganim {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes ShrinkIn {
  0% {
    opacity: 1;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}
@keyframes OutlinePulse {
  0% {
    outline-width: 0;
  }
  90% {
    outline-width: 10px;
  }
  100% {
    outline-width: 0;
  }
}
.btn-plain {
  padding: 0;
  border: none;
  appearance: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

.flatbutton {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 100ms, background-image 100ms, border-color 100ms, color 100ms, opacity 100ms;
  border: none;
  padding: 9px;
  min-width: 76px;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
  padding-top: 5px;
  padding-left: 10px;
  padding-bottom: 7px;
  padding-right: 10px;
  font-size: 12px;
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 30px;
  box-sizing: border-box;
  border: 1px solid #5a00aa;
  color: #5a00aa;
  background-color: transparent;
  min-width: 0;
}
.flatbutton:hover {
  transition: background-color 30ms, background-image 30ms, border-color 30ms, color 30ms, opacity 30ms;
}
.pl-mobile .flatbutton {
  transition: opacity 150ms;
}
.pl-mobile .flatbutton:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-mobile .flatbutton.button-m44 {
  height: 44px;
  border-radius: 22px;
  min-width: 44px;
}
.pl-mobile .flatbutton.button-m44.iconbutton {
  font-size: 10px;
  width: 44px;
  height: 44px;
}
.pl-mobile .flatbutton.button-m44 .soundtrap-icon {
  font-size: 17px;
  padding-top: 2px;
}
.flatbutton.no-border {
  border-width: 0;
}
.pl-computer .flatbutton.secondary {
  border-color: transparent;
  color: #3c3c3c;
}
.pl-computer .flatbutton.secondary .soundtrap-icon {
  color: #3c3c3c;
}
.pl-computer .flatbutton.secondary:disabled {
  background-color: #ffffff;
  color: #999999;
}
.pl-computer .flatbutton.secondary:disabled .soundtrap-icon {
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary {
  border-color: #e6e6e6;
  background-color: #e6e6e6;
  color: #3c3c3c;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary:hover {
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary:hover .soundtrap-icon {
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary.selected {
  background-color: #5a00aa;
  border-color: #5a00aa;
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary.selected .soundtrap-icon {
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary.selected:hover {
  background-color: rgba(102, 57, 183, 0.6);
  border-color: rgba(102, 57, 183, 0.6);
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary.selected:hover .soundtrap-icon {
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary:disabled {
  background-color: transparent;
  border-color: transparent;
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary:disabled .soundtrap-icon {
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary:disabled:hover {
  background-color: transparent;
  border-color: transparent;
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondary:disabled:hover .soundtrap-icon {
  color: #999999;
}
.pl-computer .flatbutton.secondaryalt {
  background-color: transparent;
  border-color: transparent;
  color: #999999;
}
.pl-computer .flatbutton.secondaryalt .soundtrap-icon {
  color: #999999;
}
.pl-computer .flatbutton.secondaryalt:disabled {
  color: #b8b8b8;
}
.pl-computer .flatbutton.secondaryalt:disabled .soundtrap-icon {
  color: #b8b8b8;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt {
  border-color: rgba(128, 128, 128, 0.5);
  background-color: transparent;
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt:hover {
  background-color: #d5dadd;
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt:hover .soundtrap-icon {
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt.selected {
  background-color: #5a00aa;
  border-color: #5a00aa;
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt.selected .soundtrap-icon {
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt.selected:hover {
  background-color: rgba(102, 57, 183, 0.6);
  border-color: rgba(102, 57, 183, 0.6);
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt.selected:hover .soundtrap-icon {
  color: #ffffff;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt:disabled {
  background-color: transparent;
  border-color: transparent;
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt:disabled .soundtrap-icon {
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt:disabled:hover {
  background-color: transparent;
  border-color: transparent;
  color: #999999;
}
.pl-computer .secondaryactivated:hover .flatbutton.secondaryalt:disabled:hover .soundtrap-icon {
  color: #999999;
}
.pl-computer .flatbutton:hover:not(:disabled) {
  color: rgba(102, 57, 183, 0.6);
  border-color: rgba(102, 57, 183, 0.6);
}
.flatbutton:disabled {
  opacity: var(--disabled-opacity);
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.5);
}
.flatbutton.selected, .flatbutton.secondary.selected, .flatbutton.secondaryalt.selected {
  background-color: #5a00aa;
  border-color: transparent;
  color: #ffffff;
}
.flatbutton.selected .soundtrap-icon, .flatbutton.secondary.selected .soundtrap-icon, .flatbutton.secondaryalt.selected .soundtrap-icon {
  color: #ffffff;
}
.flatbutton.selected:hover:not(:disabled), .flatbutton.secondary.selected:hover:not(:disabled), .flatbutton.secondaryalt.selected:hover:not(:disabled) {
  background-color: rgba(102, 57, 183, 0.6);
  border-color: transparent;
  color: #ffffff;
}
.flatbutton.selected:hover:not(:disabled) .soundtrap-icon, .flatbutton.secondary.selected:hover:not(:disabled) .soundtrap-icon, .flatbutton.secondaryalt.selected:hover:not(:disabled) .soundtrap-icon {
  color: #ffffff;
}
.flatbutton.selected:disabled, .flatbutton.secondary.selected:disabled, .flatbutton.secondaryalt.selected:disabled {
  background-color: #9b9b9b;
  color: #ffffff;
  opacity: var(--disabled-opacity);
}
.pl-mobile .flatbutton {
  transition: opacity 150ms;
}
.pl-mobile .flatbutton:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .flatbutton:hover .soundtrap-icon {
  color: rgba(102, 57, 183, 0.6);
}
.flatbutton.selected .soundtrap-icon {
  color: #ffffff;
}
.flatbutton.selected:hover:not(:disabled) .soundtrap-icon {
  color: #ffffff;
}
.flatbutton.flatbuttonl {
  font-size: 13px;
  border-radius: 30px;
  line-height: 1;
  padding-top: 9px;
  padding-left: 10px;
  padding-bottom: 11px;
  padding-right: 10px;
  min-width: 100px;
}
.flatbutton.iconbutton {
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.flatbutton.iconbutton .soundtrap-icon {
  font-size: 14px;
}
.flatbutton.iconbutton-big {
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.flatbutton.iconbutton-big .soundtrap-icon {
  font-size: 27px;
}
.flatbutton.button-group {
  width: 34px;
}
.flatbutton.button-group.button-group-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.flatbutton.button-group.button-group-center {
  border-radius: 0;
  border-left-width: 0;
}
.flatbutton.button-group.button-group-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}
.flatbutton.flatbutton-pink {
  border-color: #5a00aa;
  color: #5a00aa;
}
.pl-computer .flatbutton.flatbutton-pink:hover, .pl-computer .flatbutton.flatbutton-pink:active, .flatbutton.flatbutton-pink.selected {
  border-color: #bd99dd;
  color: #bd99dd;
}
.flatbutton.flatbutton-purple {
  border-color: transparent;
  background-color: #5a00aa;
  color: #ffffff;
}
.pl-computer .flatbutton.flatbutton-purple:hover, .pl-computer .flatbutton.flatbutton-purple:active, .flatbutton.flatbutton-purple.selected {
  border-color: transparent;
  background-color: rgba(102, 57, 183, 0.6);
  color: #ffffff;
}
.flatbutton.flatbutton-trans-purple {
  border-color: #5a00aa;
  background-color: transparent;
  color: #5a00aa;
}
.flatbutton.flatbutton-trans-purple .soundtrap-icon {
  color: #5a00aa;
  margin-right: 10px;
}
.pl-computer .flatbutton.flatbutton-trans-purple:hover, .pl-computer .flatbutton.flatbutton-trans-purple:active, .flatbutton.flatbutton-trans-purple.selected {
  border-color: rgba(102, 57, 183, 0.6);
  background-color: transparent;
  color: rgba(102, 57, 183, 0.6);
}
.pl-computer .flatbutton.flatbutton-trans-purple:hover .soundtrap-icon, .pl-computer .flatbutton.flatbutton-trans-purple:active .soundtrap-icon, .flatbutton.flatbutton-trans-purple.selected .soundtrap-icon {
  color: rgba(102, 57, 183, 0.6);
}
.flatbutton.flatbutton-trans-white {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  cursor: pointer;
}
.flatbutton.flatbutton-trans-white:focus {
  color: #ffffff;
}
.flatbutton.flatbutton-trans-white .soundtrap-icon {
  color: #ffffff;
  margin-right: 10px;
}
.pl-computer .flatbutton.flatbutton-trans-white:hover:not(:disabled), .pl-computer .flatbutton.flatbutton-trans-white:active, .flatbutton.flatbutton-trans-white.selected {
  background: rgba(128, 128, 128, 0.7);
  color: #ffffff;
}
.pl-computer .flatbutton.flatbutton-trans-white:hover:not(:disabled) .soundtrap-icon, .pl-computer .flatbutton.flatbutton-trans-white:active .soundtrap-icon, .flatbutton.flatbutton-trans-white.selected .soundtrap-icon {
  color: #ffffff;
}
.flatbutton.flatbutton-purple-fg {
  border-color: #5a00aa;
  color: #5a00aa;
}
.flatbutton.flatbutton-purple-fg .soundtrap-icon {
  color: #5a00aa;
}
.flatbutton.flatbutton-purple-fg.selected {
  border-color: #5a00aa;
  background-color: #5a00aa;
  color: #ffffff;
}
.flatbutton.flatbutton-purple-fg.selected .soundtrap-icon {
  color: #ffffff;
}
.flatbutton.flatbutton-purple-fg:disabled {
  pointer-events: none;
  background-color: transparent;
  opacity: 0.3;
}

.fatfingerbutton {
  padding: 10px 0;
  display: inline-block;
}
.pl-mobile .fatfingerbutton.fatlr {
  padding: 10px 10px;
}
.pl-computer .fatfingerbutton.fatfingerbutton-mobile-only {
  padding: 0;
}

.transparentbutton {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 100ms, background-image 100ms, border-color 100ms, color 100ms, opacity 100ms;
  border: none;
  padding: 9px;
  min-width: 76px;
  border: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  min-width: 0;
  color: #3c3c3c;
}
.transparentbutton:hover {
  transition: background-color 30ms, background-image 30ms, border-color 30ms, color 30ms, opacity 30ms;
}
.pl-mobile .transparentbutton {
  transition: opacity 150ms;
}
.pl-mobile .transparentbutton:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .transparentbutton:hover {
  background-color: transparent;
  color: #999999;
}
.pl-mobile .transparentbutton {
  transition: opacity 150ms;
}
.pl-mobile .transparentbutton:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.transparentbutton:disabled {
  opacity: var(--disabled-opacity);
  background-color: transparent;
}

.grey-inverse-button {
  background-color: #999999;
  border-width: 0;
  color: #ffffff;
}

.arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 100ms, background-image 100ms, border-color 100ms, color 100ms, opacity 100ms;
  border: none;
  padding: 9px;
  min-width: 76px;
  margin: 0;
  background: transparent;
  border: 0;
  font-size: 16px;
  line-height: 20px;
  padding: 14px 12px;
  width: auto;
  height: auto;
  min-width: 0;
  color: var(--essential-subdued);
  text-decoration: none;
}
.arrowbutton:hover, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton:hover {
  transition: background-color 30ms, background-image 30ms, border-color 30ms, color 30ms, opacity 30ms;
}
.pl-mobile .arrowbutton, .pl-mobile .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pl-mobile .pattern-selector-arrowbutton {
  transition: opacity 150ms;
}
.pl-mobile .arrowbutton:active, .pl-mobile .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton:active, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pl-mobile .pattern-selector-arrowbutton:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .arrowbutton:hover, .pl-computer .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton:hover, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pl-computer .pattern-selector-arrowbutton:hover {
  text-decoration: none;
  background: transparent;
  color: var(--essential-base);
}
.arrowbutton.disabled, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .disabled.pattern-selector-arrowbutton {
  opacity: 0;
  text-decoration: none;
  cursor: default;
}
.pl-computer .arrowbutton.disabled:hover, .pl-computer .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .disabled.pattern-selector-arrowbutton:hover, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pl-computer .disabled.pattern-selector-arrowbutton:hover {
  opacity: 0;
  text-decoration: none;
  cursor: default;
}

.splitbutton {
  cursor: default;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 26px;
}
.splitbutton .splitbuttonpart {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}
.pl-mobile .splitbutton .splitbuttonclickable {
  transition: opacity 150ms;
}
.pl-mobile .splitbutton .splitbuttonclickable:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.splitbutton .splitbuttonclickable.disabled {
  opacity: var(--disabled-opacity);
}
.splitbutton .splitbuttonleft {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.splitbutton .splitbuttonright {
  margin-left: 1px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.splitbutton .splitbuttonmessage {
  justify-content: flex-start;
  padding-left: 0;
}
.splitbutton.splitbuttoncollapse .splitbuttonleft {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.splitbutton.splitbuttoncollapse .splitbuttonright {
  display: none;
}
.splitbutton.splitbuttoncollapse .splitbuttonmessage {
  display: none;
}
.pl-mobile .splitbutton {
  height: 34px;
}
.pl-mobile .splitbutton .splitbuttonleft {
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
}
.pl-mobile .splitbutton .splitbuttonright {
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
}
.pl-mobile .splitbutton.splitbuttoncollapse .splitbuttonleft {
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
}

.preview-play-button {
  line-height: 0;
  z-index: 2;
}
.preview-play-button button {
  min-width: auto;
  padding: 0px 2px;
  width: 20px;
  height: 20px;
  border-color: var(--essential-primary);
}
.preview-play-button span:not(.preview-minus) {
  font-size: 12px;
  color: var(--essential-primary);
  border-color: var(--essential-primary);
}
.preview-play-button span:not(.preview-minus):before {
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
  font-size: 12px;
  line-height: 2em;
}
.preview-play-button span:not(.preview-minus).preview-play:before {
  content: "\e059";
}
.preview-play-button span:not(.preview-minus).preview-pause:before {
  content: "\e056";
}
.preview-play-button .preview-minus {
  display: block;
  background: url("/studio/assets/images/studio/preset-spinner.svg") center no-repeat;
  width: 22px;
  height: 22px;
  background-size: contain;
}

.st-toggle-button-wrapper {
  display: flex;
  align-self: center;
  align-items: center;
  border-radius: 50px;
  background: transparent;
}
.st-toggle-button-wrapper .st-toggle-button-settings {
  background-color: transparent;
  border: 0;
  padding: var(--space-tiny) var(--space-tiny) var(--space-tiny) var(--space-nano);
  height: 100%;
  align-items: center;
  color: var(--text-subdued);
  align-self: center;
  display: flex;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.st-toggle-button-wrapper .st-toggle-button-settings .st-toggle-button-menu-button {
  display: flex;
  align-items: center;
  margin-top: 2px;
  font-size: 13px;
  line-height: 16px;
}
.st-toggle-button-wrapper .st-toggle-button-settings:disabled {
  opacity: var(--disabled-opacity);
}
.st-toggle-button-wrapper .st-toggle-button-settings:not([disabled]):hover {
  color: var(--text-base);
}
.st-toggle-button-wrapper .st-toggle-button {
  color: var(--text-base);
  font-size: 16px;
  line-height: 1em;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  outline: rgba(255, 255, 255, 0.5) solid 0;
}
.st-toggle-button-wrapper .st-toggle-button .svg-wrapper {
  width: 16px;
  height: 16px;
}
.st-toggle-button-wrapper .st-toggle-button .svg-wrapper svg {
  fill: var(--text-base);
}
.st-toggle-button-wrapper .st-toggle-button:disabled {
  opacity: var(--disabled-opacity);
}
.st-toggle-button-wrapper .st-toggle-button.nudge {
  animation: OutlinePulse 0.3s ease-out;
}
.st-toggle-button-wrapper.base:not(.disabled):hover {
  background-color: var(--background-tinted-base);
}
.st-toggle-button-wrapper.base .st-toggle-button {
  background-color: var(--background-tinted-base);
}
.st-toggle-button-wrapper.contrastingbase:not(.disabled):hover {
  background-color: var(--background-tinted-base);
}
.st-toggle-button-wrapper.contrastingbase .st-toggle-button {
  border: 1px solid;
  background-color: transparent;
  border-color: var(--text-base);
}
.st-toggle-button-wrapper.contrastingbase.on .st-toggle-button {
  border-color: var(--background-base);
  background-color: var(--background-base);
}
.st-toggle-button-wrapper.subdued .st-toggle-button {
  color: var(--text-subdued);
  fill: var(--text-subdued);
  background-color: var(--background-elevated-base);
}
.st-toggle-button-wrapper.subdued:not(.disabled, .on):hover .st-toggle-button {
  color: var(--text-base);
  background-color: var(--background-tinted-highlight);
}
.st-toggle-button-wrapper.subdued.on .st-toggle-button {
  background-color: var(--text-subdued);
  color: var(--background-base);
}
.st-toggle-button-wrapper.small .st-toggle-button {
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.st-toggle-button-wrapper.small .st-toggle-button-menu-button {
  font-size: 10px;
}
.st-toggle-button-wrapper.mini .st-toggle-button {
  width: 20px;
  height: 20px;
  font-size: 12px;
}
.st-toggle-button-wrapper.mini .st-toggle-button-menu-button {
  font-size: 10px;
}

.popupmenu.edit-preset-menu .inner {
  padding: 8px 0 7px;
}
.popupmenu.edit-preset-menu .inner .item {
  padding: 5px 12px 5px 18px;
}
.popupmenu.edit-preset-menu .inner .item .lbl {
  color: var(--text-base);
}
.popupmenu.edit-preset-menu .inner .item .icon {
  position: relative;
  top: 2px;
  color: var(--text-base);
  margin-right: 10px;
}

.grid-menu {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.grid-menu .dialogbackdrop {
  opacity: 0;
  z-index: 100;
}
.grid-menu .inner {
  position: relative;
  background-color: var(--background-base);
  color: var(--text-base);
  box-shadow: 0 7px 26px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  scroll-behavior: smooth;
  z-index: 101;
  font-size: 15px;
  font-weight: 400;
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}
.grid-menu .inner .item {
  display: flex;
  flex-direction: column;
  width: 83px;
  flex-grow: 0;
  box-sizing: border-box;
  align-items: center;
  min-height: 90px;
  height: 16vh;
  max-height: 105px;
  padding: 0;
  justify-content: center;
}
@media (max-width: 360px) {
  .grid-menu .inner .item {
    width: 76px;
  }
}
.grid-menu .inner .item .icon {
  line-height: 44px;
  color: var(--text-base);
  text-align: center;
  font-size: 19px;
  height: 44px;
  flex-shrink: 0;
  width: 44px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-subdued);
  border-radius: 50%;
  margin-bottom: 4px;
}
.grid-menu .inner .item .icon.icon-collab, .grid-menu .inner .item .icon.icon-loops {
  border-color: var(--background-elevated-base);
}
.grid-menu .inner .item .icon.icon-text {
  font-weight: 500;
  font-size: 15px;
}
.grid-menu .inner .item .lbl {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  white-space: pre;
  text-align: center;
  height: 28px;
  line-height: 1.2;
}
.grid-menu .inner .item .shortcut {
  display: none;
}
.grid-menu .inner .item.disabled {
  color: inherit;
  opacity: 0.3;
}
.pl-mobile .grid-menu .inner .item {
  transition: opacity 150ms;
}
.pl-mobile .grid-menu .inner .item:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.grid-menu .inner .item.hovered {
  opacity: 0.1;
  background-color: inherit;
  color: inherit;
}
.grid-menu .inner .separator {
  width: 100%;
  background-color: var(--decorative-subdued);
  height: 1px;
  margin: 0 0 var(--space-tiny);
}

.keymenu .inner {
  overflow-x: hidden;
}
.keymenu .inner .item {
  width: 140px;
  min-width: 140px;
}

.metronomemenu .inner {
  overflow: hidden;
}
.metronomemenu .inner .item {
  width: 180px;
  min-width: 180px;
}
.metronomemenu .volumefx {
  position: relative;
  height: 34px;
  margin-left: 35px;
  margin-top: 9px;
}
.metronomemenu .volumefx .knob {
  background-color: var(--background-base);
  border: 1px solid var(--essential-subdued);
}

body:not(.ff-handheld) .add-loop-key-menu .inner {
  overflow-x: hidden;
}
body:not(.ff-handheld) .add-loop-key-menu .inner .item {
  width: 400px;
  min-width: 400px;
}

.loopscaleselectormenu .inner .item {
  min-width: 140px;
  width: 140px;
}

.sampled-instrument-dropdown-popup-menu .inner {
  width: 340px;
}
.sampled-instrument-dropdown-popup-menu .inner .item {
  width: 340px;
}

.handheld-settings-menu .icon.flag,
.language-grid-menu .icon.flag,
.grid-menu .icon.flag {
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: 8px 8px;
}
.handheld-settings-menu .icon.flag.flag-en,
.language-grid-menu .icon.flag.flag-en,
.grid-menu .icon.flag.flag-en {
  background-image: url("/studio/assets/images/flags/US_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-sv,
.language-grid-menu .icon.flag.flag-sv,
.grid-menu .icon.flag.flag-sv {
  background-image: url("/studio/assets/images/flags/SE_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-es,
.language-grid-menu .icon.flag.flag-es,
.grid-menu .icon.flag.flag-es {
  background-image: url("/studio/assets/images/flags/ES_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-es-la,
.language-grid-menu .icon.flag.flag-es-la,
.grid-menu .icon.flag.flag-es-la {
  background-image: url("/studio/assets/images/flags/MX_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-fr,
.language-grid-menu .icon.flag.flag-fr,
.grid-menu .icon.flag.flag-fr {
  background-image: url("/studio/assets/images/flags/FR_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-de,
.language-grid-menu .icon.flag.flag-de,
.grid-menu .icon.flag.flag-de {
  background-image: url("/studio/assets/images/flags/DE_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-id,
.language-grid-menu .icon.flag.flag-id,
.grid-menu .icon.flag.flag-id {
  background-image: url("/studio/assets/images/flags/ID_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-it,
.language-grid-menu .icon.flag.flag-it,
.grid-menu .icon.flag.flag-it {
  background-image: url("/studio/assets/images/flags/IT_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-nl-nl,
.language-grid-menu .icon.flag.flag-nl-nl,
.grid-menu .icon.flag.flag-nl-nl {
  background-image: url("/studio/assets/images/flags/NL_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-no,
.language-grid-menu .icon.flag.flag-no,
.grid-menu .icon.flag.flag-no {
  background-image: url("/studio/assets/images/flags/NO_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-pl,
.language-grid-menu .icon.flag.flag-pl,
.grid-menu .icon.flag.flag-pl {
  background-image: url("/studio/assets/images/flags/PL_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-pt,
.language-grid-menu .icon.flag.flag-pt,
.grid-menu .icon.flag.flag-pt {
  background-image: url("/studio/assets/images/flags/PT_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-pt-br,
.language-grid-menu .icon.flag.flag-pt-br,
.grid-menu .icon.flag.flag-pt-br {
  background-image: url("/studio/assets/images/flags/BR_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-ru,
.language-grid-menu .icon.flag.flag-ru,
.grid-menu .icon.flag.flag-ru {
  background-image: url("/studio/assets/images/flags/RU_32x32.png");
}
.handheld-settings-menu .icon.flag.flag-tr,
.language-grid-menu .icon.flag.flag-tr,
.grid-menu .icon.flag.flag-tr {
  background-image: url("/studio/assets/images/flags/TR_32x32.png");
}

.popupmenu.automation-param-selector-menu .inner {
  padding: 8px 0 7px;
}
.popupmenu.automation-param-selector-menu .inner .item {
  padding: 5px 12px 5px 18px;
}
.popupmenu.automation-param-selector-menu .inner .item.selected .lbl {
  color: var(--text-primary);
  font-weight: 500;
}
.popupmenu.automation-param-selector-menu .inner .item:hover .lbl {
  color: #ffffff;
}

.standard-input {
  box-sizing: border-box;
  height: 34px;
  padding: 6px 12px;
  font-size: 15px;
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.42857143;
  color: var(--text-base);
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
}
.standard-input:focus[type] {
  border-color: var(--essential-primary);
}

.standard-textarea {
  box-sizing: border-box;
  height: 200px;
  padding: 6px 12px;
  font-size: 15px;
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.42857143;
  color: #3c3c3c;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
}

.pageloading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background-color: var(--background-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 500ms ease-out;
}
.pageloading .loading-video {
  margin-bottom: 20px;
  opacity: 0.98;
  pointer-events: none;
}
.pageloading .loading-video::-webkit-media-controls-start-playback-button {
  display: none;
}
.pageloading .pageloading-caption {
  max-width: 90vw;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 20px;
  color: var(--text-base);
  min-height: 24px;
}
.pageloading.hiding {
  pointer-events: none;
  opacity: 0;
}
.pageloading h1,
.pageloading h2 {
  display: none;
}

.st-dark-theme .pageloading, .sampler-crossfade-icon .pageloading, .sampler-crossfade-handle-chamfer .pageloading, .sampler-crossfade-handle .pageloading, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .pageloading {
  background-color: #2a2a2f;
}

@keyframes page-loading-anim {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
.base-tooltip {
  --tooltip-background-color: var(--background-elevated-base);
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--tooltip-background-color);
  padding: 10px;
  color: var(--text-base);
  border-radius: 4px;
  /* Includes the arrow in the shadow */
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  z-index: 202;
  min-width: 40px;
  max-width: 280px;
  text-align: center;
  user-select: none;
}
.base-tooltip .arrow-top {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  left: 50%;
  margin-left: -11px;
  border-bottom-color: var(--tooltip-background-color);
  top: -22px;
}
.base-tooltip .arrow-right {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  top: 50%;
  margin-top: -11px;
  border-left-color: var(--tooltip-background-color);
  right: -22px;
}
.base-tooltip .arrow-bottom {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  left: 50%;
  margin-left: -11px;
  border-top-color: var(--tooltip-background-color);
  top: 100%;
}
.base-tooltip .arrow-left {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  top: 50%;
  margin-top: -11px;
  border-right-color: var(--tooltip-background-color);
  left: -22px;
}
.base-tooltip .msg {
  /* Avoids last line orphaned words */
  text-wrap: pretty;
}

.base-tutorial-tooltip {
  pointer-events: unset;
  text-align: left;
  padding: var(--space-small);
}
.base-tutorial-tooltip.has-closer {
  padding-right: var(--space-medium-2);
}
.base-tutorial-tooltip .closer {
  position: absolute;
  background: none;
  border: none;
  padding: var(--space-tiny);
  right: var(--space-nano);
  top: var(--space-nano);
  line-height: 1;
}
.base-tutorial-tooltip .cta {
  float: left;
  border: none;
  background: none;
  padding: 1px 0;
  margin-top: var(--space-tiny-1);
}
.base-tutorial-tooltip a {
  font-weight: 500;
  color: var(--text-base);
}

.st-tooltip2-wrapper {
  display: inherit;
  position: relative;
}

.st-tooltip2-callout {
  z-index: 102;
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
}
.st-tooltip2-callout .closer {
  border: 0;
  margin-right: -6px;
  top: 6px;
  right: 13px;
  position: absolute;
  background-color: transparent;
}
.st-tooltip2-callout .inner {
  background-color: var(--background-base);
  padding: 10px;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 300;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5em;
  box-shadow: 0 5px 30px 1px rgba(0, 0, 0, 0.3);
  width: 230px;
  text-align: center;
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;
}
.st-tooltip2-callout.placement-left .inner {
  transform: translate(-100%, -50%);
}
.st-tooltip2-callout.placement-right .inner {
  transform: translate(0%, -50%);
}
.st-tooltip2-callout.placement-above .inner {
  transform: translate(-50%, -100%);
}
.st-tooltip2-callout.placement-below .inner {
  transform: translate(-50%, 0%);
}
.st-tooltip2-callout.placement-below.show-arrow .inner {
  margin-top: 11px;
}
.st-tooltip2-callout.placement-above.show-arrow .inner {
  margin-top: -11px;
}
.st-tooltip2-callout.placement-left.show-arrow .inner {
  margin-left: -11px;
}
.st-tooltip2-callout.placement-right.show-arrow .inner {
  margin-left: 11px;
}
.st-tooltip2-callout .st-tooltip2-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 11px solid;
  border-color: transparent;
  display: none;
}
.st-tooltip2-callout.show-arrow .st-tooltip2-arrow {
  display: block;
}
.st-tooltip2-callout.placement-below .st-tooltip2-arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-color: var(--background-base);
  top: -11px;
}
.st-tooltip2-callout.placement-left .st-tooltip2-arrow {
  top: 50%;
  margin-top: -11px;
  border-left-color: var(--background-base);
  right: -11px;
}
.st-tooltip2-callout.placement-above .st-tooltip2-arrow {
  left: 50%;
  margin-left: -11px;
  border-top-color: var(--background-base);
  bottom: -11px;
}
.st-tooltip2-callout.placement-right .st-tooltip2-arrow {
  top: 50%;
  margin-top: -11px;
  border-right-color: var(--background-base);
  left: -11px;
}

.st-tooltip2-surface {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(1);
  z-index: 2000;
}

.instrumentgui {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  align-self: center;
  position: relative;
}
.instrumentgui .quickcontrols {
  position: absolute;
  right: 26px;
  top: 52px;
}
.instrumentgui .instrumentgui-top {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.instrumentgui .savepresetbutton {
  margin-left: 10px;
}

.drummer-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drummer-view .drummer-view-top {
  background-color: var(--background-elevated-base);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  padding: var(--space-tiny-1) 0;
}
.layout-landscape.pl-mobile .drummer-view .drummer-view-top {
  display: none;
}
.pl-mobile .drummer-view .drummer-view-top .presetselectorpicker {
  width: 190px;
  border: 1px solid var(--essential-subdued);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  justify-content: space-between;
}
.pl-mobile .drummer-view .drummer-view-top .presetselectorpicker .arrowbutton, .pl-mobile .drummer-view .drummer-view-top .presetselectorpicker .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .pl-mobile .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .drummer-view-top .presetselectorpicker .pattern-selector-arrowbutton {
  padding: 12px 10px;
}
.pl-mobile .drummer-view .drummer-view-top .presetselectorpicker .presetselectorpickerdescription .topcategoryicon {
  margin-right: 8px;
  width: auto;
  height: auto;
  min-height: auto;
  min-width: auto;
  color: var(--text-subdued);
  background-color: transparent;
  display: none;
}
.pl-mobile .drummer-view .drummer-view-top .presetselectorpicker .presetselectorpickerdescription .presetselectorpickerdescriptioninner .categoryname,
.pl-mobile .drummer-view .drummer-view-top .presetselectorpicker .presetselectorpickerdescription .presetselectorpickerdescriptioninner .patchname {
  text-overflow: ellipsis;
  width: 120px;
  overflow: hidden;
}
.pl-mobile .drummer-view .drummer-view-top .presetselectorpicker .presetselectorpickerdescription .presetselectorpickerdescriptioninner .patchname {
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 13px;
  color: var(--text-subdued);
}
.drummer-view .drummer-view-top .toolbutton {
  margin-right: 8px;
  border-color: #d2d2d2;
  font-size: 13px;
  line-height: 10px;
  padding-bottom: 11px;
  padding-top: 10px;
}
.drummer-view .drummer-view-top .toolbutton.active {
  background-color: #5a00aa;
  color: #ffffff;
}
.drummer-view .drummer-view-top .savepresetbutton {
  margin-left: 10px;
}
.drummer-view .drummer-view-top .quickcontrols {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  width: 492px;
  justify-content: flex-end;
}
.drummer-view .drummer-view-top .quickcontrols .quickcontrolfx {
  margin: 0 15px;
}
.pl-mobile .drummer-view .drummer-view-top .quickcontrols {
  display: none;
}
.drummer-view .drummer-bottom {
  width: 100%;
  height: 100%;
  background-color: var(--background-base);
  padding: var(--space-small);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  position: relative;
  scrollbar-gutter: stable;
}
.drummer-view .drummer-bottom.overlay-visible {
  overflow: hidden;
}
.drummer-view .drummer-bottom .engine-gui {
  flex: 0;
  width: 100%;
  position: relative;
  background-color: var(--background-base);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.drummer-view .drummer-bottom .engine-gui .sampler1enginegui {
  position: relative;
  margin-bottom: var(--space-small);
}
.drummer-view .drummer-bottom .instrument-loading-progress {
  pointer-events: none;
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.drummer-view .drummer-bottom .drummer-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-medium-2);
  min-height: 0;
}
.drummer-view .drummer-bottom .drummer-container .pattern-holder {
  height: 100%;
  border-left: 1px solid var(--decorative-subdued);
  border-right: 1px solid var(--decorative-subdued);
  padding: 0 var(--space-medium-2);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container {
  height: 100%;
  display: flex;
  gap: var(--space-medium-2);
  flex-direction: column;
  align-items: center;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-small);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector {
  width: 225px;
  border-radius: 4px;
  border: 1px solid var(--essential-subdued);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-subdued);
  background-color: transparent;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton {
  font-size: 12px;
  line-height: 17px;
  padding: var(--space-tiny-1);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton:hover {
  color: var(--text-base);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton span {
  vertical-align: middle;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-text {
  display: flex;
  justify-content: center;
  align-items: center;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selected {
  color: var(--text-base);
  background-color: var(--background-elevated-base);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .drummer-icon-button {
  border: 1px solid transparent;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  padding: 6px;
  background-color: var(--background-tinted-base);
  color: var(--text-subdued);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .drummer-icon-button div {
  text-align: center;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .drummer-icon-button:hover {
  border-color: var(--essential-subdued);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .drummer-icon-button svg, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .drummer-icon-button div {
  width: 24px;
  height: 24px;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .drummer-icon-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .circular-drummer-icon-button-selected .drummer-icon-button {
  color: var(--text-base);
  border-color: var(--essential-base);
  background: var(--background-base);
  filter: none;
  opacity: 1;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .halftime-container {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .halftime-container button {
  opacity: 0.4;
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .halftime-text {
  color: var(--text-subdued);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .halftime-selected {
  color: var(--text-subdued);
}
.drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .halftime-selected button {
  opacity: 1;
}
.drummer-view .drummer-bottom .drummer-container .preset-holder {
  height: 100%;
}
.drummer-view .drummer-bottom .drummer-container .preset-container {
  height: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .tags-container {
  display: flex;
  flex-direction: column;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .tags-container .tags {
  width: 275px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 4px 4px 4px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .tags-container .tags .tag {
  font-size: 13px;
  border-radius: 4px;
  color: var(--text-base);
  min-width: 60px;
  height: 25px;
  border: 1px solid var(--essential-subdued);
  background-color: var(--background-elevated-base);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px;
  cursor: pointer;
  padding: 0 6px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .tags-container .selected-tags {
  width: 275px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 1px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .tags-container .selected-tags .selected-tag {
  font-size: 13px;
  border-radius: 4px;
  color: var(--text-base);
  min-width: 70px;
  height: 25px;
  border: 1px solid var(--essential-subdued);
  background-color: var(--essential-subdued);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .preset-list {
  height: 100%;
  list-style-type: none;
  overflow-y: auto;
  padding-right: var(--space-tiny);
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
  scrollbar-gutter: stable;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .preset-list .preset {
  width: 250px;
  border-radius: 4px;
  border: 1px solid var(--essential-subdued);
  display: flex;
  justify-content: flex-start;
  padding: var(--space-tiny) 0 var(--space-tiny) var(--space-tiny-1);
  align-items: center;
  color: var(--text-subdued);
  cursor: pointer;
  font-size: 14px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .preset-list .preset .st-preview-button > button {
  color: var(--text-base);
}
.drummer-view .drummer-bottom .drummer-container .preset-container .preset-list .preset .preset-button {
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  border: none;
  width: 100%;
  padding: 0 6px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .preset-list .preset .preset-button .preset-upsell-text {
  font-size: 11px;
  font-weight: 500;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .preset-list .preset-selected {
  color: var(--text-base);
  background-color: var(--background-tinted-base);
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion {
  position: sticky;
  bottom: 0;
  color: var(--text-base);
  background: var(--background-press);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion.collapsible {
  padding: 8px 13px 13px 0px;
  margin: 6px 0px 0px 0px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion.uncollapsible {
  padding: 13px 13px 13px 0px;
  margin: 19px 0px 0px 0px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header {
  cursor: pointer;
  height: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .hide-icon {
  visibility: hidden;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .header-icon, .drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .content {
  height: 100%;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .header-icon .soundtrap-icon, .drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .content .soundtrap-icon {
  margin-top: 4px;
  font-size: 18px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .header-icon {
  margin-top: -4px;
  width: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .collapse-button {
  margin-top: -2px;
  border: none;
  background-color: transparent;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .header .collapse-button .soundtrap-icon {
  font-size: 12px !important;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body {
  display: flex;
  flex-direction: row;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .left-column, .drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .content {
  height: 100%;
  fill: var(--text-base);
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .left-column .soundtrap-icon, .drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .content .soundtrap-icon {
  margin-top: 4px;
  font-size: 18px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .left-column {
  width: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .content {
  width: 200px;
  overflow: hidden;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .content .drummer-preset-suggestion-message {
  text-wrap: initial;
  margin-bottom: 4px;
}
.drummer-view .drummer-bottom .drummer-container .preset-container .drummer-preset-suggestion .body .content .drummer-preset-suggestion-button {
  color: var(--text-subdued);
  background-color: transparent;
  text-decoration: underline;
  border: none;
  padding: 0;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder {
  height: 100%;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-medium-2);
  align-items: flex-start;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container .slider {
  -webkit-appearance: none;
  width: 153px;
  height: 8px;
  border-radius: 5px;
  background: var(--background-elevated-base);
  padding: 0;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--essential-base);
  cursor: pointer;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container .slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--essential-base);
  cursor: pointer;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .humanise-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--text-subdued);
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .humanise-container .st-toggle {
  margin-left: -6px;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .humanise-container .humanise-text {
  width: 90px;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .drummer-survey {
  width: 280px;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container-number-row {
  padding-left: 32px;
  display: flex;
  flex-direction: row;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container-number-row .control-container-number {
  display: flex;
  flex-direction: row;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-container-number-row .control-container-number .number-input {
  width: 50px;
}
.drummer-view .drummer-bottom .drummer-container .controls-holder .controls-container .control-label {
  color: var(--text-subdued);
  display: flex;
  justify-content: flex-start;
  font-weight: normal;
  font-size: 13px;
  width: 90px;
}
.drummer-view .drummer-bottom .drummer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--text-base);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  backdrop-filter: blur(5px);
}
.drummer-view .drummer-bottom .drummer-overlay p {
  max-width: 50%;
  white-space: normal;
  text-align: center;
}

.quickcontrols .quickcontrolfxbase {
  position: relative;
  width: 52px;
  height: 63px;
}

.stomp {
  font-size: 13px;
  box-sizing: border-box;
  width: 168px;
  height: 241px;
  margin-left: 16px;
  margin-right: 15px;
  display: inline-block;
  position: relative;
  opacity: 1;
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  will-change: transform;
  border-radius: var(--space-tiny);
  border: 1px solid var(--decorative-subdued);
  box-shadow: 0 2px 3px var(--default-box-shadow-color);
}
.stomp .fxcontent {
  position: absolute;
  top: 42px;
  bottom: 0;
  width: 100%;
}
.stomp.disabled:not(.stomp--disabled-effect) {
  opacity: 0.6;
  -webkit-filter: grayscale(1) brightness(1) contrast(1);
  filter: grayscale(1) brightness(1) contrast(1);
}
.stomp [disabled=true], .stomp [aria-disabled=true] {
  pointer-events: none;
}
.stomp.removed {
  margin-left: 0;
  margin-right: 0;
  width: 0;
  opacity: 0;
  transition: opacity 0.05s ease-out 0s, width 0.2s ease-out 0.05s, margin-left 0.2s ease-out 0.05s, margin-right 0.2s ease-out 0.05s;
}
.stomp .shadow {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 178px;
  height: 248px;
}
.stomp .name-ribbon {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  left: -1px;
  top: -1px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  width: 168px;
  height: 42px;
  padding-top: 18px;
  font-size: 11px;
  line-height: 13px;
  font-family: var(--font-family);
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  background-color: var(--background-base);
}
.stomp .name-ribbon .btn {
  margin-left: 10px;
}
.stomp .name-ribbon .draggable-icon {
  display: none;
}
.stomp .name-ribbon .lifecycle-tag {
  display: inline-block;
  width: 40px;
  height: 16px;
  border-radius: 8px;
  border: 1px solid white;
  margin-left: 4px;
  vertical-align: middle;
  text-align: center;
}
.stomp .name-ribbon .alpha {
  background-color: #d70606;
  color: #ffffff;
}
.stomp .name-ribbon .alpha:before {
  content: "Alpha";
}
.stomp .name-ribbon .beta {
  background-color: #0053e2;
  color: #ffffff;
}
.stomp .name-ribbon .beta:before {
  content: "Beta";
}
.stomp .name-ribbon.has-spotlight {
  height: 48px;
}
.stomp .name-ribbon .spotlight-text {
  height: 15px;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--essential-spotlight);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
}
.stomp .striped {
  background: repeating-linear-gradient(45deg, var(--background-base), var(--background-base) 10px, var(--decorative-subdued) 10px, var(--decorative-subdued) 20px);
}
.stomp .closer, .stomp .power-on {
  border: none;
  background: transparent;
  position: absolute;
  top: -5px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  font-size: 14px;
  text-align: center;
  opacity: 1;
  z-index: 10;
  color: white;
}
.stomp .closer {
  right: -5px;
}
.stomp .power-on {
  left: -5px;
}
.stomp--paywalled .power-on, .stomp--paywalled .closer {
  color: var(--decorative-subdued) !important;
}
.stomp--disabled-effect .power-on, .stomp--disabled-effect .closer {
  color: var(--decorative-subdued) !important;
}
.stomp .genericname {
  position: absolute;
  top: 227px;
  left: 0px;
  width: 170px;
  text-align: center;
  color: #081111;
  font-size: 15px;
}
.stomp .btn-pro {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.stomp .is-paid-effect {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border-radius: var(--space-tiny);
  background: rgba(200, 132, 252, 0.95);
  color: var(--decorative-subdued);
  padding-bottom: 20px;
  white-space: normal;
  z-index: 9;
}
.stomp .is-paid-effect .upgrade-subtitle {
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 10px 5px;
}
.stomp .is-paid-effect .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.stomp .is-paid-effect .locked-icon {
  background-color: var(--background-elevated-highlight);
  width: 44px;
  height: 44px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-subdued);
}
.stomp .disabled-effect {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--space-tiny);
  background: rgba(200, 132, 252, 0.95);
  color: var(--decorative-subdued);
  white-space: normal;
  z-index: 9;
}
.stomp .disabled-effect .effect-disabled-text {
  width: 174px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-top: 10px;
  padding: 10px;
}
.stomp .disabled-effect .re-enable-button-container {
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 8px;
}
.stomp .disabled-effect .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.stomp .disabled-effect .icon {
  margin-top: 56px;
  width: 24px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--background-elevated-highlight);
}

.fx-uix {
  position: absolute;
  overflow: hidden;
  border-radius: var(--space-tiny);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-base);
}
.fx-uix--style-premium-dark {
  background-color: #181818;
}
.fx-uix--style-premium-dark .st-knob .circle-inner {
  fill: #181818;
}
.fx-uix__bg-gradient {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  background: radial-gradient(circle at 100% 0, var(--background-base) 0%, transparent 66%);
  opacity: 0.3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx-uix__bg-graphic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
  pointer-events: none;
}
.fx-uix__header {
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: flex-start;
  transition: background-color 0.1s linear;
  background-color: transparent;
  height: 42px;
}
.fx-uix__name {
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  margin: 0;
  order: 2;
  flex: 1;
  margin-top: 10px;
  min-width: 0;
  white-space: normal;
  line-height: 1.05;
  height: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.fx-uix__drag-icon {
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 16px;
  line-height: 16px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  color: var(--background-tinted-highlight);
  order: 0;
  pointer-events: none;
}
.pl-mobile .fx-uix__drag-icon {
  display: none;
}
.fx-uix:hover .fx-uix__header {
  background-color: var(--background-tinted-base);
}
.fx-uix:hover .fx-uix__drag-icon {
  color: var(--essential-subdued);
}
.fx-uix__power, .fx-uix__remove {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  padding: var(--space-tiny);
  line-height: 1;
  transition: color 0.1s linear;
}
.fx-uix__power:hover, .fx-uix__remove:hover {
  color: var(--text-base);
}
.fx-uix__power {
  order: 1;
}
.fx-uix__remove {
  order: 3;
}
.fx-uix__lifecycle-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 99px;
  border: 1px solid white;
  margin-left: 4px;
  vertical-align: middle;
  text-align: center;
  text-transform: capitalize;
}
.fx-uix__lifecycle-tag.alpha {
  background-color: #d70606;
  color: #ffffff;
}
.fx-uix__lifecycle-tag.beta {
  background-color: #0053e2;
  color: #ffffff;
}
.fx-uix__controls-area {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.fx-uix__controls-area > * {
  flex: 1;
}
.fx-uix__controls {
  padding: var(--space-tiny);
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: var(--space-nano);
}
.fx-uix__control {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1/span 12;
}
.fx-uix__control-label {
  width: 100%;
}

.fx-uix--chorusfx .fx-uix__control--preset {
  grid-column: 1/span 12;
  grid-row: 1/span 2;
}
.fx-uix--chorusfx .fx-uix__control--preset select {
  text-align: center;
}
.fx-uix--chorusfx .fx-uix__control--rate {
  grid-column: 1/span 6;
  grid-row: 7/span 8;
}
.fx-uix--chorusfx .fx-uix__control--depth {
  grid-column: 7/span 6;
  grid-row: 9/span 8;
}

.fx-uix--basicampfx .fx-uix__control--bass {
  grid-column: 1/span 6;
  grid-row: 4/span 8;
}
.fx-uix--basicampfx .fx-uix__control--treble {
  grid-column: 7/span 6;
  grid-row: 6/span 8;
}

.fx-uix--clipfx .fx-uix__control--type {
  grid-column: 1/span 12;
  grid-row: 1/span 2;
}
.fx-uix--clipfx .fx-uix__control--mix {
  grid-column: 2/span 5;
  grid-row: 4/span 7;
}
.fx-uix--clipfx .fx-uix__control--amount {
  grid-column: 7/span 5;
  grid-row: 8/span 7;
}
.fx-uix--clipfx .fx-uix__control--makeupfactor {
  grid-column: 2/span 4;
  grid-row: 12/span 4;
}

.fx-uix--delayfx .fx-uix__control--preset,
.fx-uix--stereodelayfx .fx-uix__control--preset {
  grid-column: 1/span 12;
  grid-row: 1/span 2;
}
.fx-uix--delayfx .fx-uix__control--preset select,
.fx-uix--stereodelayfx .fx-uix__control--preset select {
  text-align: center;
}
.fx-uix--delayfx .fx-uix__control--mix,
.fx-uix--stereodelayfx .fx-uix__control--mix {
  grid-column: 2/span 5;
  grid-row: 3/span 7;
}
.fx-uix--delayfx .fx-uix__control--time,
.fx-uix--stereodelayfx .fx-uix__control--time {
  grid-column: 7/span 5;
  grid-row: 5/span 7;
}
.fx-uix--delayfx .fx-uix__control--bpmsync,
.fx-uix--stereodelayfx .fx-uix__control--bpmsync {
  grid-column: 11/span 2;
  grid-row: 9/span 2;
}
.fx-uix--delayfx .fx-uix__control--lowcut, .fx-uix--delayfx .fx-uix__control--highcut, .fx-uix--delayfx .fx-uix__control--drywetmix,
.fx-uix--stereodelayfx .fx-uix__control--lowcut,
.fx-uix--stereodelayfx .fx-uix__control--highcut,
.fx-uix--stereodelayfx .fx-uix__control--drywetmix {
  grid-column-end: span 4;
  grid-row: 13/span 4;
}
.fx-uix--delayfx .fx-uix__control--lowcut,
.fx-uix--stereodelayfx .fx-uix__control--lowcut {
  grid-column-start: 1;
}
.fx-uix--delayfx .fx-uix__control--highcut,
.fx-uix--stereodelayfx .fx-uix__control--highcut {
  grid-column-start: 5;
}
.fx-uix--delayfx .fx-uix__control--drywetmix,
.fx-uix--stereodelayfx .fx-uix__control--drywetmix {
  grid-column-start: 9;
}

.fx-uix--juicydistfx .fx-uix__control--volume {
  grid-column: 7/span 5;
  grid-row: 5/span 5;
}
.fx-uix--juicydistfx .fx-uix__control--gain {
  grid-column: 2/span 5;
  grid-row: 5/span 5;
}
.fx-uix--juicydistfx .fx-uix__control--tone {
  grid-column: 2/span 3;
  grid-row: 11/span 5;
}
.fx-uix--juicydistfx .fx-uix__control--lowcut {
  grid-column: 5/span 4;
  grid-row: 11/span 5;
}
.fx-uix--juicydistfx .fx-uix__control--mix {
  grid-column: 9/span 3;
  grid-row: 11/span 5;
}
.fx-uix--juicydistfx .fx-uix__control--preset {
  grid-column: 1/span 12;
  grid-row: 1/span 2;
}
.fx-uix--juicydistfx .fx-uix__control--preset select {
  text-align: center;
}

.fx-uix--classicdistfx .fx-uix__control--gain {
  grid-column: 1/span 6;
  grid-row: 2/span 8;
}
.fx-uix--classicdistfx .fx-uix__control--tone {
  grid-column: 7/span 6;
  grid-row: 4/span 8;
}
.fx-uix--classicdistfx .fx-uix__control--lowcut {
  grid-column: 3/span 4;
  grid-row: 11/span 4;
}

.fx-uix--phaserfx .fx-uix__control--preset,
.fx-uix--stereochorusfx .fx-uix__control--preset {
  grid-column: 1/span 12;
  grid-row: 1/span 2;
}
.fx-uix--phaserfx .fx-uix__control--preset select,
.fx-uix--stereochorusfx .fx-uix__control--preset select {
  text-align: center;
}
.fx-uix--phaserfx .fx-uix__control--rate,
.fx-uix--stereochorusfx .fx-uix__control--rate {
  grid-column: 1/span 6;
  grid-row: 3/span 8;
}
.fx-uix--phaserfx .fx-uix__control--depth,
.fx-uix--stereochorusfx .fx-uix__control--depth {
  grid-column: 7/span 6;
  grid-row: 5/span 8;
}
.fx-uix--phaserfx .fx-uix__control--mix,
.fx-uix--stereochorusfx .fx-uix__control--mix {
  grid-column: 12/span 1;
  grid-row: 14/span 4;
}

.fx-uix--volume2fx .fx-uix__control--volume {
  grid-column: 1/span 12;
  grid-row: 1/span 14;
}

.presetselectorpicker {
  box-sizing: border-box;
  height: 50px;
  width: 250px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--decorative-subdued);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.presetselectorpicker:not(.can-step) .presetselectorpickerdescription {
  padding-left: var(--space-tiny-1);
}
.presetselectorpicker:not(.can-step) .arrowbutton, .presetselectorpicker:not(.can-step) .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .presetselectorpicker:not(.can-step) .pattern-selector-arrowbutton {
  display: none;
}
.presetselectorpicker .presetselectorpickerdescription {
  flex: 1;
  display: flex;
  flex-direction: row;
  transition: opacity 0.07s;
  overflow: hidden;
}
.presetselectorpicker .topcategoryicon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  margin-right: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--essential-base);
  font-size: 16px;
}
.presetselectorpicker .presetselectorpickerdescriptioninner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.presetselectorpicker .categoryname {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--text-base);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presetselectorpicker .patchname {
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--text-base);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presetselectorpicker .arrowbutton, .presetselectorpicker .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .presetselectorpicker .pattern-selector-arrowbutton {
  font-size: 12px;
  line-height: 9px;
  cursor: pointer;
  transition: color 0.03s;
  flex-shrink: 0;
}
.presetselectorpicker .arrowbutton .soundtrap-icon, .presetselectorpicker .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton .soundtrap-icon, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .presetselectorpicker .pattern-selector-arrowbutton .soundtrap-icon {
  margin-right: 0 !important;
}
.pl-mobile .presetselectorpicker, .guitarinstrumentgui-smaller .presetselectorpicker, .druminstrumentgui-smaller .presetselectorpicker, .vocalsinstrumentgui-smaller .presetselectorpicker {
  border-radius: 17px;
  border: solid 1px var(--essential-subdued);
  height: 34px;
  width: 156px;
  align-self: center;
  box-sizing: border-box;
  background-color: var(--background-elevated-base);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.pl-mobile .presetselectorpicker .categoryname, .pl-mobile .presetselectorpicker .topcategoryicon, .guitarinstrumentgui-smaller .presetselectorpicker .categoryname, .guitarinstrumentgui-smaller .presetselectorpicker .topcategoryicon, .druminstrumentgui-smaller .presetselectorpicker .categoryname, .druminstrumentgui-smaller .presetselectorpicker .topcategoryicon, .vocalsinstrumentgui-smaller .presetselectorpicker .categoryname, .vocalsinstrumentgui-smaller .presetselectorpicker .topcategoryicon {
  display: none;
}
.pl-mobile .presetselectorpicker .patchname, .guitarinstrumentgui-smaller .presetselectorpicker .patchname, .druminstrumentgui-smaller .presetselectorpicker .patchname, .vocalsinstrumentgui-smaller .presetselectorpicker .patchname {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
}
.pl-mobile .presetselectorpicker .arrowbutton, .pl-mobile .presetselectorpicker .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pl-mobile .presetselectorpicker .pattern-selector-arrowbutton, .guitarinstrumentgui-smaller .presetselectorpicker .arrowbutton, .guitarinstrumentgui-smaller .presetselectorpicker .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .guitarinstrumentgui-smaller .presetselectorpicker .pattern-selector-arrowbutton, .druminstrumentgui-smaller .presetselectorpicker .arrowbutton, .druminstrumentgui-smaller .presetselectorpicker .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .druminstrumentgui-smaller .presetselectorpicker .pattern-selector-arrowbutton, .vocalsinstrumentgui-smaller .presetselectorpicker .arrowbutton, .vocalsinstrumentgui-smaller .presetselectorpicker .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .vocalsinstrumentgui-smaller .presetselectorpicker .pattern-selector-arrowbutton {
  font-size: 12px;
  line-height: 9px;
}
.pl-mobile .presetselectorpicker.can-step, .guitarinstrumentgui-smaller .presetselectorpicker.can-step, .druminstrumentgui-smaller .presetselectorpicker.can-step, .vocalsinstrumentgui-smaller .presetselectorpicker.can-step {
  justify-content: space-between;
}
.pl-mobile .presetselectorpicker:not(.can-step), .guitarinstrumentgui-smaller .presetselectorpicker:not(.can-step), .druminstrumentgui-smaller .presetselectorpicker:not(.can-step), .vocalsinstrumentgui-smaller .presetselectorpicker:not(.can-step) {
  justify-content: space-around;
}

.presetselectorpickermainbutton {
  flex: 1;
  display: flex;
  min-width: 0;
  background: none;
  appearance: none;
  border: none;
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  padding: 0;
}

.presetselectorpicker-v2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.presetselectorpicker-v2__picker-container {
  display: flex;
  flex-direction: column;
}
.presetselectorpicker-v2__preset-picker {
  border-radius: 4px;
  border: 1px solid var(--decorative-subdued);
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 214px;
  height: 32px;
}
.presetselectorpicker-v2__preset-picker button {
  background: none;
  border: none;
  appearance: none;
}
.presetselectorpicker-v2__preset-picker-buttons {
  height: 100%;
  border-right: 1px solid var(--decorative-subdued);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.presetselectorpicker-v2__preset-picker-buttons button {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.presetselectorpicker-v2__preset-picker-buttons .soundtrap-icon {
  padding: 0;
  font-size: 11px;
  line-height: 9px;
}
.presetselectorpicker-v2__selected-preset-dropdown {
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.presetselectorpicker-v2__selected-preset-dropdown .soundtrap-icon {
  height: 100%;
  font-size: 11px;
  margin-right: 8px;
  margin-left: 4px;
}
.presetselectorpicker-v2__selected-preset-text {
  padding: 8px 0 8px 8px;
  font-size: 12px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.presetselectorpicker-v2__save-preset-button-container {
  margin-top: 8px;
}

.presetselectortopcategory, .presetselectorpresetitem, .presetselectorsubcategory {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 58px;
  border-bottom: solid 1px var(--background-tinted-base);
  cursor: pointer;
  position: relative;
  background-color: var(--background-elevated-base);
  transition: all 0.1s ease-in-out;
  box-sizing: border-box;
}
.presetselectortopcategory:hover, .presetselectorpresetitem:hover, .presetselectorsubcategory:hover {
  background-color: var(--background-elevated-highlight);
}
.presetselectortopcategory.fake, .fake.presetselectorpresetitem, .fake.presetselectorsubcategory {
  display: none;
}
.presetselectortopcategory.selected, .selected.presetselectorpresetitem, .selected.presetselectorsubcategory {
  background-color: var(--background-tinted-press);
}
.presetselectortopcategory.selected .topcategoryname, .selected.presetselectorpresetitem .topcategoryname, .selected.presetselectorsubcategory .topcategoryname,
.presetselectortopcategory.selected .subcategoryname,
.selected.presetselectorpresetitem .subcategoryname,
.selected.presetselectorsubcategory .subcategoryname {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--text-base);
  -webkit-font-smoothing: antialiased;
}
.presetselectortopcategory.selected .topcategoryicon, .selected.presetselectorpresetitem .topcategoryicon, .selected.presetselectorsubcategory .topcategoryicon {
  color: var(--background-elevated-base);
  background-color: var(--essential-base);
  opacity: 1;
}
.presetselectortopcategory.disabled .topcategoryicon, .disabled.presetselectorpresetitem .topcategoryicon, .disabled.presetselectorsubcategory .topcategoryicon {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: 0.3;
}
.presetselectortopcategory.disabled .topcategoryname, .disabled.presetselectorpresetitem .topcategoryname, .disabled.presetselectorsubcategory .topcategoryname {
  opacity: 0.3;
}
.presetselectortopcategory .topcategoryicon, .presetselectorpresetitem .topcategoryicon, .presetselectorsubcategory .topcategoryicon {
  width: 38px;
  height: 38px;
  margin: 0 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--background-tinted-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--essential-base);
  font-size: 16px;
}
.presetselectortopcategory .topcategoryicon--large, .presetselectorpresetitem .topcategoryicon--large, .presetselectorsubcategory .topcategoryicon--large {
  display: none;
}
.presetselectortopcategory .topcategoryicon-me, .presetselectorpresetitem .topcategoryicon-me, .presetselectorsubcategory .topcategoryicon-me {
  width: 32px;
  height: 32px;
  margin: 0 15px;
  border-radius: 50%;
  background-size: contain;
}
.presetselectortopcategory .topcategoryname, .presetselectorpresetitem .topcategoryname, .presetselectorsubcategory .topcategoryname {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-base);
  text-align: left;
  line-height: 1.43;
}

.presetselectorcategory-unseen-circle {
  background-color: var(--text-positive);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  margin-left: 0.75rem;
  visibility: hidden;
}
.presetselectorcategory-unseen-circle.unseenBadge {
  visibility: visible;
}

body.ff-handheld.layout-portrait .presetselectortopcategory .topcategoryicon--small, body.ff-handheld.layout-portrait .presetselectorpresetitem .topcategoryicon--small, body.ff-handheld.layout-portrait .presetselectorsubcategory .topcategoryicon--small {
  display: none;
}
body.ff-handheld.layout-portrait .presetselectortopcategory .topcategoryicon--large, body.ff-handheld.layout-portrait .presetselectorpresetitem .topcategoryicon--large, body.ff-handheld.layout-portrait .presetselectorsubcategory .topcategoryicon--large {
  display: flex;
}

.presetselectorsubcategory {
  padding-left: 12px;
  height: 44px;
}
.presetselectorsubcategory.selected {
  border-left: solid 2px var(--essential-base);
  border-bottom: none;
}
.presetselectorsubcategory .subcategoryname {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-base);
  text-align: left;
  line-height: 1.43;
}

@keyframes blinkpresetselectorpresetitem {
  0% {
    background-color: var(--background-press);
  }
  25% {
    background-color: var(--background-highlight);
  }
  50% {
    background-color: var(--background-press);
  }
  75% {
    background-color: var(--background-highlight);
  }
  100% {
    background-color: var(--background-press);
  }
}
.presetselectorpresetitem {
  padding-left: 12px;
  height: 44px;
}
.presetselectorpresetitem__text-button {
  align-self: stretch;
  flex: 1 1 0;
  overflow: hidden;
}
.presetselectorpresetitem.selected {
  border-left: solid 2px var(--essential-base);
  border-bottom: none;
}
.presetselectorpresetitem.animate {
  animation-duration: 2s;
  animation-name: blinkpresetselectorpresetitem;
}
.presetselectorpresetitem .lbl {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding-left: 7px;
  text-align: left;
}
.presetselectorpresetitem .lbl .name {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-base);
  line-height: 1.43;
  text-overflow: ellipsis;
}
.presetselectorpresetitem .lbl .plans {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-subdued);
}
.presetselectorpresetitem .lbl .spotlight {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  color: var(--essential-spotlight);
}
.presetselectorpresetitem .profile-icon {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  margin-right: 8px;
}
.presetselectorpresetitem .menu-icon {
  display: none;
}
.presetselectorpresetitem .preview + .lbl {
  padding-left: 0;
}
.presetselectorpresetitem .preview {
  flex-shrink: 0;
  margin-right: 13px;
  height: 100%;
  width: 24px;
  display: flex;
  align-items: center;
}
body.pl-mobile .presetselectorpresetitem .preview {
  width: 44px;
}
.presetselectorpresetitem .preview .flatbutton.iconbutton {
  border: none;
}
.presetselectorpresetitem .preview .flatbutton.iconbutton .preview-icon:not(.preview-minus) {
  font-size: 14px;
}
.presetselectorpresetitem .preview .flatbutton.iconbutton .preview-icon:not(.preview-minus):before {
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
  line-height: 135%;
  color: var(--essential-base);
}
.presetselectorpresetitem .preview .flatbutton.iconbutton .preview-icon:not(.preview-minus).preview-play:before {
  content: "\e059";
}
.presetselectorpresetitem .preview .flatbutton.iconbutton .preview-icon:not(.preview-minus).preview-pause:before {
  content: "\e056";
}
.presetselectorpresetitem .preview .flatbutton.iconbutton .preview-minus {
  display: block;
  background: url("/studio/assets/images/studio/preset-spinner.svg") center no-repeat;
  width: 24px;
  height: 24px;
  background-size: contain;
}
.presetselectorpresetitem .preview .flatbutton.iconbutton:hover {
  background-color: initial;
}
.presetselectorpresetitem .preview .flatbutton.iconbutton:hover .preview-icon:before {
  color: var(--essential-subdued);
}
.presetselectorpresetitem.selected .lbl .name {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family);
  font-weight: 500;
}
.presetselectorpresetitem.selected .lbl .plans {
  -webkit-font-smoothing: antialiased;
}
.presetselectorpresetitem.selected .lbl .spotlight {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.presetselectorpresetitem.selected .profile-icon {
  margin-right: 0;
}
.presetselectorpresetitem.selected .menu-icon {
  display: inline;
  padding: 10px;
  color: var(--essential-base);
  transition: color 0.1s;
}
.presetselectorpresetitem.selected .menu-icon:hover {
  color: var(--essential-subdued);
  transition: color 0.1s;
}
.presetselectorpresetitem.notselectable .lbl .plans {
  color: var(--text-subdued);
}
.presetselectorpresetitem .new-preset-badge {
  background-color: var(--background-base);
  position: relative;
  padding-left: 6px;
  padding-right: 4px;
  height: 18px;
  color: white;
  border-radius: 2px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  align-self: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.presetselectorpresetitem.selected .new-preset-badge::before {
  border-left-color: var(--background-press);
}

.suggested-preset-icon {
  margin-right: 6px;
}

.presetselectoremptycollection {
  background-color: var(--background-base);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.presetselectoremptycollection .empty-track {
  display: flex;
  flex-direction: row;
  width: 280px;
  background-color: var(--background-elevated-base);
  height: 40px;
  padding: 12px 20px;
  margin-bottom: 5px;
  border-radius: 4px;
}
.presetselectoremptycollection .empty-track-play {
  color: var(--text-base);
}
.presetselectoremptycollection .empty-track-contents {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 8px;
}
.presetselectoremptycollection .empty-track-contents div {
  background-color: var(--essential-subdued);
  height: 6px;
  width: 120px;
  justify-content: space-between;
}
.presetselectoremptycollection .empty-track-contents div + div {
  width: 70px;
}
.presetselectoremptycollection .copy {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  margin: 20px 0 10px;
}
.presetselectoremptycollection a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  text-decoration: underline;
}
.presetselectoremptycollection a i {
  font-size: 15px;
  margin-right: 3px;
}

body.pl-mobile .instrumentgui .presetselectorsubcategory {
  height: 44px;
}
body.pl-mobile .instrumentgui .presetselectorpicker {
  margin: 0;
}
body.pl-mobile .presetselectorpresetitem .fatfingerbutton {
  margin-right: 0;
}
body.pl-mobile .presetselectorpresetitem.notselectable .lbl .plans {
  color: var(--text-subdued);
}

body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent {
  width: 100% !important;
  height: 100%;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .closer {
  padding: 24px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent h2 {
  margin: 20px 0;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .shadow {
  height: 63px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .topcategorypane {
  width: 200px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory .topcategoryname, body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .topcategorypane .presetselectorsubcategory .topcategoryname, body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .topcategorypane .presetselectorpresetitem .topcategoryname {
  font-size: 15px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .subcategorypane {
  width: 160px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .subcategorypane .presetselectorsubcategory .subcategoryname {
  font-size: 15px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .presetselectorpane {
  height: initial;
  max-height: 100%;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .presetselectorpane .presetselectorpresetitem {
  padding-left: 0;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .presetselectorpane .presetselectorpresetitem .lbl {
  padding-left: 17px;
}
body.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .presetselectorpane .presetselectorpresetitem .preview + .lbl {
  padding-left: 0;
}
body.ff-handheld.layout-landscape .presetselectorpicker {
  margin-top: 16px;
  margin-bottom: 16px;
}

body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent {
  width: 100% !important;
  height: 100%;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent h2 {
  margin: 17px 0 16px;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .shadow {
  display: none;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorcontainer {
  display: flex;
  flex-direction: column;
  border-top: none;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 100vw;
  align-self: center;
  position: relative;
  background-color: var(--background-base);
  height: 49vw;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: solid var(--decorative-subdued);
  border-width: 1px 0;
  border-radius: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpanescroller {
  display: flex;
  flex-direction: row;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpanescroller.animateswipe {
  transition: transform 0.3s ease-out;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorsubcategory, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpresetitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50vw;
  height: auto;
  background-color: var(--background-base);
  border: none;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory.fake, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .fake.presetselectorsubcategory, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .fake.presetselectorpresetitem {
  display: flex;
  flex-direction: column;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory .topcategoryicon, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorsubcategory .topcategoryicon, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpresetitem .topcategoryicon {
  width: 31vw;
  height: 31vw;
  margin-bottom: 2vw;
  max-width: 124px;
  max-height: 124px;
  border: none;
  flex-shrink: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 50%;
  color: var(--text-base);
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory .topcategoryicon:before, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorsubcategory .topcategoryicon:before, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpresetitem .topcategoryicon:before {
  border-radius: 50%;
  content: "";
  width: 31vw;
  height: 31vw;
  border: none;
  margin-bottom: 2vw;
  max-width: 124px;
  max-height: 124px;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  top: 1px;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory .topcategoryname, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorsubcategory .topcategoryname, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpresetitem .topcategoryname {
  text-align: center;
  color: var(--text-subdued);
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory.selected .topcategoryicon, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .selected.presetselectorsubcategory .topcategoryicon, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .selected.presetselectorpresetitem .topcategoryicon {
  background-color: transparent;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory.selected .topcategoryicon:before, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .selected.presetselectorsubcategory .topcategoryicon:before, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .selected.presetselectorpresetitem .topcategoryicon:before {
  background-color: var(--essential-primary);
  opacity: 0.2;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory.selected .topcategoryname, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .selected.presetselectorsubcategory .topcategoryname, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .selected.presetselectorpresetitem .topcategoryname {
  color: var(--text-base);
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectortopcategory .topcategoryname:after, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorsubcategory .topcategoryname:after, body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .topcategorypane .presetselectorpresetitem .topcategoryname:after {
  display: none;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .subcategorypane {
  display: none;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane {
  max-height: 100%;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetheader .presetselectorpresetitem {
  display: none;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetheader .presetheadercontent {
  margin: 0;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetheader .presetheadercontent:after {
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
  content: "\e012";
  margin-right: 20px;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetheader.open .presetselectorpresetitem {
  display: flex;
  flex-direction: row;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetheader.open .presetheadercontent:after {
  content: "\e015";
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetselectorpresetitem {
  padding-left: 0;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetselectorpresetitem .lbl {
  padding-left: 17px;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .presetselectorpane .presetselectorpresetitem .preview + .lbl {
  padding-left: 0;
}
body.ff-handheld.layout-portrait .presetselectordialog .dialogcontent .subcategorypane .presetselectorsubcategory {
  height: 44px;
}

.guitarinstrumentgui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.guitarinstrumentgui .tracksetup-area {
  width: 100%;
  background-color: var(--background-base);
  color: #646464;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: var(--space-tiny-1);
}
.guitarinstrumentgui .instrumentgui-top {
  border-bottom: 1px solid var(--decorative-subdued);
  width: 100%;
  height: 116px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.pl-mobile .guitarinstrumentgui .instrumentgui-top .presetselectorpicker {
  width: 200px;
}
.guitarinstrumentgui .instrumentgui-top .quickcontrols {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-left: var(--space-large-2);
  justify-content: space-between;
  top: 0;
}
.guitarinstrumentgui .instrumentgui-top .quickcontrols .quickcontrolfxbase {
  margin: 0 var(--space-tiny);
}
.guitarinstrumentgui .instrumentgui-bottom .quickcontrols {
  position: relative;
  display: flex;
  top: calc(var(--space-large-1) * -1);
  right: 0;
  justify-content: space-between;
}
.guitarinstrumentgui .instrumentgui-bottom .quickcontrols .quickcontrolfxbase {
  margin: 0 var(--space-tiny);
}
body.pl-mobile .guitarinstrumentgui .instrumentgui-bottom {
  justify-content: center;
}
body.pl-mobile .guitarinstrumentgui .instrumentgui-bottom .fx-button {
  flex-grow: 0;
}
.guitarinstrumentgui.guitarinstrumentgui-smaller .presetselectorpicker {
  margin-bottom: 24px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
}
.guitarinstrumentgui .presetselector {
  left: 30px;
  width: 572px;
}
.guitarinstrumentgui .instrumentgui-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--background-base);
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
body.pl-mobile.layout-portrait .guitarinstrumentgui .instrumentgui-top {
  height: 53px;
  padding-left: 5px;
  padding-right: 5px;
}
body.pl-mobile.layout-portrait .guitarinstrumentgui .instrumentgui-top .savepresetbutton {
  display: none;
}

.vocalsinstrumentgui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.vocalsinstrumentgui .instrumentgui-top {
  width: 100%;
  max-width: 1200px;
  padding: 24px 20px;
  margin-top: 8px;
}
.vocalsinstrumentgui .flex-filler {
  flex-grow: 1;
}
.vocalsinstrumentgui.vocalsinstrumentgui-smaller .presetselectorpicker {
  display: flex;
  flex-direction: row;
}
.vocalsinstrumentgui .interaction-area {
  flex: 1;
  width: 100%;
  position: relative;
  background-color: var(--background-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vocalsinstrumentgui .tracksetup-area {
  width: 100%;
  background-color: var(--background-elevated-highlight);
  color: var(--text-base);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: var(--space-tiny-1);
}
.vocalsinstrumentgui .quickcontrols {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  width: 246px;
  justify-content: flex-end;
}
.vocalsinstrumentgui .quickcontrols .quickcontrolfx {
  margin: 0 15px;
}
.vocalsinstrumentgui .record-button {
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
  padding: 25px 34px;
  height: initial;
  letter-spacing: -0.3px;
  background-color: var(--background-base);
  color: var(--text-base);
}
.vocalsinstrumentgui .record-button:hover, .vocalsinstrumentgui .record-button:active {
  background-color: var(--background-highlight);
}
.vocalsinstrumentgui .stop-button {
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
  padding: 25px 34px;
  height: initial;
  letter-spacing: -0.3px;
  position: relative;
  border: none;
  box-shadow: 0 0 0 10px transparent;
  transition: none;
  margin-top: 10px;
  overflow: visible;
}
.vocalsinstrumentgui .stop-button:after {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  opacity: 0;
  border: 10px solid var(--background-highlight);
  border-radius: 50px;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.vocalsinstrumentgui .stop-button:hover, .vocalsinstrumentgui .stop-button:active {
  background-color: var(--background-elevated-highlight);
}
.vocalsinstrumentgui .stop-button .ic-stop {
  vertical-align: -3px;
  margin-right: 14px;
}
.vocalsinstrumentgui .stop-button.step2:after {
  opacity: 1;
}
.vocalsinstrumentgui .stop-button.step3:after {
  opacity: 1;
  box-shadow: 0 0 0 10px var(--background-press);
}
.vocalsinstrumentgui .stop-button.step4:after {
  opacity: 1;
}
.vocalsinstrumentgui .recording-label {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  color: #ffffff;
}
.vocalsinstrumentgui .recording-label.invisible {
  opacity: 0;
}
.vocalsinstrumentgui .recording-label .recording-dot {
  background-color: var(--background-base);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 15px;
}
.vocalsinstrumentgui .recording-label .recording-text {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-right: 10px;
}
.vocalsinstrumentgui .recording-label .recording-time {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.3px;
  min-width: 80px;
}
.vocalsinstrumentgui .bottom-padding {
  height: 50px;
}
.vocalsinstrumentgui .vocaltunerbutton {
  margin-left: 10px;
}
.vocalsinstrumentgui .vocaltunerbutton .st-button {
  width: 85px;
}
.vocalsinstrumentgui .noisereductionbutton {
  position: relative;
  margin-left: 10px;
}
.vocalsinstrumentgui .noisereductionbutton .new-ribbon {
  position: absolute;
  font-size: 11px;
  letter-spacing: 0.01em;
  width: 39px;
  height: 18px;
  font-weight: 500;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
body.pl-mobile .vocalsinstrumentgui .instrumentgui-top {
  width: 100%;
  padding: 6px 20px;
}
body.pl-mobile .vocalsinstrumentgui .instrumentgui-top .fx-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.pl-mobile .vocalsinstrumentgui .quickcontrols .quickcontrolfx {
  margin: 0 7px;
}
body.pl-mobile .vocalsinstrumentgui .flex-filler {
  flex: 1;
}
body.pl-mobile .vocalsinstrumentgui .savepresetbutton > button {
  height: 34px;
}
body.pl-mobile.layout-portrait .vocalsinstrumentgui instrumentgui-top {
  max-height: 130px;
  padding: 16px 20px;
}
body.pl-mobile.layout-portrait .vocalsinstrumentgui instrumentgui-top .quickcontrols {
  display: none;
}
body.pl-mobile.layout-portrait .vocalsinstrumentgui instrumentgui-top .fx-button {
  min-width: 130px;
  flex-grow: unset;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .quickcontrols {
  display: none;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .savepresetbutton {
  display: none;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top {
  max-height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .flex-filler {
  display: none;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .instrument-row-button-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .instrument-row-button-layout .presetselectorpicker {
  width: auto;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .fatfingerbutton .mango-button-regular-M, body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .fatfingerbutton .mango-icon-button-regular-M {
  height: 34px;
  width: auto;
}
body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .fatfingerbutton .mango-button-regular-M span, body.pl-mobile.ff-handheld .vocalsinstrumentgui .instrumentgui-top .fatfingerbutton .mango-icon-button-regular-M span {
  padding: 0 4px;
}
@media (max-width: 1150px) {
  .vocalsinstrumentgui .fx-button .fx-button__inner {
    height: 100%;
  }
}
@media (max-width: 775px) {
  .vocalsinstrumentgui .fx-button .fx-button__inner {
    height: 34px;
  }
}

.vocalsinstrumentgui-new-container {
  height: 100%;
  container-type: size;
  container-name: vocalsinstrumentgui-new-container;
}

.vocalsinstrumentgui-new-wrapper {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
}

.vocalsinstrumentgui-new {
  margin-top: var(--space-tiny-1);
  padding-left: var(--space-medium-2);
  padding-right: var(--space-medium-2);
  display: grid;
  grid-auto-flow: row;
  gap: var(--space-small-1) var(--space-small-1);
  grid-template-rows: 1fr;
  grid-template-columns: 210px 1fr 1fr 210px;
  grid-template-areas: "monitoring preset-selector quick-controls ." ". vocal-tuner vocal-cleanup .";
}
.vocalsinstrumentgui-new .quick-controls {
  display: flex;
  gap: var(--space-tiny-1);
}
.vocalsinstrumentgui-new .quick-controls .quickcontrolfxbase {
  width: 52px;
}
.vocalsinstrumentgui-new__monitoring {
  grid-area: monitoring;
}
.vocalsinstrumentgui-new__preset-selector {
  grid-area: preset-selector;
  justify-self: flex-end;
}
.vocalsinstrumentgui-new__quick-controls-wrapper {
  grid-area: quick-controls;
}
.v1-layout .vocalsinstrumentgui-new__quick-controls-wrapper {
  justify-self: flex-end;
}
.vocalsinstrumentgui-new__vocal-tuner {
  grid-area: vocal-tuner;
  display: flex;
  justify-content: flex-end;
}
.vocalsinstrumentgui-new__vocal-cleanup {
  grid-area: vocal-cleanup;
  display: flex;
  justify-content: flex-start;
}
.vocalsinstrumentgui-new .st-card-button {
  width: 100%;
}
.vocalsinstrumentgui-new__vocal-tuner .card-button-wrapper, .vocalsinstrumentgui-new__vocal-cleanup .card-button-wrapper {
  width: 100%;
  max-width: 300px;
}
.vocalsinstrumentgui-new__save-preset-button {
  grid-area: save-preset-button;
}

@container vocalsinstrumentgui-new-container (max-height: 240px) {
  .vocalsinstrumentgui-new-wrapper {
    justify-content: flex-start;
  }
}
@container vocalsinstrumentgui-new-container (max-height: 200px) {
  .vocalsinstrumentgui-new {
    row-gap: var(--space-medium);
  }
}
@container vocalsinstrumentgui-new-container (max-width: 1080px) {
  .vocalsinstrumentgui-new {
    grid-template-columns: 210px 1fr 1fr;
    grid-template-areas: "monitoring preset-selector quick-controls" ". vocal-tuner vocal-cleanup";
    padding-left: var(--space-small);
    padding-right: var(--space-small);
  }
}
@container vocalsinstrumentgui-new-container (max-width: 760px) {
  .vocalsinstrumentgui-new {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "preset-selector preset-selector preset-selector quick-controls quick-controls quick-controls" "monitoring monitoring vocal-tuner vocal-tuner vocal-cleanup vocal-cleanup";
  }
  .vocalsinstrumentgui-new .st-card-button__description {
    display: none;
  }
}
.vocal-tools-container {
  background-color: var(--background-base);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--space-tiny) 0;
}
.vocal-tools-container .vocal-tool-container {
  height: 138px;
}
.vocal-tools-container__vocal-tool {
  list-style: none;
}

.vocal-tool-container .vocal-tools-gem {
  background-color: var(--background-elevated-base);
  color: var(--text-subdued);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: fit-content;
  padding: var(--space-nano);
  margin-right: 6px;
}
.vocal-tool-container:not(:has(.vocal-tool-container)) {
  border-left: 1px solid var(--background-elevated-base);
  border-right: 1px solid var(--background-elevated-base);
}
.vocal-tool-container .vocal-tuner-type-toggle {
  font-size: 12px;
  display: flex;
  flex-direction: row;
  margin-top: var(--space-nano);
}
.vocal-tool-container .vocal-tuner-type-toggle .st-dropdown {
  margin-top: -5px;
}
.vocal-tool-container .vocal-tuner-type-toggle .st-dropdown button {
  max-width: 85px;
  height: 20px;
  padding-left: 2px;
  padding-right: 2px;
  margin-left: var(--space-tiny);
  border-color: var(--text-subdued);
  border-radius: 12px;
}
.vocal-tool-container .vocal-tuner-type-toggle .st-dropdown button .st-dropdown-value {
  font-size: 11px;
  color: var(--text-subdued);
}
.vocal-tool-container .vocal-tuner-type-toggle .st-dropdown button .soundtrap-icon {
  color: var(--text-subdued);
}
.vocal-tool-container .vocal-tuner-type-toggle .st-dropdown button .soundtrap-icon--svg svg {
  height: 0.75em;
  width: 0.75em;
}
.vocal-tool-container .vocal-tuner-type-toggle .st-dropdown button .st-dropdown-button-layout {
  gap: 0;
}
.vocal-tool-container .vocal-tuner-type-toggle__right-icon {
  margin: 0 0 0 5px;
  font-size: 0.7em;
}
.vocal-tool-container .vocal-tuner-type-toggle .st-button:not(.button_circular) .soundtrap-icon {
  margin-right: 0;
}

.vocal-tools-container .vocal-tuner {
  padding: var(--space-tiny) var(--space-small-1);
}

.vocal-tuner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}
.vocal-tuner__header {
  width: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.vocal-tuner__contents {
  flex: 1;
  position: relative;
}
.vocal-tuner__title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vocal-tuner__title {
  color: var(--text-base);
  font-size: 15px;
  margin: 0;
}
.vocal-tuner__toggle {
  justify-self: flex-end;
  padding: 0;
}
.vocal-tuner__toggle button {
  padding: 0;
}
.vocal-tuner__disabled-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(200, 132, 252, 0.95);
  color: var(--decorative-subdued);
  white-space: normal;
  z-index: 1;
}
.vocal-tuner__disabled-overlay__disabled-message {
  width: 174px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-top: 10px;
  padding: 10px;
}
.vocal-tuner__disabled-overlay .icon {
  width: 24px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--background-elevated-highlight);
}
.vocal-tuner .vocal-tuner__inactive-overlay-button {
  z-index: 10;
  background: transparent;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
}
.vocal-tuner .disabled {
  opacity: 0.5;
}

.vocal-tuner-controls {
  display: flex;
  gap: var(--space-small-1);
  align-items: center;
}
.vocal-tuner-controls--track .st-dropdown-button {
  width: 155px;
}
.vocal-tuner-controls--track .st-slider-container {
  width: 155px;
}
.vocal-tuner-controls--dialog {
  flex-direction: column;
  height: 210px;
}
.vocal-tuner-controls--dialog .st-dropdown-button {
  width: 185px;
}
.vocal-tuner-controls--dialog .st-slider-container {
  width: 185px;
}
.vocal-tuner-controls__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
}
.vocal-tuner-controls__control {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vocal-tuner-controls__control .st-slider-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: 4px;
}
.vocal-tuner-controls__control .st-dropdown {
  width: auto;
}
.vocal-tuner-controls__control .st-dropdown-button-layout {
  justify-content: flex-start;
  padding: 0;
}
.vocal-tuner-controls__control .st-dropdown-button__outline {
  border-color: var(--decorative-subdued);
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 6px;
}
.vocal-tuner-controls__amount {
  margin-bottom: 0;
}
.vocal-tuner-controls__control-label {
  color: var(--text-subdued);
  width: 50px;
  font-weight: 400;
  margin-right: var(--space-tiny-1);
  margin-bottom: 0;
}
.vocal-tuner-controls__slider-label {
  font-weight: 400;
  color: var(--text-base);
  margin-right: var(--space-tiny-1);
}
.vocal-tuner-controls .keysection {
  width: 250px;
  --keyboard-border-radius: 4px;
  --white-key-border-radius: 4px;
  --black-key-border-radius: 4px;
  --key-border: 1px;
  position: relative;
  height: 87px;
  border-radius: var(--keyboard-border-radius);
  background-size: 100% 100%;
}
.vocal-tuner-controls .keysection.disabled {
  opacity: 0.5;
}
.vocal-tuner-controls .keysection .whitekey {
  position: absolute;
  top: 0;
  width: 14.2857142857%;
  height: 100%;
  background-color: var(--background-base);
  border-radius: 0 0 var(--white-key-border-radius) var(--white-key-border-radius);
  border: 0.5px solid var(--text-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.vocal-tuner-controls .keysection .whitekey.key0 {
  left: 0;
  border-radius: var(--keyboard-border-radius) 0 var(--white-key-border-radius) var(--keyboard-border-radius);
}
.vocal-tuner-controls .keysection .whitekey.key2 {
  left: 14.2857142857%;
}
.vocal-tuner-controls .keysection .whitekey.key4 {
  left: 28.5714285714%;
}
.vocal-tuner-controls .keysection .whitekey.key5 {
  left: 42.8571428571%;
}
.vocal-tuner-controls .keysection .whitekey.key7 {
  left: 57.1428571429%;
}
.vocal-tuner-controls .keysection .whitekey.key9 {
  left: 71.4285714286%;
}
.vocal-tuner-controls .keysection .whitekey.key11 {
  left: 85.7142857143%;
  border-radius: 0 var(--keyboard-border-radius) var(--keyboard-border-radius) var(--white-key-border-radius);
}
.vocal-tuner-controls .keysection .blackkey {
  position: absolute;
  top: 0;
  width: 12.5%;
  margin-left: 0.5%;
  height: 50%;
  background-color: var(--background-base);
  border: 0.5px solid var(--text-base);
  border-radius: 0 0 var(--black-key-border-radius) var(--black-key-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.vocal-tuner-controls .keysection .blackkey.key1 {
  left: 7.1428571429%;
}
.vocal-tuner-controls .keysection .blackkey.key3 {
  left: 21.4285714286%;
}
.vocal-tuner-controls .keysection .blackkey.key6 {
  left: 50%;
}
.vocal-tuner-controls .keysection .blackkey.key8 {
  left: 64.2857142857%;
}
.vocal-tuner-controls .keysection .blackkey.key10 {
  left: 78.5714285714%;
}
.vocal-tuner-controls .keysection .key-name {
  top: 50%;
  color: var(--text-base);
  font-size: 13px;
  margin-bottom: var(--space-nano);
}
.vocal-tuner-controls .keysection .dot {
  border-radius: 2px;
  width: 23px;
  height: 4px;
  margin-bottom: var(--space-nano);
  background: var(--decorative-subdued);
}
.vocal-tuner-controls .keysection .dot.selected {
  background: var(--essential-subdued);
}

.vocal-region-process {
  display: flex;
  flex-direction: column;
  padding: var(--space-tiny) var(--space-small-1);
}
.vocal-region-process__title-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.vocal-region-process__title {
  color: var(--text-base);
  font-size: 15px;
  margin: 0 0 var(--space-small);
}
.vocal-region-process__button-container {
  color: var(--text-base);
  width: 180px;
  min-height: 90px;
  border-radius: 12px;
  background-color: var(--background-elevated-base);
}
.vocal-region-process__button-container.vocal-tuner-process {
  width: 489px;
}
.vocal-region-process__button-container.vocal-tuner-process .vocal-region-process__no-region-selected-text {
  display: flex;
  justify-content: center;
}
.vocal-region-process__paragraph {
  font-size: 11px;
  margin: 0;
}
.vocal-region-process__region-selected {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-tiny-1);
}
.vocal-region-process__region-selected-text {
  color: var(--text-subdued);
  margin-bottom: var(--space-tiny-1);
}
.vocal-region-process__no-region-selected {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-tiny-1);
}
.vocal-region-process__no-region-selected-text {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  text-align: center;
  white-space: initial;
}
.vocal-region-process__icon-v2 {
  color: var(--essential-subdued);
  font-size: 32px;
}

.thinvslider {
  position: absolute;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px 5px;
  width: 12px;
  height: 120px;
}
.thinvslider .track {
  position: relative;
  left: -1px;
  background-color: var(--decorative-subdued);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.thinvslider .slider {
  position: absolute;
  top: 15px;
  left: -1px;
  pointer-events: none;
  width: 100%;
  height: 90px;
  box-sizing: border-box;
}
.thinvslider .slider .sliderfg {
  position: absolute;
  box-sizing: border-box;
  width: 10px;
  height: 24px;
  left: 0;
  top: 50%;
  border: 1px solid var(--background-elevated-highlight);
  background-color: var(--decorative-base);
  margin: -12px 1px;
  box-shadow: 0 1px 2px var(--default-box-shadow-color);
  border-radius: 2px;
}
.thinvslider:not(.disabled) .thinvslider.selected .slider .sliderfg {
  background-color: var(--background-elevated-press);
}
.thinvslider .label-top {
  position: absolute;
  left: 50%;
  top: -6px;
  margin-left: -35px;
  width: 70px;
  text-align: center;
}
.thinvslider .label-bottom {
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -36px;
  width: 70px;
  text-align: center;
}
.thinvslider.disabled {
  pointer-events: none;
  opacity: var(--disabled-opacity);
  cursor: default;
}

.hslider {
  position: absolute;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  padding: 20px 10px;
  width: 140px;
  height: 44px;
}
.hslider .track {
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.hslider .track canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.hslider .slider {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 0;
  width: 118px;
  height: 100%;
  box-sizing: border-box;
}
.hslider .slider .sliderfg {
  position: absolute;
  width: 26px;
  height: 26px;
  left: 50%;
  top: 9px;
  border: 2px solid var(--essential-subdued);
  background-color: var(--decorative-subdued);
  border-radius: 13px;
  margin: 0px -12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.pl-computer .hslider:hover .slider .sliderfg {
  border-color: var(--essential-base);
}
.hslider.selected .slider .sliderfg {
  border-color: var(--essential-base);
}

.slider-label {
  position: absolute;
  color: #ffffff;
  background-color: var(--background-elevated-highlight);
  border-radius: 4px;
  padding: 4px;
  display: none;
  transform: translate(-50%, -150%);
  z-index: 2;
}
.selected .slider-label {
  display: block;
}

.slider-fill {
  background-color: var(--background-elevated-highlight);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transform-origin: bottom;
}

.led {
  position: absolute;
  width: 13px;
  height: 13px;
  cursor: pointer;
  border: 2px solid var(--background-elevated-highlight);
  border-radius: 13px;
  box-sizing: border-box;
}
.led.ledoff {
  background-color: #999999;
  border-color: #999999;
}
.pl-mobile .led {
  transition: opacity 150ms;
}
.pl-mobile .led:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .led:hover {
  background-color: var(--background-elevated-highlight);
}

.miniled {
  position: absolute;
  width: 10px;
  height: 10px;
  cursor: pointer;
  border: 1px solid var(--essential-subdued);
  border-radius: 15px;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
}
.miniled.ledoff {
  background-color: var(--essential-subdued);
  border-color: var(--essential-subdued);
}
.pl-mobile .miniled {
  transition: opacity 150ms;
}
.pl-mobile .miniled:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .miniled:hover {
  background-color: var(--background-elevated-highlight);
}
.pl-computer .miniled:hover.ledoff {
  background-color: var(--essential-subdued);
}
.miniled .label-right {
  color: var(--text-base);
  position: absolute;
  left: 12px;
  top: 0px;
  white-space: nowrap;
}
.miniled.ledinv.ledon {
  background-color: var(--essential-subdued);
  border-color: var(--essential-subdued);
}
.miniled.ledinv.ledoff {
  background-color: inherit;
}
.pl-mobile .miniled.ledinv {
  transition: opacity 150ms;
}
.pl-mobile .miniled.ledinv:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .miniled.ledinv:hover {
  background-color: var(--background-elevated-highlight);
}
.pl-computer .miniled.ledinv:hover.ledon {
  background-color: var(--essential-subdued);
}

.miniknob .knob,
.smallknob .knob,
.mediumknob .knob,
.bigknob .knob {
  background-color: var(--background-elevated-base);
  transition: background-color 0.1s linear;
}
.miniknob:hover .knob,
.smallknob:hover .knob,
.mediumknob:hover .knob,
.bigknob:hover .knob {
  background-color: var(--background-elevated-highlight);
}
.miniknob:active .knob, .miniknob.selected .knob,
.smallknob:active .knob,
.smallknob.selected .knob,
.mediumknob:active .knob,
.mediumknob.selected .knob,
.bigknob:active .knob,
.bigknob.selected .knob {
  background-color: var(--background-elevated-press);
}

.miniknob {
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  position: absolute;
  cursor: ns-resize;
  color: inherit;
}
.miniknob.disabled {
  opacity: var(--disabled-opacity);
}
.miniknob .knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  border-radius: 40px;
}
.miniknob .knobfg {
  box-sizing: border-box;
  position: absolute;
  top: 1px;
  left: 12px;
  width: 2px;
  height: 23px;
  border-top: 8px solid var(--essential-primary);
}
.miniknob .label-right {
  color: var(--text-base);
  position: absolute;
  left: 32px;
  top: 9px;
  font-size: 9px;
  white-space: nowrap;
}
.miniknob .label-bottom {
  position: absolute;
  left: 12px;
  top: 28px;
  margin-left: -50px;
  width: 100px;
  margin-right: -50px;
  text-align: center;
  font-weight: 400;
  color: var(--text-base);
}
.miniknob .label-top {
  position: absolute;
  left: 12px;
  top: -12px;
  margin-left: -50px;
  width: 100px;
  margin-right: -50px;
  text-align: center;
}
.miniknob .notchnoon {
  position: absolute;
  top: -4px;
  left: 12px;
  width: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  height: 5px;
}

.smallknob {
  position: absolute;
  width: 34px;
  cursor: ns-resize;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
}
.smallknob.disabled {
  opacity: var(--disabled-opacity);
}
.smallknob .knob {
  box-sizing: border-box;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 40px;
}
.smallknob .knobfg {
  position: absolute;
  box-sizing: border-box;
  top: 2px;
  left: 15px;
  width: 2px;
  height: 27px;
  border-top: 10px solid var(--essential-primary);
}
.smallknob .label-right {
  position: absolute;
  left: 41px;
  top: 9px;
  white-space: nowrap;
}
.smallknob .label-bottom {
  position: absolute;
  left: 16px;
  top: 34px;
  margin-left: -50px;
  width: 100px;
  margin-right: -50px;
  text-align: center;
}
.smallknob .label-top {
  position: absolute;
  left: 16px;
  top: -15px;
  margin-left: -50px;
  width: 100px;
  margin-right: -50px;
  text-align: center;
}
.smallknob .notchnoon {
  position: absolute;
  top: -4px;
  left: 17px;
  width: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  height: 5px;
}

.mediumknob {
  position: absolute;
  cursor: ns-resize;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  color: inherit;
}
.mediumknob.disabled {
  opacity: var(--disabled-opacity);
}
.mediumknob .knob {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 5px;
  left: 5px;
  border-radius: 40px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.mediumknob.nocanvas .knob {
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
  border: 1px solid var(--essential-primary);
}
.mediumknob .knobfg {
  position: absolute;
  box-sizing: border-box;
  top: 0px;
  left: 25px;
  width: 2px;
  height: 51px;
  border-top: 20px solid var(--essential-primary);
}
.mediumknob .label-right {
  position: absolute;
  left: 54px;
  top: 18px;
  white-space: nowrap;
}
.mediumknob .label-bottom {
  position: absolute;
  left: 25px;
  top: 55px;
  margin-left: -45px;
  width: 90px;
  margin-right: -45px;
  text-align: center;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 400;
}
.mediumknob .label-top {
  position: absolute;
  left: 25px;
  top: -13px;
  margin-left: -45px;
  width: 90px;
  margin-right: -45px;
  text-align: center;
}

.bigknob {
  position: absolute;
  cursor: ns-resize;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  color: inherit;
}
.bigknob.disabled {
  opacity: var(--disabled-opacity);
}
.bigknob .knob {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 80px;
  height: 80px;
  border-radius: 70px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.bigknob .knobfg {
  position: absolute;
  box-sizing: border-box;
  top: 1px;
  left: 47px;
  width: 2px;
  height: 95px;
  border-top-width: 30px;
  border-top-style: solid;
}
.bigknob .label-left {
  pointer-events: none;
  position: absolute;
  left: -111px;
  width: 100px;
  top: 40px;
  text-align: right;
  white-space: nowrap;
}
.bigknob .label-right {
  pointer-events: none;
  position: absolute;
  left: 106px;
  top: 40px;
  white-space: nowrap;
}
.bigknob .label-top {
  pointer-events: none;
  position: absolute;
  left: 48px;
  top: -16px;
  margin-left: -50px;
  width: 100px;
  margin-right: -50px;
  text-align: center;
}
.bigknob .label-bottom {
  pointer-events: none;
  position: absolute;
  left: 48px;
  top: 99px;
  margin-left: -50px;
  width: 100px;
  margin-right: -50px;
  text-align: center;
}

.knob-no-border .knob {
  background-color: transparent;
  transition: background-color 0.1s linear;
}
.knob-no-border:hover .knob {
  background-color: transparent;
}
.knob-no-border:active .knob, .knob-no-border.selected .knob {
  background-color: transparent;
}

.volume-slider {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
}
.volume-slider .slider {
  -webkit-appearance: none;
  width: 100%;
  background-color: transparent;
  --progress: 50%;
}
.volume-slider .slider::-webkit-slider-runnable-track {
  height: 6px;
  cursor: pointer;
  background: linear-gradient(var(--essential-bright-accent), var(--essential-bright-accent)) 0/var(--progress) 100% no-repeat, var(--decorative-subdued);
  border-radius: 3px;
}
.volume-slider .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  margin-top: -5px;
  border-radius: 8px;
  background: var(--essential-bright-accent);
  cursor: pointer;
  opacity: 0;
}
.volume-slider .slider:hover::-webkit-slider-thumb {
  opacity: 1;
}
.volume-slider .slider:hover::-webkit-slider-runnable-track {
  background: linear-gradient(var(--essential-primary), var(--essential-primary)) 0/var(--progress) 100% no-repeat, var(--decorative-subdued);
}

.sequence-tooltip {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  pointer-events: none;
  font-size: 21px;
}

.effects-editor-carousel {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--background-base);
}
.pl-mobile .effects-editor-carousel {
  flex-direction: column;
}
.effects-editor-carousel .effects-editor-carousel__left-controls-area {
  width: 66px;
  height: 251px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.effects-editor-carousel .effects-editor-carousel__left-controls-area__decorative-line {
  width: 1px;
  height: 89px;
}
.pl-mobile .effects-editor-carousel .effects-editor-carousel__left-controls-area__decorative-line {
  display: none;
}
.effects-editor-carousel .effects-editor-carousel__left-controls-area__decorative-line.gradient-above {
  background: linear-gradient(rgba(151, 71, 255, 0), rgb(151, 71, 255));
}
.effects-editor-carousel .effects-editor-carousel__left-controls-area__decorative-line.gradient-below {
  background: linear-gradient(rgb(151, 71, 255), rgba(151, 71, 255, 0));
}
.effects-editor-carousel .effects-editor-carousel__scroll-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}
.effects-editor-carousel__scroll-window {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--space-medium);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: stretch;
  justify-content: center;
}
.pl-mobile .effects-editor-carousel__scroll-window {
  height: fit-content;
}
.effects-editor-carousel .effects-editor-carousel__scroll-window::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.effects-editor-carousel .effects-editor-carousel__scroll-window::-webkit-scrollbar-track {
  border-radius: 10px;
  background: var(--background-tinted-base);
}
.effects-editor-carousel .effects-editor-carousel__scroll-window::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--essential-subdued);
  border: none;
}
.pl-computer .effects-editor-carousel .effects-editor-carousel__scroll-window::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
}
.effects-editor-carousel .effects-editor-carousel__scroll-window::-webkit-scrollbar-corner {
  background-color: transparent;
}
.effects-editor-carousel__scroll-window-inner {
  display: flex;
  align-items: start;
  max-height: 100%;
  padding: var(--space-tiny) var(--space-medium);
  padding-right: 0;
  width: min-content;
  min-width: 100%;
}
.pl-computer .effects-editor-carousel__scroll-window-inner {
  padding-left: 0;
}
.pl-mobile .effects-editor-carousel__scroll-window-inner {
  padding-bottom: 30vh;
}
.effects-editor-carousel__scroll-indicator {
  position: absolute;
  width: 112px;
  bottom: 0;
  top: 0;
  z-index: 100;
  flex-direction: column;
  background: linear-gradient(90deg, #280547 0%, rgba(40, 5, 71, 0) 100%);
  display: flex;
  padding: var(--space-small) var(--space-large-2) var(--space-small) var(--space-small);
  justify-content: center;
  transition: opacity 0.15s linear;
}
.effects-editor-carousel__scroll-indicator--disabled {
  opacity: 0;
  pointer-events: none;
}
.pl-mobile .effects-editor-carousel__scroll-indicator {
  display: none;
}
.effects-editor-carousel .soundtrap-icon {
  margin: 0;
}
.effects-editor-carousel__scroll-left {
  left: 0;
}
.effects-editor-carousel__scroll-right {
  right: 0;
  transform: rotate(-180deg);
}
.effects-editor-carousel__navigation-arrow {
  width: 44px;
  min-width: unset;
}
.effects-editor-carousel .effects-editor-carousel__placeholder-card, .effects-editor-carousel .effects-editor-carousel__container .stomp, .effects-editor-carousel__container .effects-editor-carousel .stomp {
  width: 174px;
  border: 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: end;
  margin: 0;
}
.pl-mobile .effects-editor-carousel .effects-editor-carousel__placeholder-card, .pl-mobile .effects-editor-carousel .effects-editor-carousel__container .stomp, .effects-editor-carousel__container .pl-mobile .effects-editor-carousel .stomp {
  scroll-snap-align: center;
}
.effects-editor-carousel__placeholders-container, .effects-editor-carousel__container {
  max-height: 290px;
  min-height: 241px;
  height: 100%;
}
.effects-editor-carousel__placeholders-container {
  position: relative;
  flex-grow: 1;
  padding-right: var(--space-medium);
  overflow: hidden;
}
.effects-editor-carousel__placeholders-container-inner {
  margin-left: var(--space-tiny);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.effects-editor-carousel__container {
  display: flex;
  flex-direction: row;
  gap: var(--space-tiny);
  padding-left: 0;
  list-style: none;
}
.effects-editor-carousel__container + .effects-editor-carousel__container {
  margin-left: var(--space-tiny);
}
.effects-editor-carousel__container .stomp {
  background: var(--background-elevated-base);
  height: 100%;
  box-shadow: none;
  color: var(--text-elevated-base);
  cursor: grab;
}
.effects-editor-carousel__container .stomp .name-ribbon {
  background-color: transparent !important;
  color: var(--text-elevated-base) !important;
  width: 100%;
  left: 0;
  top: 0;
}
.effects-editor-carousel__container .stomp .name-ribbon .draggable-icon {
  width: 16px;
  font-size: 16px;
  display: flex;
  margin: -30px auto 0;
  color: var(--decorative-subdued);
}
.pl-mobile .effects-editor-carousel__container .stomp .name-ribbon .draggable-icon {
  display: none;
}
.effects-editor-carousel__container .stomp .name-ribbon.has-spotlight > .draggable-icon {
  margin-top: -45px;
}
.effects-editor-carousel__container .stomp .power-on, .effects-editor-carousel__container .stomp .closer {
  color: var(--text-primary);
  top: -2px;
  transition: color 0.1s linear;
}
.effects-editor-carousel__container .stomp .power-on:hover, .effects-editor-carousel__container .stomp .closer:hover {
  color: var(--text-base);
}
.effects-editor-carousel__container .stomp .closer {
  right: -2px;
}
.effects-editor-carousel__container .stomp .power-on {
  left: -2px;
}
.effects-editor-carousel__container .stomp:active .name-ribbon, .effects-editor-carousel__container .stomp:hover .name-ribbon {
  background-color: var(--background-tinted-base) !important;
}
.effects-editor-carousel__container .stomp:active .name-ribbon .draggable-icon, .effects-editor-carousel__container .stomp:hover .name-ribbon .draggable-icon {
  color: var(--essential-subdued);
}
.effects-editor-carousel__container .dragging {
  margin-left: calc(var(--space-tiny) * -1);
}
.effects-editor-carousel__container .dragging .stomp {
  position: relative;
  z-index: 1;
  opacity: 0;
  /* uncomment these two line for visual debugging */
}
.effects-editor-carousel__preview {
  border-radius: 8px;
  scroll-snap-align: end;
  background-color: var(--background-highlight);
  border: 1px solid var(--background-elevated-highlight);
}
.effects-editor-carousel__preview + .effects-editor-card.dragging {
  display: none;
}
.effects-editor-carousel__placeholder-card {
  background-color: #430877;
  opacity: 0;
  flex-shrink: 0;
}
.effects-editor-carousel__placeholder-card:last-child {
  margin-right: 0;
}
.effects-editor-carousel__placeholder-card__inner {
  height: 100%;
}
.effects-editor-carousel__placeholder-card__add-effect {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.effects-editor-carousel__placeholder-card__add-effect:active, .effects-editor-carousel__placeholder-card__add-effect:hover {
  background-color: var(--background-elevated-highlight);
}
.effects-editor-carousel__placeholder-card__add-effect__title {
  margin: var(--space-nano);
  color: var(--text-base);
  word-wrap: break-word;
  white-space: pre-line;
  overflow-wrap: break-word;
  width: 80%;
  height: 20px;
}
.effects-editor-carousel__placeholder-card__add-effect__icon {
  transition: all 0.75s 0.25s;
  transform: rotate(0);
}
.effects-editor-carousel__placeholder-card__add-effect__icon-rotate {
  transform: rotate(45deg);
}
.effects-editor-carousel__placeholder-card:nth-child(1) {
  opacity: 1;
}
.effects-editor-carousel__placeholder-card:nth-child(2) {
  opacity: 0.8;
}
.effects-editor-carousel__placeholder-card:nth-child(3) {
  opacity: 0.6;
}
.effects-editor-carousel__placeholder-card:nth-child(4) {
  opacity: 0.4;
}
.effects-editor-carousel__placeholder-card:nth-child(5) {
  opacity: 0.2;
}

.effects-editor-card {
  position: relative;
}
.effects-editor-card__movement-controls {
  padding: 0 var(--space-tiny);
  justify-content: space-between;
  display: flex;
  position: absolute;
  /* Hide controls like screenreader only */
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.effects-editor-card__movement-controls .effects-editor-card__movement-controls-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: var(--background-base);
  color: var(--text-base);
  border: none;
}
.effects-editor-card:first-child .fatfingerbutton:last-child {
  margin-left: auto;
}
.effects-editor-card .effects-editor-card__movement-controls:focus-within {
  bottom: 0;
  right: 0;
  left: 0;
  width: auto;
  height: auto;
}
.effects-editor-card .transparentbutton:hover {
  color: #666666;
}

.nano-margin {
  margin: var(--space-nano);
}

.dynamicscompressor .reduction {
  pointer-events: none;
  position: absolute;
  left: 6px;
  top: 38px;
}
.dynamicscompressor .reduction .background {
  position: absolute;
  left: 6px;
  top: 21px;
  width: 18px;
  height: 169px;
  background: url("/studio/assets/images/studio/img_gr@1x.png") 0 0 no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .dynamicscompressor .reduction .background {
    background: url("/studio/assets/images/studio/img_gr@2x.png") 0 0 no-repeat;
    background-size: contain;
  }
}
.dynamicscompressor .reduction .dynamicscompressor__track {
  position: absolute;
  top: 24px;
  left: 0;
  height: 163px;
  width: 6px;
  overflow: hidden;
}
.dynamicscompressor .reduction .dynamicscompressor__track .dynamicscompressor__meter {
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 6px;
  background-color: #cdcdcd;
}

.notificationmessage {
  position: absolute;
  top: 50px;
  right: 20px;
  text-align: center;
  color: var(--text-base);
  cursor: pointer;
  z-index: 101;
}
.notificationmessage .inner {
  width: 280px;
  background-color: var(--background-elevated-base);
  padding: 15px 40px 15px 20px;
  box-sizing: border-box;
  font-family: var(--font-family);
  border-radius: 4px;
  border: none;
  font-size: 13px;
  line-height: 1.5;
}
.notificationmessage .inner .close-button {
  position: absolute;
  width: 44px;
  top: -10px;
  right: -10px;
}
.notificationmessage .inner .title {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.notificationmessage .inner .title-bold {
  font-family: var(--font-family);
  font-weight: 500;
}
.notificationmessage .inner .message {
  margin: 10px 0 0 0;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.notificationmessage .inner .closer {
  background-size: 10px 10px;
  background-position: 79% 20%;
}
body.pl-mobile .notificationmessage {
  top: 0;
  left: 0;
  right: 0;
}
body.pl-mobile .notificationmessage .inner {
  width: 100vw;
  border-radius: 0;
  padding: 5px;
}
body.pl-mobile .notificationmessage .inner .closer {
  opacity: 1;
}
@media (max-width: 450px) {
  .notificationmessage {
    right: 5vw;
  }
  .notificationmessage .inner {
    width: 90vw;
  }
}

.usermediadenied .allowimage {
  width: 330px;
  height: 289px;
  text-align: center;
  background: url("/studio/assets/images/studio/unblock_user_media_v2.png") no-repeat;
  background-size: contain;
  margin: 24px auto;
}

.pl-computer .hoveropacity:hover {
  opacity: 0.5;
}

.instruments-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.instruments-view.hidden {
  display: none;
}
.instruments-view.dragfile {
  outline: 6px dashed #5a00aa;
  border: none;
}

.middleheader {
  overflow: visible;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
}
.middleheader .compositionheader {
  position: relative;
  display: inline-block;
  background-color: var(--background-base);
  box-sizing: border-box;
  width: 2000px;
}
.middleheader .compositionheader .timeline-controls-header-wrapper {
  height: 50px;
}
.middleheader .compositionheader .playhead {
  will-change: transform;
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: -1px;
  width: 1px;
  height: 100%;
}
.middleheader .compositionheader .playhead .head {
  position: absolute;
  top: 0px;
  left: -8px;
  width: 15px;
  height: 25px;
  color: var(--essential-primary);
}
.middleheader .compositionheader .playhead .body {
  position: absolute;
  top: 0px;
  width: 1pt;
  height: 100%;
  background-color: var(--essential-primary);
}
.middleheader .compositionheader .playhead.discussion-comments-active {
  height: 74px;
}
.parts-layer .middleheader .compositionheader .playhead.discussion-comments-active {
  height: 98px;
}
.middleheader .compositionheader .dragguide {
  pointer-events: none;
  position: absolute;
  top: 0px;
  width: 1px;
  height: 100%;
  background-color: #3c3c3c;
}
.middleheader .compositionheader .cyclestartguide,
.middleheader .compositionheader .cycleendguide {
  pointer-events: none;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  padding-top: 25px;
  background-clip: content-box;
  width: 1px;
  height: 100%;
  background-color: #999999;
  z-index: 1;
}
.middleheader .compositionheader .cyclestartguide.spotlight {
  background-color: rgba(247, 247, 247, 0.5);
}
.middleheader .compositionheader .cyclestartguide.spotlight {
  background-color: rgba(247, 247, 247, 0.5);
  border-right: 1px solid var(--background-base);
  margin-top: 25px;
  padding-top: 0;
}
.middleheader .compositionheader .cycleendguide.spotlight {
  background-color: rgba(247, 247, 247, 0.5);
  border-left: 1px solid var(--background-base);
  margin-top: 25px;
  padding-top: 0;
}
.middleheader .compositionheader .recordmarker {
  pointer-events: none;
  width: 100%;
  height: 25px;
  box-sizing: border-box;
}
.middleheader .compositionheader .recordmarker .fill {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0;
  height: 4px;
  background-color: #8549cc;
  opacity: 0;
  transition: opacity 100ms linear;
}
.middleheader .compositionheader .recordmarker .fill.active {
  opacity: 1;
}
.middleheader .compositionheader .gridcontrols {
  z-index: 1;
  position: absolute;
  top: 0;
  right: -20px;
  height: 49px;
  background-color: var(--background-base);
  box-sizing: border-box;
  padding-right: 75px;
}
@media (max-height: 320px) {
  .middleheader .compositionheader .gridcontrols {
    display: none;
  }
}
.pl-computer .middleheader .compositionheader .gridcontrols .fatfingerbutton {
  margin-left: 10px;
}
.middleheader .compositionheader .gridcontrols .fatfingerbutton.cycletoggle > button.selected {
  background-color: var(--background-base);
  border-color: var(--decorative-subdued);
  color: var(--text-base);
}
.pl-computer .middleheader .compositionheader .gridcontrols {
  overflow: hidden;
  /*padding-right: 25px;*/
}

.basic-tab-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0;
  list-style: none;
}
@media (max-width: 959px) {
  .basic-tab-bar {
    justify-content: space-around;
  }
  .basic-tab-bar .tab {
    flex: 1;
  }
}
.basic-tab-bar button.tab {
  border: none;
  background: none;
}
.basic-tab-bar .tab {
  flex: 0 0 auto;
  text-align: center;
  padding-bottom: 7px;
  overflow: hidden;
  float: left;
  position: relative;
  margin-right: 40px;
}
@media (max-width: 550px) {
  .basic-tab-bar .tab {
    margin-right: 10px;
  }
}
.basic-tab-bar .tab .active-bar {
  height: 2px;
  position: absolute;
  background-color: var(--essential-primary);
  bottom: -5px;
  left: 0;
  right: 0;
  transition: bottom 0.2s;
  -webkit-transition: bottom 0.2s;
}
.basic-tab-bar .tab.active-show .active-bar {
  bottom: 0;
}
.basic-tab-bar .tab.active-show p {
  font-weight: 500;
  color: var(--essential-primary);
}
.basic-tab-bar .tab.active-show p:hover {
  color: var(--essential-primary);
}
.basic-tab-bar .tab p {
  color: var(--text-subdued);
  margin: 0;
  font-size: 18px;
}
.basic-tab-bar .tab:hover {
  cursor: pointer;
}
.basic-tab-bar .tab:hover p {
  color: var(--text-base);
}
.basic-tab-bar .tab button.tab-btn {
  background: none;
  padding: 0;
  margin: 0;
  border: none;
}

.tracklistscrollable {
  contain: strict;
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  vertical-align: top;
}
body.pl-mobile .tracklistscrollable {
  overflow-y: hidden;
}
.tracklistscrollable .compositionarea {
  position: absolute;
  left: 200px;
  top: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background-color: var(--background-base);
  z-index: 0;
}
.tracklistscrollable .compositionarea .beat-marks {
  position: absolute;
  opacity: 0.2;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.tracklistscrollable .compositionarea .beat-marks.flashing {
  animation: marksflashinganim 0.3s linear 0 1 alternate none running;
}
.tracklistscrollable .compositionarea .lanes {
  position: relative;
}
.tracklistscrollable .compositionarea .lanes .tracklane {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  border-bottom: 1px solid var(--decorative-subdued);
}
.tracklistscrollable .compositionarea .lanes .tracklane .tracklane-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.tracklistscrollable .compositionarea .lanes .tracklane.selected .tracklane-background {
  background-color: var(--background-highlight);
}
.tracklistscrollable .compositionarea .lanes .tracklane .wrongdragfiletarget {
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  background: rgba(200, 200, 200, 0.8);
  font-size: 13px;
  color: #666;
  padding-top: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  overflow: hidden;
  z-index: 100000;
}
.tracklistscrollable .compositionarea .lanes .tracklane > .regions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.tracklistscrollable .compositionarea .lanes .tracklane .recoverlay {
  pointer-events: none;
  position: absolute;
  top: 0;
  background-color: #5a00aa;
  z-index: 10000;
  height: 100%;
}
.tracklistscrollable .compositionarea .lanes .tracklane.desaturated {
  opacity: 0.5;
}
.tracklistscrollable .compositionarea .lanes .tracklane .preview-region {
  align-items: center;
  background-color: #999999;
  border-radius: 7px;
  cursor: pointer;
  display: none;
  height: 100%;
  justify-content: center;
  opacity: 0.9;
  position: absolute;
  width: 200px;
}
.tracklistscrollable .compositionarea .lanes .tracklane .preview-region .soundtrap-icon {
  color: #c8c8c8;
  font-size: 16px;
}
.tracklistscrollable .compositionarea .lanes .tracklane .preview-region.shimmer {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(to right, #999999 8%, #b3b3b3 18%, #999999 33%);
  background-size: 1000px 100%;
}
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
.tracklistscrollable .compositionarea .lanes .hintarea {
  background-color: var(--background-base);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer {
  padding: 10px 0 0 0;
  max-width: 345px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer li {
  list-style: none;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item {
  border: 0;
  height: 100px;
  width: 105px;
  margin: 5px;
  background-color: var(--background-tinted-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  white-space: normal;
  text-align: center;
  cursor: pointer;
  color: var(--text-subdued);
  border-radius: 4px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item .hintlayer-item-icon {
  font-size: 30px;
  color: var(--text-subdued);
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item .hintlayer-item-icon svg {
  display: block;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item .hintlayer-item-icon svg path {
  fill: var(--text-subdued);
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item .hintlayer-item-title {
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.15;
  letter-spacing: 0.2px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item:hover {
  color: var(--text-subdued);
  background-color: var(--decorative-subdued);
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .hintlayercontainer .hintlayer-item:hover .hintlayer-item-icon {
  color: var(--text-subdued);
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .drag-icon {
  font-size: 112px;
  color: #c8c8c8;
  line-height: 1em;
  margin-bottom: 30px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .draghint {
  cursor: pointer;
  color: #999999;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .button-row {
  margin-top: 40px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .button-row button {
  margin-left: 3px;
  margin-right: 3px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer .invite-row {
  color: #5a00aa;
  margin-top: 20px;
  cursor: pointer;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer.compact .drag-icon {
  display: none;
}
.tracklistscrollable .compositionarea .lanes .hintarea .hintlayer.compact .button-row {
  margin-top: 10px;
}
.tracklistscrollable .compositionarea .lanes .hintarea .dragphantomlane {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
}
.tracklistscrollable .compositionarea .regionmarquee {
  position: absolute;
  top: 0;
  z-index: 10000;
}
.tracklistscrollable .compositionarea .regionmarquee > div {
  box-sizing: border-box;
  position: absolute;
  border: 1px dashed #ffffff;
  background: #5a00aa;
  opacity: 0.3;
}

.dragphantomregion {
  pointer-events: none;
  position: absolute;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: #999999;
  opacity: 0.9;
  z-index: 10000;
}

.bottom-sidebar {
  contain: strict;
  box-sizing: border-box;
  border-bottom: 1px solid var(--background-elevated-highlight);
  box-shadow: 0 -2px 11px rgba(0, 0, 0, 0.08);
  background-color: var(--background-elevated-base);
  position: absolute;
  will-change: transform;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: transform 0.3s, opacity 0.3s;
  transform: translateY(0);
  transform-origin: 50% 100%;
  opacity: 1;
  display: flex;
  flex-direction: column;
}
.bottom-sidebar.to-hidden, .bottom-sidebar.from-hidden {
  transform: translateY(90px);
  opacity: 0;
}
.bottom-sidebar.step-sequencer-visible .bs-contents {
  overflow: hidden;
}
.layout-landscape.pl-mobile .bottom-sidebar.step-sequencer-visible .bs-header .bs-toolbar .presetselector-wrapper-landscape {
  display: block;
}
.layout-landscape.pl-mobile .bottom-sidebar.step-sequencer-visible .bs-header .bs-toolbar .step-sequencer-tools-landscape {
  display: block;
  margin-left: 20px;
}
.bottom-sidebar.drummer-visible .bs-contents {
  overflow: hidden;
}
.layout-landscape.pl-mobile .bottom-sidebar.drummer-visible .bs-header .bs-toolbar .presetselector-wrapper-landscape,
.layout-landscape.pl-mobile .bottom-sidebar.drummer-visible .bs-header .bs-toolbar .drummer-tools-landscape {
  display: block;
}
.bottom-sidebar .bs-contents {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}
.bottom-sidebar.adjusting-height {
  overflow: hidden;
}
.bottom-sidebar .bs-header {
  box-sizing: border-box;
}
.bottom-sidebar .bs-header .divider {
  height: 20px;
  width: 100%;
  text-align: center;
  cursor: ns-resize;
}
.pl-mobile .bottom-sidebar .bs-header .divider {
  height: 28px;
}
.bottom-sidebar .bs-header .divider .grip {
  height: 2px;
  margin: 4px auto 0 auto;
  background-color: var(--decorative-subdued);
  width: 50px;
}
.pl-mobile .bottom-sidebar .bs-header .divider .grip {
  height: 4px;
  margin: 12px auto 0 auto;
  background-color: #d2d2d2;
  border-radius: 8px;
}
.bottom-sidebar .bs-header .divider.studio-focus-visible {
  outline-offset: -2px;
}
.bottom-sidebar .bs-header .divider:hover .grip {
  background-color: var(--essential-subdued);
}
.bottom-sidebar .bs-header .step-sequencer-tools-landscape {
  display: none;
}
.bottom-sidebar .bs-header .step-sequencer-tools-landscape .toolbutton {
  margin-right: 8px;
  border-color: #d2d2d2;
  font-size: 13px;
  line-height: 10px;
  padding-bottom: 11px;
  padding-top: 10px;
}
.bottom-sidebar .bs-header .step-sequencer-tools-landscape .toolbutton.active {
  background-color: #5a00aa;
  color: #ffffff;
}
.layout-landscape.pl-mobile .bottom-sidebar .bs-header .step-sequencer-tools-landscape {
  display: block;
  position: absolute;
  left: 20px;
}
.bottom-sidebar .bs-header .presetselector-wrapper-landscape {
  display: none;
}
.bottom-sidebar .bs-header .presetselector-wrapper-landscape .presetselectorpicker {
  width: 200px;
}
.layout-landscape.pl-mobile .bottom-sidebar .bs-header .presetselector-wrapper-landscape {
  display: block;
  position: absolute;
  right: 20px;
}
.bottom-sidebar .bs-header .bs-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
}
.layout-landscape.pl-mobile .bottom-sidebar .bs-header .bs-toolbar .presetselector-wrapper-landscape,
.layout-landscape.pl-mobile .bottom-sidebar .bs-header .bs-toolbar .step-sequencer-tools-landscape {
  display: none;
}
.layout-landscape.pl-mobile .bottom-sidebar .bs-header .bs-toolbar {
  height: auto;
}
.bottom-sidebar .bs-header .bs-toolbar .button-group {
  min-width: 110px;
}
.pl-mobile .bottom-sidebar .bs-header .bs-toolbar .button-group {
  width: 90px;
  height: 28px;
  padding-top: 5px;
  padding-bottom: 6px;
}
.bottom-sidebar .bs-header .bs-toolbar .fatfingerbutton > button {
  border-radius: 0;
  border-left-width: 0;
}
.bottom-sidebar .bs-header .bs-toolbar .toolbar-tabs {
  display: flex;
  height: 49px;
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
.bottom-sidebar > .closer {
  position: absolute;
  left: 5px;
  top: 10px;
  z-index: 1;
}
body.pl-mobile .bottom-sidebar > .closer {
  top: 0px;
  left: 0px;
}
.bottom-sidebar .new-badge-green {
  background-color: #5fc882;
  text-transform: uppercase;
  padding: 1px 5px 2px 5px;
  position: relative;
  margin-left: 6px;
  border-radius: 2px;
  color: #ffffff;
}

.pianoroll {
  --high-contrast-outer-border-color: #1e1e1e;
  --high-contrast-inner-border-color: white;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid var(--decorative-subdued);
  border-bottom: 1px solid var(--decorative-subdued);
}
.st-dark-theme .pianoroll, .sampler-crossfade-icon .pianoroll, .sampler-crossfade-handle-chamfer .pianoroll, .sampler-crossfade-handle .pianoroll, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .pianoroll {
  --high-contrast-outer-border-color: white;
  --high-contrast-inner-border-color: #1e1e1e;
}
.pianoroll .piano-roll-footer {
  margin-left: 70px;
  left: 200px;
  width: 925px;
  height: 26px;
  flex-shrink: 0;
}
.pianoroll .keys-and-grid {
  height: 2250px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--background-base);
}
.pl-mobile .pianoroll .keys-and-grid {
  height: 2852px;
}
.pianoroll .keys-and-grid .grid {
  position: absolute;
  border-left: 70px solid transparent;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pianoroll .piano-roll-header {
  height: 100%;
  width: 200px;
  display: flex;
}
.pianoroll .piano-roll-center {
  position: relative;
  margin-left: -74px;
  display: flex;
  flex-direction: column;
}
.pianoroll .piano-roll-timeline-wrapper {
  margin-left: 70px;
  position: relative;
}
.pianoroll .piano-roll-cycle-marker {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--decorative-subdued);
  opacity: 0.2;
  border-radius: 2px;
}
.pianoroll .piano-roll-beat-ruler {
  position: relative;
  top: 0;
  margin-top: 14px;
  display: flex;
}
.pianoroll .lane {
  position: relative;
  border-top: 1px solid var(--decorative-subdued);
  border-bottom: 1px solid var(--decorative-subdued);
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: var(--background-base);
}
.pianoroll .lane .scrollable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: var(--background-base);
}
.pianoroll .lane .playhead {
  will-change: transform;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 70px;
  width: 1px;
  height: 100%;
  background-color: var(--essential-primary);
  color: var(--essential-primary);
}
.pianoroll .lane .playhead .head {
  position: absolute;
  top: -23px;
  left: -8px;
  width: 12px;
  height: 33px;
}
.pianoroll .lane .playhead.alternative-playhead-enabled {
  top: -3px;
  height: calc(100% + 3px);
}
.pianoroll .lane .piano-roll-toolbar {
  position: absolute;
  top: -45px;
  right: 54px;
  z-index: 10000;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: var(--space-small);
}
.pianoroll .lane .piano-roll-toolbar .toolbar {
  display: flex;
}
.pl-mobile .pianoroll .lane .piano-roll-toolbar {
  top: -40px;
  padding: 0;
  right: calc(50% - 82px);
}
.pianoroll .lane .piano-roll-toolbar .icon-velocity {
  font-size: 13px;
  line-height: 0;
  margin: 0 2px;
}
.pianoroll .lane .piano-roll-toolbar .ic-edit,
.pianoroll .lane .piano-roll-toolbar .ic-delete,
.pianoroll .lane .piano-roll-toolbar .ic-cursor-filled {
  vertical-align: middle;
}
.pianoroll .lane .piano-roll-toolbar .separator {
  margin: 10px 0 0 15px;
  background-color: var(--background-elevated-highlight);
  width: 1px;
  height: 24px;
  display: inline-block;
  vertical-align: top;
}
.pianoroll .lane .piano-roll-toolbar.floating-toolbar-enabled {
  position: absolute;
  bottom: var(--space-tiny-1);
  left: 50%;
  z-index: 10000;
  top: unset;
  right: unset;
  gap: unset;
  transform: translateX(-55px);
}
.pianoroll .lane .piano-roll-toolbar.floating-toolbar-enabled .toolbar {
  display: flex;
  border-radius: 50px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
}
.pianoroll .lane .piano-roll-toolbar.floating-toolbar-enabled .fatfingerbutton {
  padding: 0;
}
.pianoroll .lane .piano-roll-toolbar.floating-toolbar-enabled .fatfingerbutton button:not(.selected) {
  background-color: var(--background-elevated-base);
}
.pianoroll .lane .regions {
  position: absolute;
  border-left: 70px solid transparent;
  border-right: 15px solid transparent;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.pl-mobile .pianoroll .lane .regions {
  border-right: 0;
}
.pianoroll .lane .pianorollregion {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
}
.pianoroll .lane .pianorollregion.single-segment {
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: var(--decorative-subdued) !important;
}
.pianoroll .lane .pianorollregion.single-segment:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.05;
  background-color: var(--background-base);
}
.pianoroll .lane .pianorollregion.single-segment.selected:before {
  opacity: 0.1;
}
.pianoroll .lane .pianorollregion .segments .segment {
  border-radius: 5px;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: var(--decorative-subdued) !important;
}
.pianoroll .lane .pianorollregion .segments .segment.last {
  border-right-width: 1px;
}
.pianoroll .lane .pianorollregion .segments .segment:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.05;
  background-color: var(--background-base);
}
.pianoroll .lane .pianorollregion.selected .segments .segment:before {
  opacity: 0.1;
}
.pianoroll .lane .stripes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("/studio/assets/images/studio/piano_roll_stripes_zoomed.png") 0 -59px repeat;
  opacity: 0.14;
}
.pl-mobile .pianoroll .lane .stripes {
  background: url("/studio/assets/images/studio/piano_roll_stripes_2x.png") 0 -74px repeat;
}
.pianoroll .lane canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pianoroll .lane .regionsnotes {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.pianoroll .lane .regionsnotes .notes {
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 100%;
  border-right: 2px solid transparent;
  overflow: hidden;
}
.pianoroll .lane .regionsnotes .notes .rollnote {
  position: absolute;
  height: 16px;
  background-color: var(--background-elevated-press);
  border: 1px solid var(--essential-base);
  border-radius: 3px;
}
.pl-mobile .pianoroll .lane .regionsnotes .notes .rollnote {
  height: 20px;
  z-index: auto;
}
.pianoroll .lane .regionsnotes .notes .rollnote .head {
  position: absolute;
  height: 16px;
  width: 8px;
  top: -1px;
  left: -1px;
}
.pianoroll .lane .regionsnotes .notes .rollnote .tail {
  position: absolute;
  height: 16px;
  width: 8px;
  top: -1px;
  right: -1px;
}
.pl-mobile .pianoroll .lane .regionsnotes .notes .rollnote .tail:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 3px;
  width: 4px;
  height: 12px;
  border: 1px solid var(--essential-base);
  border-left: none;
}
.pianoroll .lane .regionsnotes .notes .rollnote .vel {
  display: none;
}
.pianoroll .lane .regionsnotes .notes .rollnote.selected {
  z-index: 1;
}
.pianoroll .lane .regionsnotes .notes .rollnote.disabled {
  position: absolute;
  height: 16px;
  background-color: rgba(100, 100, 100, 0.2);
  border-color: rgba(0, 0, 0, 0.07);
  cursor: inherit;
  pointer-events: none;
}
.pianoroll .lane .regionsnotes .notes .rollnote.ghost {
  opacity: 0.5;
}
.pianoroll .lane .regionsnotes.editoperation-none .notes .rollnote {
  cursor: default;
}
.pianoroll .lane .regionsnotes.editoperation-none .notes .rollnote .head {
  cursor: col-resize;
}
.pianoroll .lane .regionsnotes.editoperation-none .notes .rollnote .tail {
  cursor: col-resize;
}
.pianoroll .lane .regionsnotes.editoperation-none .notes.disabled {
  cursor: inherit;
}
.pianoroll .lane .regionsnotes.editmode-draw {
  cursor: url("/studio/assets/images/studio/pencil.png") 1 15, pointer;
}
.pianoroll .lane .regionsnotes.editmode-erase .notes .rollnote {
  cursor: pointer;
}
.pianoroll .lane .regionsnotes.editmode-erase .notes .rollnote .head {
  cursor: pointer;
}
.pianoroll .lane .regionsnotes.editmode-erase .notes .rollnote .tail {
  cursor: pointer;
}
.pianoroll .lane .regionsnotes.editmode-velocity .notes .rollnote .vel {
  position: absolute;
  bottom: 1px;
  height: 4px;
  background-color: var(--essential-base);
  left: 0;
  pointer-events: none;
  display: block;
  border-radius: 1px;
}
.pianoroll .lane .regionsnotes.editmode-velocity .notes .rollnote .head {
  cursor: default;
}
.pianoroll .lane .regionsnotes.editmode-velocity .notes .rollnote .tail {
  cursor: default;
}
.pianoroll .lane .regionsnotes.editoperation-body {
  cursor: default;
}
.pianoroll .lane .regionsnotes.editoperation-head, .pianoroll .lane .regionsnotes.editoperation-tail {
  cursor: col-resize;
}
.pianoroll .lane .regionsnotes.editoperation-altclick {
  cursor: copy;
}
.pianoroll .lane .marquee {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.pianoroll .lane .marquee > div {
  position: absolute;
  z-index: 10000;
}
.pianoroll .lane .marquee > div .marquee-background {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--essential-primary);
  background: var(--background-base);
  opacity: 0.3;
  border-radius: 4px;
}
.pianoroll .lane .marquee > div.enabled .marquee-background {
  animation-name: pulsating-marquee;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  display: block !important;
}
.pianoroll .lane .marquee .marquee-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-100% - var(--space-nano)));
  background: var(--background-elevated-base);
  color: var(--text-base);
  padding: 1px 5px 2px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}
.pianoroll .lane .regionsnotes .notes .rollnote.selected,
.pianoroll .lane .regionsnotes .notes .rollnote.preview {
  background-color: var(--background-elevated-base);
  box-shadow: 0 0 0 1.5px var(--high-contrast-outer-border-color);
  border-color: var(--high-contrast-inner-border-color);
}

@keyframes pulsating-marquee {
  0% {
    width: 0;
    height: 0;
    margin-top: 0;
    margin-left: 0;
  }
  50% {
    width: 80px;
    margin-top: -40px;
    height: 80px;
    margin-left: -40px;
  }
  100% {
    width: 0;
    height: 0;
    margin-top: 0;
    margin-left: 0;
  }
}
.piano-roll-chord-dropdown {
  position: fixed;
  background-color: rgba(255, 255, 0, 0.5);
}

.piano-roll-note-transforms-reactive {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-nano);
}

.piano-roll__note-info {
  border: 1px solid var(--border);
  position: relative;
  display: flex;
  gap: var(--space-nano);
  align-items: center;
  background: var(--background-base);
  color: var(--text-base);
  padding: var(--space-tiny);
  border-radius: var(--space-tiny);
  white-space: nowrap;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.piano-roll__note-info span {
  min-width: 1em;
  text-align: center;
}
.piano-roll__note-info:active {
  background: var(--background-press);
}
.piano-roll__note-info .soundtrap-icon {
  margin-top: 2px;
}

.velocity {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  align-items: center;
}
.velocity .toolbar-icon {
  color: var(--text-subdued);
  margin-right: 10px;
  width: 15px;
}

.velo-slider {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
}
.velo-slider .track {
  border: 1px solid var(--essential-subdued);
  height: 6px;
  width: 100%;
  border-radius: 2px;
}
.velo-slider .track .inner-track {
  margin-right: 20px;
  position: relative;
  width: calc(100% - 18px);
  margin-left: 1px;
}
.velo-slider .track .inner-track .handle {
  width: 16px;
  height: 16px;
  background-color: var(--text-base);
  border-radius: 8px;
  position: absolute;
  top: -6px;
}
.velo-slider .track .inner-track .handle:after {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  width: 44px;
  height: 44px;
}
.velo-slider .track .inner-track .handle.selected {
  background-color: var(--text-subdued);
}

.pianoroll .keys {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 100%;
  border-left: 1px solid var(--decorative-subdued);
  border-right: 1px solid transparent;
  background-color: var(--essential-subdued);
  cursor: default;
  z-index: 2;
}
.pianoroll .keys .white-key,
.pianoroll .keys .black-key {
  transition: 0.1s ease-in-out all;
  transition-property: background-color;
}
.pianoroll .keys .white-key {
  z-index: 3;
  height: 30px;
  background-color: var(--white-key);
  color: transparent;
  border-top: 1px solid var(--white-key-border);
  border-radius: 0 4px 4px 0;
  line-height: 17px;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  padding-right: 8px;
  padding-top: var(--space-nano);
}
.pl-mobile .pianoroll .keys .white-key {
  height: 38px;
}
.pianoroll .keys .white-key:hover, .pianoroll .keys .white-key.hovered, .pl-mobile .pianoroll .keys .white-key.active-key {
  background-color: var(--white-key-hovered);
  color: var(--white-key-text);
}
.pianoroll .keys .white-key.highlighted {
  border-right: 5px solid var(--white-key-highlight);
  padding-right: 3px;
}
.pianoroll .keys .black-key {
  float: left;
  margin-top: -5.5px;
  height: 15px;
  width: 50%;
  z-index: 4;
  background-color: var(--black-key);
  border-radius: 0 4px 4px 0;
  color: transparent;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
}
.pl-mobile .pianoroll .keys .black-key {
  margin-top: -11px;
  height: 22px;
}
.pianoroll .keys .black-key:hover, .pianoroll .keys .black-key.hovered, .pl-mobile .pianoroll .keys .black-key.active-key {
  background-color: var(--black-key-hovered);
  color: var(--black-key-text);
}
.pianoroll .keys .black-key.highlighted {
  border-right: 5px solid var(--black-key-highlight);
}
.pianoroll .keys .white-key.middle-c {
  background-color: var(--white-key-middle-c);
}
.pianoroll .keys .white-key.middle-c:hover {
  background-color: var(--white-key-middle-c-hovered);
}
.pianoroll .keys .white-key.active-key {
  background-color: var(--white-key-pressed);
}
.pianoroll .keys .black-key.active-key {
  background-color: var(--black-key-pressed);
}
.pianoroll .keys .white-key.middle-c.active-key {
  background-color: var(--white-key-middle-c-pressed);
}

.compositionfooter {
  position: relative;
  bottom: 0;
  left: 200px;
  width: 925px;
  height: 26px;
  background: var(--background-base);
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
}
@media (max-height: 320px) {
  .compositionfooter {
    display: none !important;
  }
}

body.pl-computer .compositionfooter.pl-computer-visible {
  display: flex;
}

.scroll-zoom-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  flex: 1 1 100%;
  width: 0;
}
.scroll-zoom-controls.potato-fix-it-week-2025 {
  flex: 1 1 auto;
  width: initial;
}
.scroll-zoom-controls .zoom-controls {
  margin-right: 20px;
}
.scroll-zoom-controls .zoom-controls button {
  width: 24px;
  height: 24px;
  font-size: 14px;
}
.scroll-zoom-controls .position-scrollbar {
  overflow-x: scroll;
}
.scroll-zoom-controls .position-scrollbar div {
  height: 1px;
}

.movehandle {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.moving .movehandle {
  cursor: url("/studio/assets/images/studio/hand_grabbing.png") 8 5, pointer;
}

.baseregion {
  --region-background-color: var(--background-base);
  --region-border-radius: 8px;
  --region-inner-border-radius: 6.5px;
  --high-contrast-outer-border-color: #1e1e1e;
  --high-contrast-inner-border-color: white;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
  cursor: default;
  border-radius: var(--region-border-radius);
}
.st-dark-theme .baseregion, .sampler-crossfade-icon .baseregion, .sampler-crossfade-handle-chamfer .baseregion, .sampler-crossfade-handle .baseregion, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .baseregion {
  --high-contrast-outer-border-color: white;
  --high-contrast-inner-border-color: #1e1e1e;
}
.baseregion .loading-sr-description {
  display: none;
}
.baseregion .collaborator-container {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
  pointer-events: none;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
}
.baseregion .collaborator-container .chat-face {
  margin-right: 0;
}
.baseregion .collaborator-container .chat-face:not(:first-child) {
  margin-left: -22px;
}
.baseregion .collaborator-sr-description {
  display: none;
}
.baseregion.hide-loading-label .loading-container .loading-label {
  display: none;
}
.baseregion.hide-unavailable-label .unavailable-container .unavailable-label {
  display: none;
}
.baseregion.hide-status-pill .status-container .status-pill {
  display: none;
}
.baseregion .unavailable-container {
  pointer-events: none;
  border-radius: var(--border-radius);
  padding: 0 var(--space-tiny);
  display: none;
  align-items: center;
  position: absolute;
  inset: 0;
  color: var(--text-base);
}
.baseregion .unavailable-container .icon {
  width: 11px;
  height: 11px;
  fill: var(--text-base);
}
.baseregion .unavailable-container .unavailable-pill {
  display: flex;
  align-items: center;
  position: relative;
  gap: var(--space-nano);
  padding: var(--space-nano) var(--space-tiny);
  border-radius: 50px;
  background-color: var(--background-base);
}
.baseregion .unavailable-container .unavailable-pill span {
  top: -1px;
}
.baseregion .unavailable-container .unavailable-pill * {
  position: relative;
  z-index: 3;
}
.baseregion.is-unavailable .unavailable-container {
  display: flex;
}
.baseregion .loading-container {
  z-index: 10;
  display: none;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--region-border-radius);
  align-items: center;
  position: absolute;
  inset: 0;
  color: var(--text-base);
}
.baseregion .loading-container:after {
  --minimum-duration: 1.5s;
  --duration-scaling-factor: 300;
  --minimum-gradient-feather: 15%;
  --maximum-gradient-feather: 200px;
  --gradient-feather-width: min(15%, 200px);
  border-radius: var(--region-border-radius);
  content: "";
  position: absolute;
  inset: 0;
  width: 400%;
  background: linear-gradient(to right, var(--region-background-color) 0%, var(--region-background-color) calc(25% - var(--gradient-feather-width)), transparent 25%, var(--region-background-color) calc(25% + var(--gradient-feather-width)), var(--region-background-color) 50%, var(--region-background-color) calc(75% - var(--gradient-feather-width)), transparent 75%, var(--region-background-color) calc(75% + var(--gradient-feather-width)), var(--region-background-color) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: moveGradient max(var(--minimum-duration), var(--animation-duration) / var(--duration-scaling-factor)) linear infinite;
}
@keyframes moveGradient {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
.baseregion .loading-container:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--region-border-radius);
  background: url("/studio/assets/images/studio/region-loading-waveform.svg"), var(--background-base);
  background-repeat: repeat-x;
  background-size: 248px 100%;
  background-position: left center;
}
.baseregion .loading-container .icon {
  width: 11px;
  height: 11px;
  fill: var(--text-base);
}
.baseregion .loading-pill {
  z-index: 20;
  position: absolute;
  margin-left: var(--space-tiny);
  left: 0;
  display: flex;
  align-items: center;
  position: relative;
  gap: var(--space-nano);
  padding: var(--space-nano) var(--space-tiny);
  border-radius: 50px;
  background-color: var(--background-base);
}
.baseregion .loading-pill span {
  top: -1px;
}
.baseregion .loading-pill * {
  position: relative;
  z-index: 3;
}
.baseregion.is-loading .loading-container {
  display: flex;
}
.baseregion.is-loading .svg-region,
.baseregion.is-loading .region-collaborators,
.baseregion.is-loading canvas {
  display: none;
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.baseregion .loading-spinner {
  --border-size: 2px;
  --spinner-border-radius: 50px;
  position: absolute;
  inset: -1px;
  border-radius: var(--spinner-border-radius);
  overflow: hidden;
  z-index: 2;
}
.baseregion .loading-spinner::before {
  content: "";
  display: block;
  background: conic-gradient(var(--background-elevated-highlight) 0turn 0.125turn, transparent 0.125turn 0.25turn);
  position: absolute;
  width: 120%;
  padding-bottom: 120%;
  left: 50%;
  top: 50%;
  margin-left: -60%;
  margin-top: -60%;
  border-radius: 100%;
  z-index: 1;
  animation: spin 5s linear infinite;
}
.baseregion .loading-spinner::after {
  content: "";
  position: absolute;
  inset: var(--border-size);
  background: var(--background-base);
  z-index: 2;
  border-radius: var(--spinner-border-radius);
}
.baseregion .segments {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.baseregion .segments .segment {
  position: absolute;
  height: 100%;
  border-radius: 7px;
  transition: none;
}
.baseregion.flashing {
  background-color: #5a00aa !important;
  transition: none;
}
.baseregion.flashing2 {
  background-color: #9da9be !important;
  transition: background-color 1.5s linear;
}
.baseregion.desaturated {
  opacity: var(--disabled-opacity);
}
.baseregion.ghost {
  opacity: 0.2;
  pointer-events: none;
}
.baseregion .svg-region {
  width: 100%;
  position: absolute;
  top: 0;
  border-radius: var(--region-border-radius);
}
.baseregion .svg-region g {
  stroke: rgba(255, 255, 255, 0.5);
}
.baseregion .svg-region g polyline {
  fill: none;
  stroke-miterlimit: 0;
}
.baseregion .svg-region g .region-fade-path {
  fill: rgba(255, 255, 255, 0.4);
  stroke: rgba(255, 255, 255, 0.4);
}

.noteregion.flashing2,
.audioregion.flashing2 {
  background-color: rgba(255, 255, 255, 0.75) !important;
  transition: background-color 1.2s linear;
}

.noteregion.flashing3,
.audioregion.flashing3 {
  transition: background-color 1s linear;
  transition: border-color 0s;
}

.noteregion canvas,
.audioregion canvas {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.5;
  border-radius: 7px;
}

.tracklane .regions .baseregion.single-segment,
.tracklane .regions .baseregion.is-loading,
.tracklane .regions .baseregion .segments .segment {
  background-color: var(--region-background-color);
}
.tracklane .regions .baseregion.selected::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  box-shadow: inset 0 0 0 2px var(--high-contrast-outer-border-color), inset 0 0 0 4px var(--high-contrast-inner-border-color);
  border-radius: var(--region-border-radius);
}
.tracklane .regions .baseregion.selected:not(.single-segment) {
  background-color: var(--high-contrast-inner-border-color);
}
.tracklane .regions .baseregion.selected:not(.single-segment)::after {
  box-shadow: inset 0 0 0 2px var(--high-contrast-outer-border-color);
}
.tracklane .regions .baseregion.selected .segment::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  border-radius: var(--region-inner-border-radius);
  box-shadow: inset 0 4px 0 0 var(--high-contrast-inner-border-color), inset 0 -4px 0 0 var(--high-contrast-inner-border-color);
}
.tracklane .regions .baseregion.selected .segment:first-child::after {
  border-top-left-radius: var(--region-border-radius);
  border-bottom-left-radius: var(--region-border-radius);
  box-shadow: inset 4px 0 0 0 var(--high-contrast-inner-border-color), inset 0 4px 0 0 var(--high-contrast-inner-border-color), inset 0 -4px 0 0 var(--high-contrast-inner-border-color);
}
.tracklane .regions .baseregion.selected .segment:last-child::after {
  border-top-right-radius: var(--region-border-radius);
  border-bottom-right-radius: var(--region-border-radius);
  box-shadow: inset -4px 0 0 0 var(--high-contrast-inner-border-color), inset 0 4px 0 0 var(--high-contrast-inner-border-color), inset 0 -4px 0 0 var(--high-contrast-inner-border-color);
}

.region-tools {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  cursor: default;
  border-radius: 7px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  z-index: 9999;
  container-type: inline-size;
}
.region-tools .region-tools-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 2px 0 3px 0;
}
.region-tools .name-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-color: transparent;
  border-width: 4px 20px 20px 6px;
  line-height: 1;
  border-style: solid;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
}
.region-tools .name-label span.chord {
  font-family: var(--font-family);
  font-weight: 700;
  padding-left: 4px;
  padding-right: 4px;
}
body.pl-computer .region-tools .name-label {
  opacity: 1;
}
body.pl-computer .region-tools .starthandle .icn {
  opacity: 0.8;
}
body.pl-computer .region-tools .endhandle .icn {
  opacity: 0.8;
}
body.pl-computer .region-tools .loophandle .icn {
  opacity: 0.8;
}
body.pl-computer .region-tools .shortcutbutton {
  opacity: 1;
}
body.pl-computer .region-tools .stretchhandle .icn {
  opacity: 0.8;
}
.region-tools .starthandle {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 17px;
  cursor: col-resize;
}
.region-tools .starthandle .icn {
  position: absolute;
  pointer-events: none;
  -webkit-mask-image: url("/studio/assets/images/studio/ic-drag-left.svg");
  mask-image: url("/studio/assets/images/studio/ic-drag-left.svg");
  background-color: #ffffff;
  left: 0;
  bottom: 0;
  margin: 0 0 1px 3px;
  height: 24px;
  width: 24px;
  -webkit-mask-size: 22px 22px;
  -webkit-mask-repeat: no-repeat;
}
body.pl-computer .region-tools .starthandle:active {
  margin-left: -100px;
  width: 218px;
  z-index: 1;
}
body.pl-computer .region-tools .starthandle:active .icn {
  left: 102px;
}
body.pl-mobile .region-tools .starthandle {
  margin-left: 0;
  width: 44px;
}
body.pl-mobile .region-tools .starthandle .touchtarget {
  margin-left: 0;
  width: 44px;
  height: 44px;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
body.pl-mobile .region-tools .starthandle .icn {
  margin-left: 4px;
  margin-bottom: 20px;
  opacity: 1;
  left: 2px;
  top: calc(50% - 16px);
  height: 32px;
  width: 32px;
  mask-size: auto;
  -webkit-mask-size: auto;
  mask-repeat: inherit;
  -webkit-mask-repeat: inherit;
}
.region-tools .endhandle,
.region-tools .stretchhandle {
  position: absolute;
  top: 50%;
  left: 0;
  height: 50%;
  width: 17px;
  margin-left: -17px;
}
body.pl-computer .region-tools .endhandle:active,
body.pl-computer .region-tools .stretchhandle:active {
  margin-left: -117px;
  width: 217px;
  z-index: 1;
}
body.pl-computer .region-tools .endhandle:active .icn,
body.pl-computer .region-tools .stretchhandle:active .icn {
  right: 100px;
}
body.pl-mobile .region-tools .endhandle,
body.pl-mobile .region-tools .stretchhandle {
  top: 0;
  height: 100%;
  margin-left: -44px;
  width: 44px;
}
body.pl-mobile .region-tools .endhandle .touchtarget,
body.pl-mobile .region-tools .stretchhandle .touchtarget {
  margin-left: 0;
  width: 44px;
  height: 44px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
body.pl-mobile .region-tools .endhandle .icn,
body.pl-mobile .region-tools .stretchhandle .icn {
  margin-right: 4px;
  margin-bottom: 20px;
  opacity: 1;
  right: 4px;
  top: calc(50% - 16px);
  height: 32px;
  width: 32px;
  mask-size: auto;
  -webkit-mask-size: auto;
  mask-repeat: inherit;
  -webkit-mask-repeat: inherit;
}
.region-tools .endhandle {
  cursor: col-resize;
}
.region-tools .endhandle .icn {
  position: absolute;
  pointer-events: none;
  background-color: #ffffff;
  -webkit-mask-image: url("/studio/assets/images/studio/ic-drag-right.svg");
  mask-image: url("/studio/assets/images/studio/ic-drag-right.svg");
  right: 0;
  bottom: 0;
  margin: 0 1px 1px 0;
  height: 24px;
  width: 24px;
  mask-size: 22px 22px;
  -webkit-mask-size: 22px 22px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
.region-tools .stretchhandle {
  cursor: ew-resize;
}
.region-tools .stretchhandle .icn {
  position: absolute;
  pointer-events: none;
  right: 2px;
  bottom: -3px;
  height: 19px;
  width: 17px;
  background-image: url("/studio/assets/images/studio/time-stretch-handle.svg");
  background-repeat: no-repeat;
  opacity: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .region-tools .stretchhandle .icn {
    background-image: url("/studio/assets/images/studio/time-stretch-handle.svg");
    background-size: 14px;
  }
}
.region-tools .loophandle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 17px;
  cursor: url("/studio/assets/images/studio/cursor_loop.png") 8 7, pointer;
}
.pl-mobile .region-tools .loophandle {
  top: 0px;
  right: -26px;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background-color: var(--background-elevated-press);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid var(--essential-subdued);
  z-index: 99999;
}
.region-tools .loophandle .icn {
  position: absolute;
  pointer-events: none;
  right: 0;
  top: 0;
  margin: 6px 6px 0 0;
  height: 14px;
  width: 14px;
  background: url("/studio/assets/images/studio/rh_loop.png") no-repeat;
  opacity: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .region-tools .loophandle .icn {
    background-image: url("/studio/assets/images/studio/rh_loop_2x.png");
    background-size: 14px;
  }
}
.pl-mobile .region-tools .loophandle .icn {
  left: 9px;
  top: -11px;
}
body.pl-computer .region-tools .loophandle:active {
  margin-right: -100px;
  width: 217px;
  z-index: 1;
}
body.pl-computer .region-tools .loophandle:active .icn {
  right: 100px;
}
body.pl-mobile .region-tools .loophandle {
  width: 34px;
  margin-right: 0;
}
body.pl-mobile .region-tools .loophandle .touchtarget {
  margin-left: 0;
  width: 34px;
  height: 100%;
}
body.pl-mobile .region-tools .loophandle .icn {
  margin-right: 11px;
  margin-top: 20px;
  opacity: 1;
}
.region-tools .fadeinhandle,
.region-tools .fadeouthandle {
  position: absolute;
  top: 0;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  z-index: 2;
  border-radius: 50px;
  cursor: ew-resize;
}
.region-tools .fadeinhandle .plupp,
.region-tools .fadeouthandle .plupp {
  border: 1px solid #9b9b9b;
  background-color: #ffffff;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  margin-left: 4px;
  border-radius: 4px;
}
body.pl-computer .region-tools .fadeinhandle:hover,
body.pl-computer .region-tools .fadeouthandle:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
body.pl-computer .region-tools .fadeinhandle:hover .plupp,
body.pl-computer .region-tools .fadeouthandle:hover .plupp {
  border-color: #646464;
}
body.pl-mobile .region-tools .fadeinhandle,
body.pl-mobile .region-tools .fadeouthandle {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid #ffffff;
  margin-top: -22px;
  height: 44px;
  width: 44px;
}
body.pl-mobile .region-tools .fadeinhandle .plupp,
body.pl-mobile .region-tools .fadeouthandle .plupp {
  display: none;
}
.region-tools .fadeinhandle {
  left: 0;
  margin-left: -8px;
}
body.pl-mobile .region-tools .fadeinhandle {
  margin-left: -22px;
}
.region-tools .fadeouthandle {
  right: 0;
  margin-right: -8px;
}
body.pl-mobile .region-tools .fadeouthandle {
  margin-right: -22px;
}
.region-tools.ghost {
  opacity: 0.1;
  pointer-events: none;
}
.region-tools.ghost .fadeinhandle,
.region-tools.ghost .fadeouthandle {
  display: none;
}
.region-tools .shortcutbuttons {
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -10px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.region-tools .shortcutbutton {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 100ms, background-image 100ms, border-color 100ms, color 100ms, opacity 100ms;
  border: none;
  padding: 9px;
  min-width: 76px;
  border-radius: 10px;
  background-color: var(--background-elevated-base);
  color: var(--text-primary);
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  height: 17px;
  line-height: 17px;
  padding: 0 7px;
  border-width: 0;
  opacity: 0;
  transition: opacity 0s;
  min-width: initial;
  cursor: pointer;
}
.region-tools .shortcutbutton:hover {
  transition: background-color 30ms, background-image 30ms, border-color 30ms, color 30ms, opacity 30ms;
}
.pl-mobile .region-tools .shortcutbutton {
  transition: opacity 150ms;
}
.pl-mobile .region-tools .shortcutbutton:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
body.pl-computer .region-tools .shortcutbutton:hover, body.pl-computer .region-tools .shortcutbutton:active {
  background-color: var(--background-elevated-highlight);
}
body.pl-mobile .region-tools .name-label {
  opacity: 0.8;
}
body.pl-mobile .region-tools .movehandle,
body.pl-mobile .region-tools .starthandle,
body.pl-mobile .region-tools .endhandle,
body.pl-mobile .region-tools .loophandle,
body.pl-mobile .region-tools .fadeinhandle,
body.pl-mobile .region-tools .fadeouthandle,
body.pl-mobile .region-tools .shortcutbuttons,
body.pl-mobile .region-tools .stretchhandle {
  display: none;
}
body.pl-mobile .region-tools.focustrim .movehandle,
body.pl-mobile .region-tools.focustrim .loophandle,
body.pl-mobile .region-tools.focustrim .stretchhandle {
  display: block;
}
body.pl-mobile .region-tools.focustrim .starthandle,
body.pl-mobile .region-tools.focustrim .endhandle {
  display: flex;
  align-items: center;
}
body.pl-mobile .region-tools.focusfade .movehandle,
body.pl-mobile .region-tools.focusfade .fadeinhandle,
body.pl-mobile .region-tools.focusfade .fadeouthandle {
  display: block;
}
.region-tools.hide-loop-controls .loophandle {
  display: none !important;
}
.region-tools.hide-controls {
  border-right: none;
}
.region-tools.hide-controls .name-label,
.region-tools.hide-controls .starthandle,
.region-tools.hide-controls .endhandle,
.region-tools.hide-controls .fadeinhandle,
.region-tools.hide-controls .fadeouthandle,
.region-tools.hide-controls .shortcutbuttons,
.region-tools.hide-controls .stretchhandle {
  display: none !important;
}

.cyclemarker {
  position: absolute;
  top: 25px;
  left: 0;
  height: 24px;
  display: flex;
  align-items: center;
}
.cyclemarker .cyclebeats {
  position: absolute;
  top: 0;
  height: 26px;
  left: 0;
  right: 0;
  background-color: var(--background-tinted-base);
  border: 1px solid var(--essential-subdued);
  border-radius: 4px;
}
.cyclemarker .cycleicon {
  display: none;
  pointer-events: none;
}
.cyclemarker .starthandle {
  font-size: 12px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 1px;
  height: 100%;
  width: 36px;
  cursor: col-resize;
}
.cyclemarker .starthandle .cycleknob {
  box-sizing: border-box;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 18px;
  color: var(--text-subdued);
}
body.pl-computer .cyclemarker .starthandle {
  width: 18px;
}
body.pl-computer .cyclemarker .starthandle:active {
  margin-left: -100px;
  top: -100px;
  height: 300px;
  width: 300px;
  background-position: 102px 102px;
}
body.pl-computer .cyclemarker .starthandle:active .cycleknob {
  margin-left: 100px;
  margin-top: 100px;
}
.cyclemarker .endhandle {
  font-size: 12px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 36px;
  cursor: col-resize;
}
.cyclemarker .endhandle .cycleknob {
  box-sizing: border-box;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  height: 24px;
  width: 18px;
  color: var(--text-subdued);
}
body.pl-computer .cyclemarker .endhandle {
  width: 18px;
}
body.pl-computer .cyclemarker .endhandle:active {
  margin-right: -100px;
  top: -100px;
  height: 300px;
  width: 300px;
  background-position: 183px 102px;
}
body.pl-computer .cyclemarker .endhandle:active .cycleknob {
  margin-right: 100px;
  margin-top: 100px;
}
.cyclemarker.spotlight .starthandle .cycleknob, .cyclemarker.spotlight .endhandle .cycleknob {
  color: var(--text-base);
  width: 32px;
}
.cyclemarker.spotlight .cycleicon {
  position: relative;
  display: block;
  z-index: 1;
  top: 1px;
  color: var(--text-base);
}
.cyclemarker.spotlight .cycleknob .soundtrap-icon {
  display: none;
}
.cyclemarker.selected .cyclebeats {
  background-color: var(--text-subdued);
  border-color: var(--text-subdued);
}
.cyclemarker.selected .cycleknob {
  color: var(--background-elevated-base);
}
.cyclemarker.selected.spotlight .cyclebeats {
  background-color: var(--background-base);
  border-color: var(--decorative-subdued);
  border-radius: 0;
}

.studiomiddle {
  background-color: var(--background-base);
  padding: 0 20px 0 0;
  margin: 0;
}
body.pl-mobile .studiomiddle {
  padding: 0 0 0 0;
}
.studiomiddle > div {
  position: relative;
  width: auto;
  height: 1000px;
  white-space: nowrap;
}
.studiomiddle .error-banner {
  position: absolute;
  height: 44px;
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  z-index: 3;
  display: flex;
  background-color: var(--background-base);
  box-shadow: 0 1px 5px rgba(128, 128, 128, 0.5);
  color: var(--text-base);
  line-height: 20px;
  letter-spacing: 0.001em;
  padding: 12px 16px;
  transition: height 500ms, padding 500ms;
  overflow: hidden;
}
.studiomiddle .error-banner--hidden {
  height: 0;
  padding: 0 16px;
}
.studiomiddle .error-banner__closer {
  align-self: center;
  margin-left: auto;
}

.tracklist {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  margin: 0;
  z-index: 1;
  background-color: var(--background-base);
  border-right: 1px solid var(--decorative-subdued);
  transition: width 0.3s ease-in-out;
}
.tracklist.collapsed .headers .trackheader.addtrack .lbl {
  padding: 0;
}
.tracklist .headers {
  display: block;
  position: relative;
}
.tracklist .trackheader {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 64px;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--background-base);
  opacity: 1;
  transition: opacity 0.2s;
}
.tracklist .trackheader.newlyadded {
  opacity: 0;
}
.tracklist .trackheader.selected {
  background-color: var(--background-highlight);
}
.tracklist .trackheader.selected .name {
  font-weight: 500;
}
.tracklist .trackheader.selected .borderleft {
  background-color: var(--essential-primary);
}
.tracklist .trackheader.selected .automationheaders {
  background-color: var(--background-highlight);
}
.tracklist .trackheader.dragging {
  opacity: 0;
}
.tracklist .trackheader .frozen-icon {
  display: none;
  width: 12px;
  height: 12px;
  color: var(--text-base);
  position: absolute;
  top: -3px;
  left: 15px;
}
.tracklist .trackheader.frozen {
  background-color: var(--background-tinted-highlight);
}
.tracklist .trackheader.frozen .frozen-icon {
  display: block;
}
.tracklist .trackheader .borderleft {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-bottom: 2px solid transparent;
}
.tracklist .trackheader .borderbottom {
  cursor: n-resize;
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  margin-top: -5px;
  border-bottom: 1px solid var(--decorative-subdued);
  z-index: 1;
}
.tracklist .trackheader .trackcollaborators.active {
  width: 10px;
  height: 10px;
  background-color: var(--essential-primary);
  position: absolute;
  border-radius: 100%;
  top: 3px;
  right: 5px;
  z-index: 99;
}
.tracklist .trackheader .trackcollaborators.active:hover .collaborator-container {
  display: block;
}
.tracklist .trackheader .trackcollaborators.active .collaborator-container {
  border-radius: 10px;
  margin-left: 5px;
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 99;
  background: white;
  padding: 5px;
  box-shadow: 0 0 0 4px rgba(170, 140, 240, 0.5);
}
.tracklist .trackheader .trackcollaborators.active .collaborator-container .chat-face {
  margin-right: 0;
  margin-left: 5px;
}
.tracklist .trackheader .trackcollaborators.active .collaborator-container .chat-face:first-child {
  margin-left: 0;
}
.tracklist .trackheader .trackcollaborators .collaborator-sr-description {
  display: none;
}
.tracklist .trackheader .name {
  font-size: 12px;
  color: var(--text-base);
  line-height: 16px;
  font-family: var(--font-family);
  font-weight: 400;
  text-transform: none;
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.tracklist .trackheader .name.hidden {
  display: none;
}
.pl-mobile .tracklist .trackheader .name {
  pointer-events: none;
}
.tracklist .trackheader .dragtracktarget {
  pointer-events: none;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  border-top: 4px dotted var(--essential-primary);
  display: none;
  z-index: 1;
}
.tracklist .trackheader.dragtrack .dragtracktarget {
  display: block;
}
.tracklist .trackheader .dragfiletarget {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 6px dashed var(--essential-primary);
  display: none;
}
.tracklist .trackheader.dragfile .dragfiletarget {
  display: block;
}
.tracklist .trackheader .nameedit {
  font-size: 12px;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 400;
  font-weight: 500;
  padding: 1px 5px;
  width: 145px;
  border-radius: 2px;
  z-index: 1;
}
.tracklist .trackheader .nameedit:focus {
  border-color: var(--essential-primary);
}
.tracklist .trackheader .transparentbutton {
  color: var(--text-primary);
}
.pl-computer .tracklist .trackheader .transparentbutton:hover, .pl-computer .tracklist .trackheader .transparentbutton:active {
  color: var(--text-subdued);
}
.tracklist .trackheader .options {
  padding: 6px 11px;
  z-index: 1;
  display: flex;
}
.tracklist .trackheader .options.compact {
  padding: 0 11px 0;
  height: 15px;
  margin-top: -3px;
}
.tracklist .trackheader .expandcollapse {
  position: absolute;
  pointer-events: none;
  bottom: 1px;
  right: 0;
  padding: 2px;
}
.tracklist .trackheader .expandcollapse .lines {
  width: 4px;
  height: 17px;
  border-left: 1px solid var(--decorative-subdued);
  border-right: 1px solid var(--decorative-subdued);
}
.pl-computer .tracklist .trackheader .expandcollapse {
  display: none;
}
@media (max-width: 380px) {
  .pl-computer .tracklist .trackheader .expandcollapse {
    display: block;
    pointer-events: auto;
    z-index: 2;
  }
}
.tracklist .trackheader.addtrack {
  cursor: pointer;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--decorative-subdued);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tracklist .trackheader.addtrack.studio-focus-visible {
  outline-offset: -2px;
}
.tracklist .trackheader.addtrack.dragfile {
  border: 6px dashed var(--essential-primary);
  padding: 0;
}
.tracklist .trackheader.addtrack.dragfile .lbl {
  margin-top: -1px;
}
.tracklist .trackheader.addtrack.hidden {
  display: none;
}
.tracklist .trackheader.addtrack .lbl {
  pointer-events: none;
  color: var(--text-subdued);
  display: flex;
  align-items: center;
  gap: var(--space-nano);
}
.pl-mobile .tracklist .trackheader.addtrack {
  transition: opacity 150ms;
}
.pl-mobile .tracklist .trackheader.addtrack:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .tracklist .trackheader.addtrack:hover, .pl-computer .tracklist .trackheader.addtrack:active {
  background-color: var(--background-highlight);
}
.pl-computer .tracklist .trackheader.addtrack:hover .lbl, .pl-computer .tracklist .trackheader.addtrack:active .lbl {
  color: var(--text-base);
}
.pl-computer .tracklist .trackheader.addtrack:hover .lbllong, .pl-computer .tracklist .trackheader.addtrack:active .lbllong {
  color: var(--text-base);
}
.tracklist .trackheader .column-1 {
  display: flex;
  flex-direction: column;
  margin: 0 6px;
  max-height: 64px;
  justify-content: center;
}
.tracklist .trackheader .instrument-button {
  position: relative;
  padding: 4px;
}
.tracklist .trackheader .instrument-button button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background-color: var(--background-elevated-base);
  border-radius: 50%;
  border-style: solid;
  border-color: var(--decorative-subdued);
  color: var(--text-base);
}
.tracklist .trackheader .instrument-button button .icon {
  font-size: 16px;
}
.tracklist .trackheader .instrument-button.selected button {
  border-style: none;
  background-color: var(--background-tinted-base);
  color: var(--essential-primary);
}
.pl-computer .tracklist .trackheader .instrument-button:hover button {
  background-color: var(--background-elevated-highlight) !important;
  border-color: var(--decorative-subdued);
}
.pl-computer .tracklist .trackheader .instrument-button:hover button .soundtrap-icon {
  color: var(--text-base) !important;
}
.pl-computer .tracklist .trackheader .instrument-button:hover.selected button {
  background-color: var(--background-tinted-highlight) !important;
}
.pl-computer .tracklist .trackheader .instrument-button:hover.selected button .soundtrap-icon {
  color: var(--essential-primary) !important;
}
.tracklist .trackheader .instrument-button.compact button {
  width: 20px;
  height: 20px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 7px;
  margin-right: 7px;
}
.tracklist .trackheader .instrument-button.compact button .icon {
  font-size: 10px;
}
.tracklist .trackheader .column-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  height: 100%;
}
.tracklist .trackheader .padding-row-1 {
  flex: 1;
  min-height: 0;
  max-height: 8px;
}
.tracklist .trackheader .name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40%;
  justify-content: space-between;
}
.tracklist .trackheader .name-row .name {
  width: 100px;
  justify-self: flex-start;
}
.pl-mobile .tracklist .trackheader .name-row .name {
  width: 120px;
}
.tracklist .trackheader.compact .name-row {
  height: 100%;
}
.tracklist .trackheader.large .name-row {
  height: 64px;
  align-items: centre;
}
.tracklist .trackheader.large .controls-row {
  align-items: flex-start;
}
.tracklist .trackheader .padding-row-2 {
  flex: 1;
  min-height: 0;
  max-height: 4px;
}
.tracklist .trackheader .padding-row-3 {
  flex: 1;
  min-height: 0;
  max-height: 6px;
}

.collapsed.tracklist .trackheader.addtrack .lbl .lbllong {
  display: none;
}

.collapsed.tracklist .trackheader .options {
  display: none;
}

.collapsed.tracklist .trackheader .name {
  display: none;
}

.collapsed.tracklist .trackheader .nameedit {
  display: none !important;
}

.trackheader {
  /* specific things for when local override is enabled */
}
.trackheader .trackgroup {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 5px;
}
.trackheader .trackgroup.drums {
  background-color: var(--background-base);
}
.trackheader .trackgroup.recording {
  background-color: var(--background-base);
}
.trackheader .trackgroup.vocal {
  background-color: var(--background-base);
}
.trackheader .trackgroup.lead {
  background-color: var(--background-base);
}
.trackheader .trackgroup.bass {
  background-color: var(--background-base);
}
.trackheader .trackgroup.other {
  background-color: var(--background-base);
}
.trackheader .trackgroup.harmonics {
  background-color: var(--background-base);
}
.trackheader .trackgroup.fx {
  background-color: var(--background-base);
}
.trackheader .controls-row,
.trackheader .controls-row-local-override {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60%;
}
.trackheader .controls-row.hidden,
.trackheader .controls-row-local-override.hidden {
  display: none;
}
.trackheader .controls-row .smallknob .lbl,
.trackheader .controls-row-local-override .smallknob .lbl {
  position: absolute;
  left: 1px;
  font-size: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  top: 18px;
  color: var(--text-subdued);
}
.trackheader .controls-row .smallknob .knob,
.trackheader .controls-row-local-override .smallknob .knob {
  width: 22px;
  height: 22px;
  background-color: var(--background-base);
  left: 5px;
  border: 1px solid var(--essential-subdued);
}
.trackheader .controls-row .smallknob .knobfg,
.trackheader .controls-row-local-override .smallknob .knobfg {
  top: 3px;
  left: 15px;
  width: 2px;
  height: 24px;
  border-radius: 1px;
}
.trackheader .controls-row .smallknob.selected .knob,
.trackheader .controls-row-local-override .smallknob.selected .knob {
  background-color: var(--background-elevated-pressed);
}
.trackheader .controls-row .inlineknob,
.trackheader .controls-row-local-override .inlineknob {
  display: inline-block;
  width: 31px;
  position: relative;
  height: 20px;
  margin-left: -3px;
  margin-right: 8px;
  margin-bottom: 8px;
}
.pl-mobile .trackheader .controls-row .inlineknob,
.pl-mobile .trackheader .controls-row-local-override .inlineknob {
  margin: 0 8px 0 4px;
  width: 42px;
  height: 30px;
}
.trackheader .controls-row .param-pan .lrgap,
.trackheader .controls-row-local-override .param-pan .lrgap {
  width: 23px;
  display: inline-block;
}
.trackheader .controls-row .param-volume .lbl,
.trackheader .controls-row-local-override .param-volume .lbl {
  left: 27px;
}
.trackheader .controls-row .solo .soundtrap-icon,
.trackheader .controls-row .mute .soundtrap-icon,
.trackheader .controls-row .automatetoggle .soundtrap-icon,
.trackheader .controls-row-local-override .solo .soundtrap-icon,
.trackheader .controls-row-local-override .mute .soundtrap-icon,
.trackheader .controls-row-local-override .automatetoggle .soundtrap-icon {
  font-size: 16px;
}
.trackheader .controls-row .fatfingerbutton,
.trackheader .controls-row-local-override .fatfingerbutton {
  padding: 4px;
}
.trackheader .controls-row .fatfingerbutton button,
.trackheader .controls-row-local-override .fatfingerbutton button {
  width: 24px;
  height: 24px;
  padding: 0;
}
.trackheader .controls-row .fatfingerbutton.rec,
.trackheader .controls-row-local-override .fatfingerbutton.rec {
  padding: 5px 5px 5px 0;
}
.trackheader .controls-row .rec .flatbutton,
.trackheader .controls-row-local-override .rec .flatbutton {
  border: none;
  background-color: var(--decorative-subdued);
  border-radius: 4px;
  width: 18px;
  height: 18px;
  font-size: 12px;
  color: var(--text-subdued);
}
.trackheader .controls-row .rec .flatbutton:hover,
.trackheader .controls-row-local-override .rec .flatbutton:hover {
  background-color: var(--decorative-subdued);
  color: var(--text-base);
}
.trackheader .controls-row .rec .flatbutton.selected,
.trackheader .controls-row-local-override .rec .flatbutton.selected {
  background-color: var(--essential-negative);
  border-style: solid;
  border-width: 2px;
  color: var(--background-elevated-base);
  border-color: var(--essential-negative);
}
.pl-mobile .trackheader .controls-row .rec .flatbutton,
.pl-mobile .trackheader .controls-row-local-override .rec .flatbutton {
  width: 22px;
  height: 22px;
}
.trackheader.collapsed .controls-row,
.trackheader.collapsed .controls-row-local-override {
  display: none;
}
.trackheader.collapsed .local-overlay,
.trackheader.collapsed .rec,
.trackheader.collapsed .solo,
.trackheader.collapsed .mute,
.trackheader.collapsed .volumefx {
  display: none;
}
.trackheader .controls-row-local-override {
  margin-right: 0;
}
.trackheader .controls-row-local-override .controls-column-1,
.trackheader .controls-row-local-override .controls-column-2 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.trackheader .controls-row-local-override .controls-column-1 {
  flex-grow: 1;
  justify-content: space-between;
  padding-right: 10px;
}
.pl-mobile .trackheader .controls-row-local-override .controls-column-1 {
  justify-content: flex-start;
  width: 107px;
  flex-grow: 0;
}
.trackheader .controls-row-local-override .controls-column-2 {
  width: 73px;
  z-index: 1;
  padding: 0 4px;
}
.pl-mobile .trackheader .controls-row-local-override .controls-column-2 {
  flex-grow: 0;
  width: 85px;
  margin-left: 20px;
  padding-left: 0;
  justify-content: space-evenly;
}
.trackheader .controls-row-local-override .local-overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 73px;
  height: 100%;
  border-left: 1px solid var(--decorative-subdued);
}
.trackheader .controls-row-local-override .local-overlay.local-mute-solo:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.2;
  background-color: var(--background-base);
}
.pl-mobile .trackheader .controls-row-local-override .local-overlay {
  width: 85px;
}

.tracklistheader_container {
  display: flex;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px solid var(--decorative-subdued);
}

.tracklistheader {
  display: inherit;
}

.tracklistheader__container {
  border-right: 1px solid var(--decorative-subdued);
}

.tracklistheader__empty {
  transition: width 0.3s ease-in-out;
}

.tracklistheader__localOverride {
  display: flex;
  justify-content: flex-end;
}

.tracklistheader__localOverrideLabel {
  display: flex;
  align-items: center;
  font-size: 11px;
  text-align: right;
  padding-right: 11px;
}
.tracklistheader__localOverride--collapsed .tracklistheader__localOverrideLabel {
  display: none;
}

.tracklistheader__localOverrideButtonArea {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 73px;
  border-left: 1px solid var(--decorative-subdued);
}
.tracklistheader__localOverride--enabled .tracklistheader__localOverrideButtonArea:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.2;
  background-color: var(--background-base);
}
.tracklistheader__localOverride--mobile .tracklistheader__localOverrideButtonArea {
  width: 86px;
}

.tracklistheader__localOverrideButton {
  pointer-events: none;
  width: 51px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tracklistheader__localOverrideButton .last-icon {
  margin-left: 2px;
}
.tracklistheader__localOverride--enabled .tracklistheader__localOverrideButton {
  pointer-events: none;
}

.expand-collapse-track-list {
  display: none;
}
.pl-mobile .expand-collapse-track-list {
  position: absolute;
  display: flex;
  z-index: 2;
  bottom: 0;
  left: 0;
  align-items: center;
  padding-left: 16px;
  width: 64px;
  height: 64px;
  border: 1px solid var(--decorative-subdued);
  color: var(--text-subdued);
  background-color: var(--background-base);
  transition: width 0.3s ease-in-out, padding-left 0.3s ease-in-out;
}
.pl-mobile .expand-collapse-track-list .expand-collapse-toggle__icon {
  width: 24px;
  height: 24px;
  color: var(--text-subdued);
}
.pl-mobile .expand-collapse-track-list .expand-collapse-toggle__icon svg {
  width: 100%;
  height: 100%;
}
.pl-mobile .expand-collapse-track-list .expanded-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
@keyframes animate-expand-label {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pl-mobile .expand-collapse-track-list .expanded-container .expanded-collapse-toggle__label {
  opacity: 0;
  animation-name: animate-expand-label;
  animation-duration: 0.2s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
.pl-mobile .expand-collapse-track-list.expanded {
  width: 274px;
  height: 64px;
  padding-left: 90px;
}
.pl-mobile .expand-collapse-track-list.expanded .collapsed-container {
  display: none;
}
.pl-mobile .expand-collapse-track-list.expanded .expanded-container {
  display: flex;
}
.pl-mobile .expand-collapse-track-list.collapsed .collapsed-container {
  display: flex;
}
.pl-mobile .expand-collapse-track-list.collapsed .expanded-container {
  display: none;
}

.unexpectederror {
  font-size: 13px;
  text-align: left;
  line-height: 16px;
}

.analysis-needed-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
}
.analysis-needed-banner .info {
  text-align: center;
  color: #9b9b9b;
}
.analysis-needed-banner .analyze-button {
  margin-top: 20px;
}
.analysis-needed-banner .bar {
  position: relative;
  border-radius: 2px;
  margin-top: 20px;
  height: 4px;
  width: 200px;
  margin-bottom: 20px;
  background-color: #f2f2f2;
}
.analysis-needed-banner .bar .percent {
  position: absolute;
  width: 100%;
  top: 18px;
  text-align: center;
}
.analysis-needed-banner .bar .fill {
  height: 100%;
  background-color: #5a00aa;
  width: 0;
  border-radius: 2px;
}

.studioheader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  contain: layout;
  box-sizing: border-box;
  height: calc(48px + var(--studio-header-banner-height));
  background-color: var(--background-elevated-base);
  position: relative;
  white-space: nowrap;
  text-align: center;
  border-bottom: 1px solid var(--decorative-subdued);
  z-index: 2;
}
@media (max-width: 1023px) {
  .studioheader {
    height: 54px;
  }
  .pl-mobile.ff-handheld.layout-landscape .studioheader {
    height: 40px;
  }
}
.studioheader .studioheadercontrols {
  flex: 1;
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  padding: 0 20px 0 20px;
  width: 100%;
}
@media (max-width: 1023px) {
  .studioheader .studioheadercontrols {
    padding: 0 10px;
  }
}
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols {
  height: 40px;
}
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .st-button,
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .save_btn {
  height: 32px;
}
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .st-button.button_circular,
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .save_btn.button_circular {
  width: 32px;
}
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .iconbutton {
  height: 32px;
  width: 32px;
  min-height: 32px;
  min-width: 32px;
}
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .reccircle {
  width: 16px;
  height: 16px;
}
.pl-mobile.ff-handheld.layout-landscape .studioheader .studioheadercontrols .soundtrap-icon {
  font-size: 16px;
}
.studioheader .studioheadercontrols .flexfiller {
  flex: 2;
}
.studioheader .studioheadercontrols .logofiller {
  max-width: 143px;
}
.studioheader .studioheadercontrols .transport-controls-container .timelabel {
  margin: 0;
  width: auto;
  min-width: auto;
  font-size: 16px;
}
.studioheader .studioheadercontrols .transport-controls-container .timelabel .contents {
  position: relative;
  width: auto;
}
.studioheader .studioheadercontrols .transport-controls-container .timelabel .tabular15 {
  width: 12px;
}
.studioheader .studioheadercontrols .transport-controls-container .timelabel .tabular5 {
  width: 4px;
}
@media (max-width: 880px) {
  .studioheader .studioheadercontrols .transport-controls-container .timelabel {
    display: none;
  }
}
.studioheader .tooltip {
  margin-top: 30px;
  font-family: var(--font-family);
  font-weight: 400;
  transition: opacity 0.3s ease;
  pointer-events: none;
  color: var(--text-base);
}
.studioheader .tooltip .tooltip-arrow {
  border-bottom-color: var(--background-elevated-base);
}
.studioheader .tooltip .tooltip-inner {
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  line-height: 18px;
  padding: 10px;
  width: 150px;
  white-space: normal;
}
.studioheader .tooltip .tooltip-inner strong {
  font-weight: 500;
}
.studioheader .memoryindicator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
body.pl-mobile .studioheader .memoryindicator {
  display: none;
}
.studioheader .memoryindicator .memoryindicator_btn {
  font-size: 15px;
  margin-top: 2px;
  height: 26px;
  color: var(--text-spotlight);
  line-height: 24px;
  border: 0;
}
.studioheader .memoryindicator .memoryindicator_btn:hover {
  color: var(--text-subdued);
}
.studioheader .memoryindicator .memoryindicator_btn:hover + .tooltip {
  opacity: 1;
  top: 0;
}
.studioheader .memoryindicator .memoryindicator_btn:hover + .tooltip .tooltip-inner {
  white-space: break-spaces;
  text-align: left;
  width: 250px;
  max-width: 250px;
}
.studioheader .save {
  margin-left: 30px;
}
@media (max-width: 768px) {
  .studioheader .save {
    margin-left: 5px;
  }
}
.studioheader .save_btn {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  max-width: 70px;
  border-radius: 25px;
  margin-right: 14px;
}
.pl-mobile .studioheader .save_btn {
  height: 34px;
  line-height: 34px;
}
.studioheader .save_btn.disabled {
  pointer-events: none;
}
@media (max-width: 768px) {
  .studioheader .save_btn {
    margin-right: 0;
  }
}
.studioheader .restore_btn {
  border: none;
  margin-right: 7px;
}
.pl-mobile .studioheader .restore_btn {
  border: 0;
  height: 34px;
  margin-left: 8px;
  width: 34px;
}
.studioheader .download_btn {
  border: none;
}
@media (max-width: 768px) {
  .studioheader .mixspinner-message {
    display: none;
  }
}
@media (max-width: 1023px) {
  .studioheader .undo,
  .studioheader .redo,
  .studioheader .restore_btn {
    display: none;
  }
}

.studiofooter {
  contain: strict;
  height: 48px;
  background-color: var(--background-elevated-base);
  position: relative;
  width: auto;
  display: flex;
  flex-direction: row;
}
@media (max-width: 1023px) {
  .studiofooter {
    display: none;
  }
}

.headerfooter .icon-button {
  width: 24px;
  height: 24px;
}
.pl-mobile .headerfooter .icon-button {
  font-size: 17px;
  width: 44px;
  height: 44px;
}
.pl-computer .headerfooter .undo {
  margin-left: 20px;
  flex-shrink: 0;
}
@media (max-width: 895px) {
  .pl-computer .headerfooter .undo {
    margin-left: 10px;
  }
}
.pl-computer .headerfooter .redo {
  margin-left: 10px;
  flex-shrink: 0;
}
.headerfooter.combinedhf {
  min-width: 320px;
}
.pl-mobile .headerfooter.combinedhf .transportcontrols {
  margin: 0 var(--space-small);
}
.pl-mobile .headerfooter.combinedhf .metronome {
  display: none;
}
.pl-mobile .headerfooter.combinedhf .metronomemenubutton {
  display: none;
}
.pl-mobile .headerfooter.combinedhf .undo {
  margin: 0 5px;
}
.pl-mobile .headerfooter.combinedhf .redo {
  margin: 0 5px;
}
.pl-mobile .headerfooter.combinedhf .save {
  margin: 0 5px;
}
.headerfooter.combinedhf .logo {
  display: none;
}
.headerfooter.combinedhf .tempocontrols .fatfingerbutton .heading {
  bottom: auto;
  top: -6px;
}
.headerfooter.combinedhf .tempocontrols .fatfingerbutton {
  width: 50px;
}
.headerfooter.combinedhf .tempo {
  display: none;
}
.headerfooter.combinedhf .tempocontrols {
  display: none !important;
}
.headerfooter.combinedhf .key {
  display: none !important;
}
.headerfooter.combinedhf .invite-badge {
  background-color: var(--text-primary);
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  border-radius: 3px;
  height: 6px;
}
.headerfooter.combinedhf .has-invites {
  display: block;
}
.pl-mobile .headerfooter.combinedhf {
  /* ipad Mini Portrait */
}
@media (max-width: 1023px) {
  .pl-mobile .headerfooter.combinedhf .rewind,
  .pl-mobile .headerfooter.combinedhf .ff {
    display: none;
  }
  .pl-mobile .headerfooter.combinedhf .tutorials {
    display: none;
  }
  .pl-mobile .headerfooter.combinedhf .tempo {
    display: none;
  }
  .pl-mobile .headerfooter.combinedhf .timelabel {
    font-size: 16px;
    width: 80px;
  }
  .pl-mobile .headerfooter.combinedhf .timelabel .contents {
    width: 80px;
  }
}
@media (max-width: 767px) {
  .pl-mobile .headerfooter.combinedhf .studioheader__menubar {
    display: none;
  }
  .pl-mobile .headerfooter.combinedhf .edit-menu-handheld {
    display: inline-block;
    margin-right: 5px;
  }
  .pl-mobile .headerfooter.combinedhf .edit-menu-handheld.pink {
    color: var(--text-primary);
  }
}
@media (max-width: 546px) {
  .pl-mobile .headerfooter.combinedhf .undo,
  .pl-mobile .headerfooter.combinedhf .redo {
    display: none;
  }
}
@media (max-width: 348px) {
  .pl-mobile .headerfooter.combinedhf .transportcontrols {
    margin-left: 5px;
  }
  .pl-mobile .headerfooter.combinedhf .edit-menu-handheld {
    margin-right: 0;
  }
  .pl-mobile .headerfooter.combinedhf .save {
    max-width: 55px;
    margin-left: 0;
    margin-right: 0;
  }
  .pl-mobile .headerfooter.combinedhf .profile-menu {
    margin-right: 0;
  }
}
@media (max-width: 380px) {
  .pl-mobile .headerfooter.combinedhf .transportcontrols {
    margin-left: 0;
  }
}
.headerfooter .master-volume-icon {
  align-self: center;
  fill: var(--text-subdued);
  margin-left: var(--space-medium);
  width: 17px;
  height: 17px;
}
@media (max-width: 1023px) {
  .headerfooter .master-volume-icon {
    display: none;
  }
}
.headerfooter .mastervolume {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: var(--space-tiny);
}
.headerfooter .mastervolume .hslider {
  height: 48px;
  position: relative;
}
.headerfooter .mastervolume .hslider .master-volume__track {
  z-index: -1;
  overflow: hidden;
  background: var(--essential-primary);
  border-radius: 3px;
  height: 6px;
  width: 120px;
  position: relative;
}
.headerfooter .mastervolume .hslider .master-volume__track .master-volume__meter {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  height: 100%;
  width: 100%;
  background-color: var(--decorative-subdued);
  border-radius: 0;
}
.headerfooter .mastervolume .hslider .sliderfg {
  width: 16px;
  height: 16px;
  top: 15.5px;
  border-width: 1px;
  background-color: var(--background-elevated-base);
}
.headerfooter .mastervolume .heading {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 3px;
  right: 0;
  text-align: center;
  color: var(--text-subdued);
}
.headerfooter .mastervolume .silent {
  pointer-events: none;
  position: absolute;
  width: 140px;
  top: 3px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-subdued);
}
.headerfooter .transportcontrols {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-tiny);
  margin: 0 var(--space-medium);
}

.flex-before-time {
  max-width: 30px;
  width: 30px;
  min-width: 10px;
  flex-shrink: 1;
}

.timelabel {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  text-align: right;
  line-height: 23px;
  cursor: ew-resize;
  color: var(--text-base);
}
.timelabel .contents {
  display: flex;
  overflow: hidden;
  text-align: center;
}
.timelabel .contents .tabular15 {
  width: 15px;
  height: 23px;
}
.timelabel .contents .tabular8 {
  width: 8px;
  height: 23px;
}
.pl-computer .timelabel:hover {
  color: var(--text-subdued);
}

.feedback {
  position: absolute;
  right: 10px;
  bottom: 2px;
  font-size: 12px;
}
.feedback a {
  font-family: var(--font-family);
  font-weight: 700;
  font-weight: 400;
  color: var(--text-subdued);
}

.tempocontrols {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tempocontrols button {
  background-color: transparent;
  border: 0;
}
.tempocontrols button.studio-focus-visible .heading {
  visibility: visible;
}
.tempocontrols .heading-and-button {
  align-self: center;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-nano);
  padding: 6px var(--space-tiny-1);
  border-radius: 50px;
}
.tempocontrols .heading-and-button .value-button {
  pointer-events: none;
  color: var(--text-base);
}
.tempocontrols .heading-and-button:hover {
  background-color: var(--background-tinted-base);
}
.tempocontrols .heading-and-button:active {
  background-color: var(--background-tinted-press);
}
.tempocontrols .heading-and-button.studio-focus-visible {
  outline-offset: 1px;
}
.tempocontrols .heading-and-button .heading {
  pointer-events: none;
  color: var(--text-subdued);
}
.tempocontrols .tempo {
  margin-right: var(--space-medium);
}
.tempocontrols .key {
  margin: 0 var(--space-small) 0 var(--space-tiny);
}
.tempocontrols .metronome-wrap {
  display: flex;
  align-self: center;
  align-items: center;
  border-radius: 50px;
  background: transparent;
  margin-right: var(--space-medium);
}
.tempocontrols .metronome-wrap:hover {
  background-color: var(--background-tinted-base);
}
.tempocontrols .metronome-settings {
  background-color: transparent;
  border: 0;
  padding: var(--space-tiny) var(--space-tiny-1) var(--space-tiny) var(--space-tiny);
  height: 100%;
  align-items: center;
  color: var(--text-subdued);
  align-self: center;
  display: flex;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.tempocontrols .metronome-settings .metronomemenubutton {
  display: flex;
  align-items: center;
  margin-top: 2px;
  font-size: 13px;
  line-height: 16px;
}
.tempocontrols .metronome-settings:hover {
  color: var(--text-base);
}
.tempocontrols .metronome-settings.studio-focus-visible {
  outline: 2px solid var(--focus);
}
.tempocontrols .metronome {
  color: var(--text-base);
  font-size: 16px;
  line-height: 1em;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--background-tinted-base);
}
.tempocontrols .metronome:hover {
  background: var(--background-tinted-highlight);
}
.tempocontrols .metronome:active {
  background: var(--background-tinted-press);
}
.tempocontrols .metronome.studio-focus-visible {
  outline-offset: 1px;
}

.flex-at-end {
  min-width: 155px;
  flex-grow: 1;
}

.logo {
  background: none;
  border: 0;
  display: inline-block;
  cursor: pointer;
  padding: 0;
  margin-right: var(--space-tiny);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .logo {
    background-size: contain;
  }
}
@media (max-width: 1023px) {
  .logo {
    display: none;
  }
}
.logo svg {
  width: 28px;
  min-width: 28px;
  height: 29px;
  display: block;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
}
.logo svg path {
  fill: var(--essential-primary);
}

.project-title-container {
  flex: 4;
  overflow: hidden;
}

.project-title-and-autosave-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-title-and-autosave-container .project-title-container {
  flex: 0 1 auto;
}

.window-drag-handle {
  flex: 1;
  height: 100%;
}

.app-electron .window-drag-handle {
  -webkit-app-region: drag;
}

/* Make room for the macOS title bar in the Electron app */
.has-inset-macos-title-bar .studioheader {
  padding-left: 80px;
}

.pl-computer .save .splitbuttonright {
  border-radius: 25px;
  padding-left: 0;
  padding-right: 0;
  width: 26px;
}
.pl-computer .save .mixspinner-message {
  color: var(--text-subdued);
}
.pl-computer .save .mixspinner {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.disabled .pl-computer .save .mixspinner {
  opacity: 1;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.pl-mobile .save .splitbuttonleft {
  width: 65px;
}

@media (max-width: 768px) {
  .theme-onboarding-root {
    display: none;
  }
}

.transport-controls-container {
  align-items: center;
  display: none;
}
@media (max-width: 1023px) {
  .transport-controls-container {
    display: flex;
  }
}

.exit-studio-button-container {
  flex: 0 0 auto;
}
@media (max-width: 1199px) {
  .exit-studio-button-container {
    display: none;
  }
}

.transport-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-tiny);
  /* rewind and forward icons look off when centered */
}
.transport-controls__button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  background: var(--background-tinted-base);
  border: none;
  font-size: 13px;
  border-radius: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}
.transport-controls__button:hover {
  border-color: transparent;
  background-color: var(--background-tinted-highlight);
}
.transport-controls__button:active {
  background-color: var(--background-tinted-press);
}
.transport-controls__button[disabled] {
  cursor: default;
  opacity: 0.4;
}
.transport-controls__button.selected {
  transition: all 0.03s;
  background-color: var(--background-base);
  border-color: transparent;
}
.transport-controls__button.selected .soundtrap-icon {
  color: var(--text-base);
}
.pl-computer .transport-controls__button.selected:hover {
  background-color: var(--background-highlight);
  opacity: 0.8;
  border-color: transparent;
}
.transport-controls .rec {
  display: flex;
  position: relative;
  width: 60px;
  border-radius: 20px;
  gap: 4px;
}
.transport-controls .rec:before {
  content: "";
  display: inline-block;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  width: 12px;
  height: 12px;
  background-color: var(--essential-negative);
  border-radius: 100%;
}
.transport-controls .rec span {
  height: 20px;
  line-height: 18px;
}
.transport-controls .rec.last-child {
  margin-bottom: 1px;
}
.transport-controls .rec.selected {
  background-color: var(--background-base);
  border-color: var(--background-base);
}
.transport-controls .rec.selected:hover {
  background-color: var(--background-highlight);
}
.transport-controls .rec.selected:before {
  border-radius: 1.5px;
  opacity: 0;
  width: 11px;
  height: 11px;
  transform: scale(0);
  animation: scale-up 0.6s ease-out forwards;
}
.transport-controls .rec.selected > span {
  position: absolute;
  background-color: #fff;
  width: 22px;
  height: 22px;
  opacity: 0.4;
  border-radius: 100%;
  animation: pulsate 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
  .transport-controls .rewind,
  .transport-controls .forward {
    display: none;
  }
}
.transport-controls .soundtrap-icon {
  color: var(--text-base);
}
.transport-controls .ic-rewind {
  margin-left: -10%;
}
.transport-controls .ic-forward {
  margin-left: 10%;
}
@keyframes brightness {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale-up {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.menudown {
  display: inline-block;
  font-size: 9px;
  margin-left: 5px;
  margin-top: 2px;
  vertical-align: top;
}

.instrument-loading-progress {
  display: inline-block;
  pointer-events: none;
}
.instrument-loading-progress .bar {
  height: 4px;
  width: 100%;
  background-color: var(--background-tinted-base);
  position: relative;
}
.instrument-loading-progress .bar .fill {
  height: 100%;
  position: absolute;
  width: 0;
  background-color: var(--background-base);
  z-index: 2;
}

.druminstrumentgui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.druminstrumentgui .instrumentgui-top {
  min-height: 94px;
  flex-shrink: 0;
  justify-content: flex-start;
  width: 100%;
  padding: 0 20px;
  max-width: 1200px;
}
.druminstrumentgui .instrumentgui-top .flex-filler {
  flex: 1;
}
@media (max-width: 1150px) {
  .druminstrumentgui .instrumentgui-top {
    margin-bottom: 5px;
  }
}
.druminstrumentgui.druminstrumentgui-smaller .presetselectorpicker {
  margin-bottom: 24px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
}
.druminstrumentgui .metronome-button {
  padding: 10px 15px 10px 30px;
}
.druminstrumentgui .metronome-button .img {
  background: url("/studio/assets/images/icons/ic-metronome_off@2x.png") 0 0 no-repeat;
  background-size: contain;
  width: 21px;
  height: 20px;
}
.druminstrumentgui .metronome-button.selected .img {
  background-image: url("/studio/assets/images/icons/ic-metronome@2x.png");
}
.pl-mobile .pl-mobile .druminstrumentgui .metronome-button {
  transition: opacity 150ms;
}
.pl-mobile .pl-mobile .druminstrumentgui .metronome-button:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.pl-computer .druminstrumentgui .metronome-button:hover {
  opacity: 0.5;
}
.druminstrumentgui .quantize-settings {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.druminstrumentgui .quantize-settings > div {
  display: flex;
  align-items: center;
}
.pl-mobile .druminstrumentgui .quantize-settings {
  margin-left: 10px;
}
.druminstrumentgui .quantize-settings .quantize-settings-label {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.druminstrumentgui .quantize-settings .quantize-settings-label .st-hoverable {
  display: flex;
}
.druminstrumentgui .quantize-settings .quantize-settings-label .soundtrap-icon {
  font-size: 12px;
  color: #9b9b9b;
  margin-left: 5px;
}
.druminstrumentgui .quantize-settings .st-dropdown {
  min-width: 110px;
}
.druminstrumentgui .quantize-settings .live-toggle {
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.druminstrumentgui .quantize-settings .live-toggle.invisible {
  display: hidden;
}
.druminstrumentgui .quantize-settings .live-toggle > span {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 500;
}
.druminstrumentgui .interaction-area {
  flex: 1;
  width: 100%;
  position: relative;
  background-color: var(--background-base);
  display: flex;
  flex-direction: column;
}
.druminstrumentgui .instrument-loading-progress {
  pointer-events: none;
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.druminstrumentgui .quickcontrols {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
}
.druminstrumentgui .quickcontrols .quickcontrolfx {
  margin: 0 15px;
}
body.pl-mobile .druminstrumentgui .instrumentgui-top {
  justify-content: center;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
body.pl-mobile .druminstrumentgui .flex-filler {
  flex: 1;
}
body.pl-mobile .druminstrumentgui .savepresetbutton > button {
  height: 34px;
}
body.pl-mobile.ff-handheld .druminstrumentgui .savepresetbutton {
  display: none;
}
body.pl-mobile.ff-handheld .druminstrumentgui .instrumentgui-top {
  min-height: 54px;
}
body.pl-mobile.ff-handheld .druminstrumentgui .quickcontrols {
  display: none;
}
body.pl-mobile .druminstrumentgui .quickcontrols .quickcontrolfx {
  margin: 0 7px;
}
body.pl-mobile.layout-portrait .druminstrumentgui .quickcontrols {
  display: none;
}
body.ff-handheld.layout-portrait .druminstrumentgui .metronome-button {
  display: none;
}
body.ff-handheld.layout-portrait .druminstrumentgui .quantize-settings {
  display: none;
}

.keyboardinstrumentgui {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 1;
}
.keyboardinstrumentgui .sustain button:not(.selected) {
  color: var(--text-base);
}
.keyboardinstrumentgui .pad {
  flex-grow: 1;
}
.keyboardinstrumentgui .row1 {
  display: flex;
  flex-direction: row;
  padding-left: 14px;
  padding-right: 14px;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  gap: 40px;
}
.with-synth-84-styling .keyboardinstrumentgui .row1 {
  margin: 8px auto;
}
@media (max-width: 1150px) {
  .keyboardinstrumentgui .row1 {
    min-height: 94px;
  }
}
.keyboardinstrumentgui .row1 .flex-filler {
  flex-grow: 1;
}
.keyboardinstrumentgui .row1 .presetselector {
  position: relative;
  width: 310px;
  max-width: 310px;
  min-width: 277px;
  margin-bottom: 7px;
}
.keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-grow: 1;
}
.keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase {
  display: flex;
  justify-content: flex-end;
  width: 94px;
  min-width: 62px;
}
.keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .mediumknob {
  position: relative;
}
.keyboardinstrumentgui .row2 {
  display: flex;
  flex-direction: row;
  padding-left: 14px;
  padding-right: 14px;
  height: 46px;
  min-height: 46px;
  justify-content: flex-start;
}
.keyboardinstrumentgui .row2 .fx-button {
  display: none;
}
.keyboardinstrumentgui .row2 .octaveselector .lbl {
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  display: inline-block;
  margin-top: 18px;
  vertical-align: top;
  left: 0;
  text-align: center;
}
.keyboardinstrumentgui .row2 .octaveselector .arrowbutton, .keyboardinstrumentgui .row2 .octaveselector .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .keyboardinstrumentgui .row2 .octaveselector .pattern-selector-arrowbutton {
  font-size: 14px;
}
@media (max-width: 767px) {
  .keyboardinstrumentgui .row2 .more-options,
  .keyboardinstrumentgui .row2 .randomize {
    display: none;
  }
}
.pl-mobile .keyboardinstrumentgui .row2 {
  border-bottom: 1px solid #bfc2c4;
}
.keyboardinstrumentgui .keys {
  display: flex;
  flex-direction: row;
  position: relative;
  flex: 1;
  min-height: 100px;
  max-height: 270px;
  contain: strict;
}
.keyboardinstrumentgui .keys .instrument-loading-progress {
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.keyboardinstrumentgui #tutorial-808-announcement {
  opacity: 0;
  width: 0;
  height: 0;
}
.keyboardinstrumentgui .keyboard-controls-row,
.keyboardinstrumentgui .row2 .reactive-uix-renderer {
  display: flex;
  gap: 8px;
  flex: 1;
  align-items: center;
}
@media (min-width: 900px) {
  .keyboardinstrumentgui .keyboard-controls-row .keyboard-advanced-toggle,
  .keyboardinstrumentgui .row2 .reactive-uix-renderer .keyboard-advanced-toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.keyboardinstrumentgui .keyboard-controls-row-filler {
  flex: 1;
}

.keyboardinstrumentgui--sampler-mode .row1 {
  min-height: 230px;
  max-height: 230px;
}
.keyboardinstrumentgui--sampler-mode .instrument-row-button-layout {
  display: none;
}
.keyboardinstrumentgui--sampler-mode .flex-filler {
  display: none;
}

.sampler-drop-zone {
  height: 100%;
  justify-content: flex-start;
}

.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container {
  background: #e6e6e6;
  border-radius: 8px;
}
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808 {
  background-color: #2d2c31;
  height: 94px;
  padding: 22px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px;
}
@media (max-width: 1000px) {
  .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808 {
    /* Hide logo on smaller screens to give more space */
    display: none;
  }
}
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols {
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  flex-grow: unset;
  width: unset;
  max-width: unset;
  min-width: unset;
}
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase {
  background-color: var(--background-elevated-base);
  border-radius: 8px;
  margin: 2px 8px 0 8px;
  justify-content: center;
  height: 94px;
  width: 96px;
  align-items: center;
  padding-bottom: 10px;
}
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob {
  background-color: var(--background-elevated-base);
}
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase.quickcontrolfx-attack {
  margin-right: -1px;
  padding-left: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase.quickcontrolfx-release {
  margin-left: 0;
  padding-right: 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media (max-width: 1150px) {
  .with-808-styling .keyboardinstrumentgui .row1 .presetselectorpicker-container {
    display: flex;
    flex-grow: 1;
  }
  .with-808-styling .keyboardinstrumentgui .row1 .presetselectorpicker-container .presetselectorpicker {
    width: 100%;
  }
}
.with-808-styling .keyboardinstrumentgui .fatfingerbutton > button,
.with-808-styling .keyboardinstrumentgui .octaveselector .lbl {
  color: var(--text-spotlight);
}

.st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container {
  background: none;
}
.st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-bass808 {
  background-color: #3a3a3a;
}
.st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase {
  background-color: #3a3a3a;
}
.st-dark-theme .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob, .sampler-crossfade-icon .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob, .sampler-crossfade-handle-chamfer .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob, .sampler-crossfade-handle .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .with-808-styling .keyboardinstrumentgui .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob {
  background-color: #2d2c31;
}

.with-synth-84-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container {
  background-color: var(--decorative-subdued);
  border-radius: 8px;
}
.with-synth-84-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-synth84 {
  position: relative;
  border: 1px solid var(--essential-subdued);
  background-image: url("/studio/assets/images/studio/ssynth84/retro-synth-logo.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
  background-position: center top;
  height: 94px;
  width: 200px;
  padding: 22px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px;
  max-width: 200px;
  overflow: hidden;
}
@media (max-width: 1000px) {
  .with-synth-84-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .instrument-logo-synth84 {
    /* Hide logo on smaller screens to give more space */
    display: none;
  }
}
.with-synth-84-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols {
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  flex-grow: unset;
  width: unset;
  max-width: unset;
  min-width: unset;
}
.with-synth-84-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase {
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-subdued);
  border-radius: 8px;
  margin: 2px 8px 0 8px;
  justify-content: center;
  height: 94px;
  width: 96px;
  align-items: center;
  padding-bottom: 10px;
}
.with-synth-84-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .quickcontrolfxbase .knob {
  background-color: transparent;
  box-shadow: none;
}
@media (max-width: 1150px) {
  .with-synth-84-styling .keyboardinstrumentgui .row1 .presetselectorpicker-container {
    display: flex;
    flex-grow: 1;
  }
  .with-synth-84-styling .keyboardinstrumentgui .row1 .presetselectorpicker-container .presetselectorpicker {
    width: 100%;
  }
}

body.pl-mobile .presetselectorpicker {
  margin-top: 6px;
  margin-bottom: 6px;
  height: 34px;
  width: 200px;
}
body.pl-mobile.layout-portrait .presetselectorpicker {
  width: 120px;
}
body.pl-mobile .savepresetbutton > button {
  height: 34px;
}
body.pl-mobile .row2 {
  height: 54px;
}

body.pl-mobile.ff-handheld .savepresetbutton {
  display: none;
}

body.ff-handheld.layout-portrait .keyboardinstrumentgui .sustain {
  display: none;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smaller {
  height: 100%;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smaller .row1 {
  display: none;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smaller .row2 {
  border-top-width: 0;
  padding-left: 44px;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smaller .row2 .fx-button {
  display: block;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smallest .row2 {
  border-top-width: 1px;
  padding-left: 14px;
  justify-content: space-between;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smallest .row2 .presetselectorpicker {
  margin-right: 0;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smallest .row2 .octaveselector .lbl {
  display: none;
}
body.ff-handheld .instruments-view .keyboardinstrumentgui.keyboardinstrumentgui-smallest .row2 .fx-button {
  display: block;
}

body.pl-mobile .keyboardinstrumentgui.keyboardinstrumentgui-smaller {
  height: 100%;
}
body.pl-mobile .keyboardinstrumentgui.keyboardinstrumentgui-smaller .row1 .presetselectorpicker {
  display: none;
}
body.pl-mobile .keyboardinstrumentgui.keyboardinstrumentgui-smaller .row2 .presetselectorpicker {
  display: flex;
  flex-direction: row;
  margin-right: 10px;
}

.chordpiano-controls-container > .reactive-uix-renderer {
  height: 100%;
}

.chord-keyboard-controls {
  height: 100%;
}
.chord-keyboard-controls .chord-label {
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chord-keyboard-controls .inner-wrapper {
  display: flex;
  width: 218px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-small);
  border-radius: 4px;
  border: 1px solid var(--decorative-subdued);
  background: var(--background-elevated-base);
  margin: 0 var(--space-tiny) 0 var(--space-small);
  height: 100%;
  overflow-y: auto;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-label-with-tooltip {
  display: flex;
  flex-direction: row;
  gap: var(--space-nano);
  align-items: center;
  justify-content: flex-start;
  margin-right: auto;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard__info-button {
  border: none;
  background: transparent;
  padding: 0;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard__info-button.studio-focus-visible {
  border-radius: 4px;
  outline-offset: 1px;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard__info-button span {
  font-size: 12px;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  gap: 0;
  align-items: baseline;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-header .st-label-small {
  white-space: pre-line;
  color: var(--text-subdued);
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-header .chord-keyboard-close-button {
  margin-left: auto;
  border: none;
  background: none;
  padding: 0;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-row {
  width: 100%;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-row .st-tabs-selector {
  background-color: var(--background-base);
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-row-inner {
  margin-bottom: var(--space-tiny);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-tiny);
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-row-inner .st-dropdown {
  max-width: 128px;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-row-inner:last-child {
  margin-left: auto;
  margin-bottom: 0;
}
.chord-keyboard-controls .inner-wrapper .chord-keyboard-row-inner.disabled {
  opacity: 0.4;
}

.chord-shape-label, .chord-strum-label {
  margin-right: auto;
}

.strum-speed-section {
  position: relative;
}

.strum-speed-section__paywall-cover {
  padding: 0;
  position: absolute;
  inset: 0;
  background: none;
  border: none;
}

.keyboardkeyboardcontroller {
  cursor: pointer;
  position: relative;
  height: 100%;
  flex: 1;
  overflow: hidden;
  background-color: #bfc2c4;
  border: 1px solid #d2d2d2;
  border-bottom: none;
  border-radius: 4px;
}
.keyboardkeyboardcontroller .scrollable {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5100px;
  transition: transform 0.3s ease-out;
}
.pl-computer .keyboardkeyboardcontroller .pressable:hover {
  opacity: 0.7;
  cursor: pointer;
}
.pl-computer .keyboardkeyboardcontroller .pressable:active {
  opacity: 0.5;
  cursor: pointer;
}
.pl-mobile .keyboardkeyboardcontroller .pressable {
  transition: opacity 150ms;
}
.pl-mobile .keyboardkeyboardcontroller .pressable:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.keyboardkeyboardcontroller.disabled {
  opacity: var(--disabled-opacity);
  cursor: inherit;
}
.keyboardkeyboardcontroller .keyrings {
  position: absolute;
  pointer-events: none;
  height: 100%;
}
.keyboardkeyboardcontroller .whitekey,
.keyboardkeyboardcontroller .blackkey {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: transparent;
  position: absolute;
  top: 0;
  border: 0;
}
.keyboardkeyboardcontroller .whitekey {
  border-radius: 4px;
  height: 99%;
  padding-bottom: 50px;
  width: 66px;
}
.keyboardkeyboardcontroller .whitekey.unpressed {
  background-color: var(--white-key);
}
.keyboardkeyboardcontroller .whitekey.unpressed:hover {
  background-color: var(--white-key-hovered);
}
.keyboardkeyboardcontroller .whitekey.pressed {
  background-color: var(--white-key-pressed);
  color: var(--white-key-text);
}
.keyboardkeyboardcontroller .whitekey.pitch-visible {
  color: var(--white-key-text);
}
.keyboardkeyboardcontroller .whitekey.highlighted {
  border-bottom: 7px solid var(--white-key-highlight);
}
.keyboardkeyboardcontroller .blackkey {
  border-radius: 0 0 8px 8px;
  height: 50%;
  text-align: center;
  white-space: initial;
  width: 40px;
}
@media (min-height: 758px) {
  .keyboardkeyboardcontroller .blackkey {
    height: 58%;
  }
}
.keyboardkeyboardcontroller .blackkey.unpressed {
  background-color: var(--black-key);
}
.keyboardkeyboardcontroller .blackkey.unpressed:hover {
  background-color: var(--black-key-hovered);
}
.keyboardkeyboardcontroller .blackkey.unpressed:not(:hover):after {
  border-radius: 0 0 5px 5px;
  content: "";
  background: linear-gradient(to top, rgb(80, 80, 80) 0%, rgba(57, 57, 57, 0) 90%, rgba(57, 57, 57, 0) 100%);
  height: 80%;
  left: 7px;
  position: absolute;
  top: 0;
  width: 26px;
}
.keyboardkeyboardcontroller .blackkey.pressed {
  color: var(--black-key-text);
  background-color: var(--black-key-pressed);
}
.keyboardkeyboardcontroller .blackkey.highlighted {
  border-bottom: 7px solid var(--black-key-highlight);
}
.keyboardkeyboardcontroller .blackkey.highlighted.unpressed:not(:hover):after {
  height: calc(80% + 6px);
}
.keyboardkeyboardcontroller .keyring {
  font-family: var(--font-family);
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border-style: solid;
  width: 26px;
  height: 26px;
  font-size: 13px;
  position: absolute;
  text-align: center;
}
.pl-mobile .keyboardkeyboardcontroller .keyring {
  display: none;
}
.keyboardkeyboardcontroller .keyring.white {
  border-color: rgba(0, 0, 0, 0.25);
  border-width: 1px 1px 2px;
  color: var(--white-key-text);
  bottom: 10%;
  margin-left: 20px;
}
.keyboardkeyboardcontroller .keyring.black {
  border-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  top: 20%;
  color: var(--black-key-text);
  margin-left: 7px;
}
@media (min-height: 758px) {
  .keyboardkeyboardcontroller .keyring.black {
    top: 30%;
  }
}

.closerx {
  border: 0;
  position: absolute;
  background: url("/studio/assets/images/studio/ic_cancel_dark.png") 12px 12px no-repeat;
  width: 44px;
  height: 44px;
  top: 1px;
  right: 1px;
  cursor: pointer;
}
.pl-mobile .closerx {
  transition: opacity 150ms;
}
.pl-mobile .closerx:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.closerx.closerx-white {
  background: url("/studio/assets/images/studio/ic_cancel_light.png") 12px 12px no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .closerx {
    background: url("/studio/assets/images/studio/ic_cancel_dark@2x.png") 12px 12px no-repeat;
    background-size: 20px 20px;
  }
  .closerx.closerx-white {
    background: url("/studio/assets/images/studio/ic_cancel_light@2x.png") 12px 12px no-repeat;
    background-size: 20px 20px;
  }
}

.closerx-newstyle {
  font-family: "soundtrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  width: 44px;
  height: 44px;
  top: 1px;
  right: 1px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-subdued);
  border: none;
}
.pl-mobile .closerx-newstyle {
  transition: opacity 150ms;
}
.pl-mobile .closerx-newstyle:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.closerx-newstyle:before {
  content: "\e00e";
}
.pl-computer .closerx-newstyle:hover {
  color: var(--text-base);
}
.closerx-newstyle:focus-visible:not(.studio-focus-visible) {
  outline: inherit;
}
.closerx-newstyle.relative {
  position: relative;
  width: 25px;
  height: 10px;
  font-size: 10px;
  top: auto;
  right: auto;
  color: var(--text-base);
}

.looptab {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--decorative-subdued);
}
.looptab .inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.looptab .inner .looptabitemlist {
  position: relative;
  overflow: hidden;
}
.looptab .inner .looptabitemlist ul {
  list-style: none;
}
.looptab .inner .looptabitemlist .looptabitem {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
}
.looptab .inner .looptabitemlist .freesoundseparator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.looptab .inner .looptabitemlist .loop-recommendations-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--background-elevated-base);
  font-weight: 500;
}
.looptab .inner .looptabitemlist .loop-recommendations-header > .title {
  pointer-events: none;
  margin-right: 10px;
}
.looptab .inner .looptabitemlist .loop-recommendations-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--background-elevated-base);
  padding: 0 6px;
  z-index: 100;
}
.looptab .inner .looptabitemlist .loop-recommendations-footer > div {
  background-color: var(--decorative-subdued);
  width: 100%;
  height: 1px;
}
.looptab .bottom-section {
  color: #fff;
}
.looptab .bottom-section .bottom-banner {
  background: #000;
}
.looptab .bottom-section .bottom-banner .bottom-banner-content {
  padding: 16px;
}
.looptab .bottom-section .bottom-banner .bottom-banner-content .bottom-banner-title {
  font-size: 11px;
  margin-bottom: 4px;
  color: #fff;
}
.looptab .bottom-section .bottom-banner .bottom-banner-content .bottom-banner-desc {
  font-size: 15px;
  color: #fff;
}
.looptab .bottom-section .bottom-close {
  display: inline;
  float: right;
  padding: 16px;
  color: #fff;
  text-decoration: none;
}
.looptab .top-section {
  box-sizing: border-box;
  padding: 14px 12px 0 12px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--text-base);
  background-color: var(--background-elevated-base);
  max-height: 100%;
}
.looptab .top-section .tab-description h2 {
  display: inline;
}
.looptab .top-section .searchtextwrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 15px;
  margin-top: 18px;
  color: var(--text-base);
}
.looptab .top-section .searchtextwrapper .ic-search {
  position: absolute;
  font-size: 16px;
  top: 50%;
  margin-top: -8px;
  left: 10px;
}
.looptab .top-section .searchtextwrapper .searchtext {
  width: 100%;
  height: 32px;
  border-radius: 2px;
  background: var(--background-elevated-base);
  display: inline-block;
  flex: 1;
  font-family: var(--font-family);
  font-weight: 400;
  padding: 0 36px;
  min-width: 50px;
  color: var(--text-base);
  box-shadow: none;
  box-sizing: border-box;
  border: 1px solid var(--decorative-subdued);
}
.looptab .top-section .searchtextwrapper .searchtext::placeholder {
  color: var(--text-subdued);
}
.looptab .top-section .searchtextwrapper .searchtext:focus {
  border-color: var(--essential-subdued);
}
.looptab .top-section .searchtextwrapper .clear-input {
  position: absolute;
  width: 36px;
  height: 30px;
  border-radius: 6px;
  right: 1px;
  top: 1px;
  font-size: 14px;
  padding-top: 7px;
  padding-left: 10px;
}
.pl-mobile .looptab .top-section .searchtextwrapper .clear-input {
  transition: opacity 150ms;
}
.pl-mobile .looptab .top-section .searchtextwrapper .clear-input:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.looptab .top-section > .closer {
  border: 0;
  margin-right: -8px;
  display: none;
  position: absolute;
  top: 6px;
  right: 13px;
}
.notabs .looptab .top-section > .closer {
  display: inline-block;
}
.looptab .selectorbuttons {
  margin-top: 0;
  font-family: var(--font-family);
  font-weight: 300;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.looptab .selectorbuttons .favorites-only {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0 10px 10px;
  margin-left: -10px;
}
.looptab .selectorbuttons .favorites-only input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--decorative-base);
  border-radius: 3px;
  cursor: pointer;
  color: var(--background-elevated-base);
  text-align: center;
  vertical-align: middle;
  margin: 0;
  transition: background-color 0.1s;
  color: var(--text-base);
  margin-right: 10px;
}
.looptab .selectorbuttons .favorites-only input:hover {
  background-color: var(--background-tinted-base);
}
.looptab .selectorbuttons .favorites-only input[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: inherit;
}
.looptab .selectorbuttons .favorites-only input:checked {
  background-color: var(--background-tinted-base);
}
.looptab .selectorbuttons .favorites-only input:checked:after {
  font-family: "soundtrap-icons";
  font-size: 12px;
  content: "\e053";
  top: 50%;
  margin-top: -6px;
}
.looptab .selectorbuttons .favorites-only .description {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 0;
  margin-right: 5px;
}
.looptab .selectorbuttons .favorites-only .ic-heart {
  color: var(--text-negative);
}
.looptab .selectorbuttons .favorites-only.invisible {
  opacity: 0;
  pointer-events: none;
}
.looptab .selectorbuttons .favouritesbutton-compact {
  width: 85px;
  margin-left: 5px;
  display: none;
}
.looptab .selectorbuttons .favouritesbutton-compact.compactheight {
  display: inline-block;
}
.looptab .selectorbuttons .scaleselector {
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
  padding: 10px 10px 10px 0;
  margin-right: -10px;
}
.looptab .selectorbuttons .scaleselector .ic-chevron-down {
  margin-top: 2px;
  margin-left: auto;
}
.looptab .selectorbuttons .scaleselector .scaletext {
  margin-right: 10px;
  align-self: center;
  -webkit-align-self: center;
  margin-left: auto;
}
.looptab .tagbuttons {
  margin-top: 8px;
}
.looptab .tagbuttons .tagbutton-list {
  position: relative;
  z-index: 1;
  color: white;
  justify-content: flex-start;
  display: flex;
  flex-flow: row wrap;
  margin-right: -5px;
  padding: 0;
  list-style: none;
}
body.pl-mobile .looptab .tagbuttons .tagbutton-list {
  margin-bottom: 0;
  margin-left: -20px;
  padding-left: 20px;
  margin-right: -20px;
  padding-right: 30px;
  flex-flow: initial;
  overflow-x: scroll;
  padding-bottom: var(--space-tiny-1);
  --mask: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 1) 20px,
      rgba(0, 0, 0, 1) calc(100% - 100px),
      rgba(0, 0, 0, 0.9) calc(100% - 30px),
      rgba(0, 0, 0, 0) calc(100%)
    )
    100% 50% / 100% 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
body.pl-mobile .looptab .tagbuttons .tagbutton-list .tagbutton {
  flex-shrink: 0;
  width: 71px;
}
.looptab .tagbuttons .tagbutton-list .tagbutton {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  margin-right: 4px;
  margin-top: 4px;
  width: 70px;
  border-width: 0;
  border-radius: 4px;
  height: 27px;
  font-size: 13px;
  color: var(--text-base);
  transition: opacity 0.1s ease 0.1s, width 0.1s ease, min-width 0.1s ease, margin 0.1s ease !important;
}
@media (width: 320px) {
  .looptab .tagbuttons .tagbutton-list .tagbutton {
    width: 66px;
  }
}
@media (width: 375px) {
  .looptab .tagbuttons .tagbutton-list .tagbutton {
    width: 63px;
  }
}
.looptab .tagbuttons .tagbutton-list .tagbutton.highlighted {
  background-color: var(--background-base);
  color: var(--text-base);
}
.looptab .tagbuttons .tagbutton-list .tagbutton.highlighted:hover {
  background-color: var(--background-highlight);
}
.looptab .tagbuttons .tagbutton-list .tagbutton:not(.highlighted):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  background-color: var(--essential-primary);
  border-radius: 4px;
}
.looptab .tagbuttons .tagbutton-list .tagbutton:hover:before {
  transition: opacity 0.03s;
  opacity: 0.25;
}
.looptab .tagbuttons .tagbutton-list .tagbutton > * {
  z-index: 100;
}
body.pl-mobile .looptab .tagbuttons .tagbutton-list .tagbutton:active, body.pl-mobile .looptab .tagbuttons .tagbutton-list .tagbutton:visited, body.pl-mobile .looptab .tagbuttons .tagbutton-list .tagbutton:focus, body.pl-mobile .looptab .tagbuttons .tagbutton-list .tagbutton:hover {
  background-color: #9b64dc;
  opacity: 1;
}
.looptab .tagbuttons .tagbutton-list .tagbutton.selected {
  transition: opacity 0.1s, width 0.1s ease 0.1s, min-width 0.1s ease 0.1s, margin 0.1s ease 0.1s !important;
  width: 0 !important;
  min-width: 0;
  margin: 0;
  opacity: 0;
}
.looptab .tagbuttons .tagbutton-list .tagbutton .midi-button {
  font-size: 16px;
  color: inherit;
  margin: 0 0 3px 0;
}
body.pl-mobile .looptab .tagbuttons .tagbutton-list .tagbutton {
  height: 44px;
}
.looptab .tagbuttons .tagbutton-list .tagbutton.squeeze-name {
  letter-spacing: -1px;
}
.looptab .loop-results-tabs-container {
  border-top: 1px solid var(--decorative-subdued);
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
  flex-shrink: 0;
  overflow: hidden;
  margin: 0 8px 4px 8px;
}
.looptab .loop-results-tabs-container .loop-results-tab {
  border-bottom: 1px solid var(--decorative-subdued);
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  padding-bottom: 10px;
}
.looptab .loop-results-tabs-container .loop-results-tab-selected {
  color: var(--text-primary);
  border-bottom: 3px solid var(--text-primary);
  padding-bottom: 8px;
}
.looptab .loop-results-tabs-container .loop-results-tab-disabled {
  color: var(--text-subdued);
}
.looptab .results {
  flex-shrink: 1;
  flex-grow: 1;
  clear: both;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
.looptab .results .looptabitemlist-holder {
  padding-top: 2px;
}
.looptab .results .loop-awareness-banner-holder {
  margin: 0;
  padding: 0;
  font-weight: 500;
}
.looptab .results .loop-awareness-banner-holder:empty, .looptab .results .loop-awareness-banner-holder:has(div.hidden) {
  display: none;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container {
  background-color: var(--background-base);
  border-radius: 2px;
  color: var(--text-base);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 0 6px;
  padding: 8px;
  cursor: pointer;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .pie-chart-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .pie-chart-icon .quarter {
  width: 12px;
  height: 12px;
  position: relative;
  left: -9px;
  top: -8px;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .pie-chart-icon .three-quarters {
  width: 22px;
  height: 22px;
  position: relative;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .title {
  font-size: 12px;
  line-height: 14px;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail {
  margin-top: 6px;
  font-size: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  line-height: 12px;
}
.looptab .results .loop-awareness-banner-holder .loop-awareness-banner-container .text-container .detail .cta-text {
  margin-left: 0.25em;
  color: var(--text-subdued);
  text-decoration: underline;
}
.looptab .results .noresults {
  margin-top: 20px;
  text-align: center;
  font-style: italic;
}
.looptab .results .noresults .did-you-mean {
  cursor: pointer;
  white-space: normal;
  word-wrap: break-word;
}
.looptab .results .noresults .did-you-mean .word {
  margin-left: 5px;
  font-weight: bold;
  color: #5a00aa;
}
.looptab .results .noresults .did-you-mean .word:hover {
  text-decoration: underline;
}
.looptab .results .results-table .item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  cursor: pointer;
  border-radius: 4px;
  margin: 2px 6px;
  height: 40px;
  overflow: hidden;
}
.looptab .results .results-table .item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: var(--background-tinted-base);
}
.looptab .results .results-table .item.highlighted {
  animation: 0.6s ease 0s infinite alternate loopaddedanim;
}
.looptab .results .results-table .item > * {
  z-index: 100;
}
.looptab .results .results-table .item.selected::before {
  opacity: 1;
}
body.pl-mobile .looptab .results .results-table .item {
  height: 50px;
  margin: 2px 10px;
}
body.pl-computer .looptab .results .results-table .item:hover:not(.selected):before {
  opacity: 0.8;
}
.looptab .results .results-table .item .flexfiller {
  flex: 1;
  -webkit-flex: 1;
}
.looptab .results .results-table .item .loopinfo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 10px;
  flex-grow: 1;
  overflow: hidden;
}
.looptab .results .results-table .item .loopinfo .icon-kind {
  color: var(--essential-subdued);
  align-self: center;
  font-size: 16px;
  margin-right: 10px;
}
.looptab .results .results-table .item .loopinfo .oneshot-icon-svg {
  height: 16px;
  fill: var(--essential-subdued);
}
.looptab .results .results-table .item .loopinfo .oneshot-icon-svg use {
  transform: scale(0.7);
}
.looptab .results .results-table .item .loopinfo.inaccessible .name-tier .name {
  line-height: 18px;
}
.looptab .results .results-table .item .loopinfo.inaccessible .name-tier .tier {
  color: var(--text-subdued);
  font-size: 11px;
}
.looptab .results .results-table .item .loopinfo .name-tier {
  display: flex;
  flex-direction: column;
  min-width: 10px;
  flex-shrink: 1;
  overflow: hidden;
}
.looptab .results .results-table .item .loopinfo .name-tier .name {
  /* Placeholder values, updated in Dart */
  --scroll-amount: 0px;
  --scroll-duration: 1s;
  color: var(--text-base);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.looptab .results .results-table .item .loopinfo .name-tier .tier {
  color: var(--text-base);
  font-size: 12px;
  overflow: hidden;
}
.looptab .results .results-table .item .loopinfo .name-tier .tier.emphasized {
  color: var(--text-spotlight);
}
.looptab .results .results-table .item .loopinfo .name-tier .kind {
  color: #5a00aa;
  font-size: 12px;
  overflow: hidden;
  margin-right: 2px;
}
.looptab .results .results-table .item .loopinfo .name-tier .kind.audio {
  display: none;
}
.looptab .results .results-table .item .loopinfo .name-tier:hover > .name,
.looptab .results .results-table .item .loopinfo .name-tier .name.scroll {
  animation: scroll var(--scroll-duration) linear;
  animation-fill-mode: forwards;
  overflow: visible;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-amount));
  }
}
.looptab .results .results-table .item .rightbuttons {
  font-size: 15px;
  padding-left: 8px;
  padding-right: 8px;
  height: 100%;
  line-height: 37px;
  text-align: center;
  box-sizing: border-box;
  color: var(--essential-subdued);
  align-self: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.looptab .results .results-table .item .rightbuttons.favourite {
  border: 0;
  background-color: transparent;
}
.looptab .results .results-table .item .rightbuttons.favourite .heart:before {
  content: "\e033";
}
.looptab .results .results-table .item.favourited .favourite {
  opacity: 1;
  color: var(--text-negative);
}
.looptab .results .results-table .item.favourited .favourite .heart:before {
  content: "\e032";
}
body.pl-computer .looptab .results .results-table .item:hover.favourited .favourite:hover {
  opacity: 1;
}
body.pl-mobile .looptab .results .results-table .item .favourite {
  color: var(--essential-subdued);
  height: 44px;
  line-height: 44px;
}
body.pl-mobile .looptab .results .results-table .item .favourite {
  opacity: 0.5;
}
body.pl-mobile .looptab .results .results-table .item.favourited .favourite {
  opacity: 1;
  color: var(--text-negative);
}
.looptab .results .results-table .item.favourited .favourite.animate {
  animation-name: heartthrob;
  animation-duration: 0.3s;
}
.looptab .results .addtrackshortcut {
  margin: 16px;
}
.looptab .results .addtrackshortcut .playityourself {
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.looptab .results .noresults-my-loops {
  margin-top: 10px;
  color: #3c3c3c;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.looptab .results .noresults-my-loops .my-loops-video {
  height: 200px;
  width: 320px;
  background: #999999 url("/studio/assets/images/studio/my_loops_video_b17.jpg");
  background-size: cover;
  border-radius: 5px;
  position: relative;
}
.looptab .results .noresults-my-loops .my-loops-video .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 200px;
  background-color: rgba(56, 31, 102, 0.5);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.looptab .results .noresults-my-loops .my-loops-video .overlay .video-button {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.5);
  border: solid 1px #ffffff;
  border-radius: 22px;
  margin-top: 63px;
  padding: 0;
  transition: background-color 0.2s ease;
}
.looptab .results .noresults-my-loops .my-loops-video .overlay .video-button .ic-play {
  font-size: 22px;
  color: #fff;
  margin-left: 2px;
  line-height: 30px;
}
.looptab .results .noresults-my-loops .my-loops-video .overlay .video-button:hover {
  background-color: rgba(255, 255, 255, 0.7);
  transition: background-color 0.1s ease;
}
.looptab .results .noresults-my-loops .my-loops-video .overlay p {
  margin-top: 10px;
  font-weight: 500;
  color: #ffffff;
}
.looptab .results .noresults-my-loops .hint-title {
  margin: 20px 0 0 0;
  font-weight: 500;
}

.new-ribbon {
  font-weight: 500;
  font-size: 11px;
  color: var(--white);
  background: var(--essential-positive);
  pointer-events: none;
  white-space: nowrap;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 4px;
  right: -3px;
  top: -8px;
  text-transform: uppercase;
  line-height: 0.75;
}
.new-ribbon.small {
  font-size: 8px;
  font-weight: 700;
}

.loop-tab-upsell-banner {
  margin: var(--space-small) calc(var(--space-small) * -1);
  background: var(--background-elevated-base);
  padding: var(--space-small);
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--text-base);
}
.loop-tab-upsell-banner__title {
  margin: 0 var(--space-tiny-1);
}
.loop-tab-upsell-banner__button {
  min-width: 100px;
  flex-shrink: 0;
}
.loop-tab-upsell-banner__locked-icon {
  color: var(--text-subdued);
  font-size: 20px;
}

.loop-add-button {
  background-color: transparent;
  border: 0;
}

body.pl-mobile .loop-add-button {
  color: var(--essential-subdued);
  height: 44px;
  line-height: 44px;
  margin-bottom: 1px;
}

.loop-preview-button {
  background-color: transparent;
  border: 0;
  padding: 0 10px 0 15px;
  width: 45px;
  min-width: 45px;
  max-width: 45px;
  height: 100%;
  align-self: center;
}

.loop-preview-icon {
  font-size: 16px;
  color: var(--essential-base);
  text-align: center;
}

.looptab-banner {
  position: relative;
  margin-top: var(--space-small);
}
.looptab-banner button {
  border: none;
  background: transparent;
  padding: 0;
}
.looptab-banner_close-button {
  position: absolute;
  right: var(--space-nano);
  top: var(--space-nano);
  color: var(--text-base);
  line-height: 1;
  margin: 4px;
}
.looptab-banner_cta {
  border-radius: 5px;
  overflow: hidden;
}
.looptab-banner_image {
  width: 100%;
}

.st-spinner {
  --st-spinner-size: var(--space-medium-2);
  height: var(--st-spinner-size);
  width: var(--st-spinner-size);
  animation: spinner-animation 0.75s infinite linear;
  margin: 0 auto;
}
.st-spinner--center-in-parent {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 0 calc(-1 * var(--st-spinner-size) / 2) calc(-1 * var(--st-spinner-size) / 2);
}
.st-spinner--size-xsmall {
  --st-spinner-size: var(--space-small-1);
}
.st-spinner--size-small {
  --st-spinner-size: var(--space-medium);
}
.st-spinner svg {
  fill: currentColor;
}

@keyframes spinner-animation {
  100% {
    transform: rotate(360deg);
    transform-origin: center;
  }
}
@keyframes rotateCollabAnimation {
  from {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.rightsidebar {
  box-sizing: border-box;
  position: fixed;
  top: calc(55px + var(--studio-header-banner-height));
  left: 5000px;
  margin-left: -456px;
  height: 532px;
  z-index: 1;
  width: 456px;
  font-family: var(--font-family);
  font-weight: 400;
  pointer-events: none;
}
.rightsidebar ul {
  padding: 0;
}
.rightsidebar li {
  list-style: none;
}
.rightsidebar .effects-picker-tab-button {
  font-size: 0;
}
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab {
  background-color: var(--decorative-subdued);
  border: 1px solid var(--decorative-subdued);
  transition: background-color 0.3s cubic-bezier(0.23, 0.08, 0.34, 0.98);
}
.rightsidebar:not(.collapsed) .rightsidebarwrapper .tabbar .tab.selected {
  background-color: var(--background-elevated-base);
}
.rightsidebar.to-collapsed .rightsidebarwrapper .tabbar .tab.deemphasised {
  background-color: var(--decorative-subdued);
}
.rightsidebar.collapsed {
  width: 65px;
  margin-left: -65px;
  overflow: hidden;
}
.rightsidebar.collapsed .rightsidebarwrapper {
  transform: translateX(0);
  transition: none;
}
.rightsidebar.collapsed .rightsidebarwrapper .tabbar .tab.deemphasised {
  background-color: var(--decorative-subdued);
}
.rightsidebar.collapsed .rightsidebarwrapper .contents {
  display: none;
}
.rightsidebar.collapsed .rightsidebarwrapper .selector-caret {
  display: none;
}
.rightsidebar.to-collapsed .rightsidebarwrapper {
  transform: translateX(391px);
}
.rightsidebar.to-collapsed .rightsidebarwrapper .selector-caret {
  display: none;
}
.rightsidebar.from-collapsed .rightsidebarwrapper {
  transform: translateX(391px);
  transition: none;
}
.rightsidebar .rightsidebarwrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
  width: 456px;
  transition: transform 0.3s cubic-bezier(0.23, 0.08, 0.34, 0.98);
  transform: translateX(0);
  overflow: hidden;
  pointer-events: none;
}
.rightsidebar .rightsidebarwrapper .tabbar {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 8px;
  width: 44px;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  cursor: pointer;
  background: none;
  margin-right: 21px;
}
@media (max-height: 320px) {
  .rightsidebar .rightsidebarwrapper .tabbar {
    display: none;
  }
}
.rightsidebar .rightsidebarwrapper .tabbar .tab {
  background-color: var(--background-elevated-base);
  border: none;
  height: 44px;
  width: 44px;
  margin: 5px 0;
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  margin-left: 4px;
}
.rightsidebar .rightsidebarwrapper .tabbar .tab .soundtrap-icon {
  color: var(--text-base);
  fill: var(--text-base);
  font-size: 20px;
}
.rightsidebar .rightsidebarwrapper .tabbar .tab .fx-icon {
  transform: scale(0.9);
}
.rightsidebar .rightsidebarwrapper .tabbar .tab .title {
  transform: rotate(90deg);
  margin-top: 30px;
  white-space: nowrap;
  font-size: 12px;
  font-family: var(--font-family);
  font-weight: 500;
}
.rightsidebar .rightsidebarwrapper .tabbar .tab.notfirst {
  border-top: none;
}
.rightsidebar .rightsidebarwrapper .tabbar .tab.pulse {
  animation-name: pulseOnce;
  animation-duration: 128ms;
  animation-iteration-count: 1;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  z-index: 10;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  left: 50px;
  transition: top 200ms ease;
  border-color: transparent var(--decorative-subdued) transparent transparent;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -8px;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  left: 1px;
  transition: top 200ms ease;
  border-color: transparent var(--background-elevated-base) transparent transparent;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret.loops {
  top: 18px;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret.chat {
  top: 72px;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret.discussions {
  top: 126px;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret.discussions:after {
  border-color: transparent var(--background-elevated-highlight) transparent transparent;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret.effects {
  top: 180px;
}
.rightsidebar .rightsidebarwrapper .tabbar .selector-caret.assistant {
  top: 236px;
}
.rightsidebar .rightsidebarwrapper .tabbar .chattab .number {
  position: absolute;
  color: #3c3c3c;
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  width: 22px;
  height: 22px;
  margin-top: 28px;
  text-align: center;
  background-color: #c8c8c8;
  border-radius: 26px;
}
.rightsidebar .rightsidebarwrapper .contents {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 65px;
  width: 391px;
  display: block;
  overflow: hidden;
  height: 100%;
  padding: 0;
  color: var(--text-base);
  background-color: var(--background-elevated-base);
  box-sizing: border-box;
  border-radius: 4px;
}
.rightsidebar.notabs {
  z-index: 2;
  margin-left: -100%;
  width: 100%;
}
.rightsidebar.notabs.in-front {
  z-index: 101;
}
.rightsidebar.notabs.in-front .tabbar {
  display: none;
}
.rightsidebar.notabs .rightsidebarwrapper {
  width: 100%;
  overflow: visible;
  box-shadow: 0 7px 26px 2px rgba(0, 0, 0, 0.4);
}
.rightsidebar.notabs .rightsidebarwrapper .tabbar {
  margin-left: -65px;
  margin-right: 0;
}
.rightsidebar.notabs .rightsidebarwrapper .contents {
  border-width: 0;
  width: 100%;
  left: 0;
  border-radius: 0;
}
.rightsidebar.notabs.collapsed {
  width: 0;
  margin-left: 0;
  overflow: visible;
}
.rightsidebar.notabs.to-collapsed .rightsidebarwrapper {
  transform: translateX(100vw);
}
.rightsidebar.notabs.from-collapsed .rightsidebarwrapper {
  transform: translateX(100vw);
  transition: none;
}
.rightsidebar.collapsed.notabs .rightsidebarwrapper {
  box-shadow: none;
}

.rightsidebar .rightsidebarwrapper,
.rightsidebar .rightsidebarwrapper .contents,
.chattab,
.chattab .inner,
.chat-messages--uix-parent-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chattab {
  border: 1px solid var(--decorative-subdued);
}
.chattab .flexfiller {
  flex: 1;
  -webkit-flex: 1;
}
.chattab.video .call {
  display: none;
}
.chattab .calloverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  padding-top: 20px;
  margin-bottom: -23px;
  font-size: 34px;
  cursor: pointer;
  line-height: 34px;
  text-align: center;
  color: #000000;
  font-weight: 500;
  overflow: hidden;
}
.chattab .calloverlay span {
  font-size: 18px;
  color: #ffffff;
  margin-top: 10px;
  display: block;
  font-weight: 400;
}
.chattab .topbuttons {
  position: relative;
  z-index: 2;
  background: var(--background-elevated-base);
  color: var(--text-base);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chattab .topbuttons .call-button .soundtrap-icon {
  font-size: 14px;
}
.chattab .topbuttons .tab-description {
  margin: 14px 12px 1px;
}
.chattab .topbuttons .tab-description .guest-link {
  margin-left: 5px;
}
@media screen and (min-aspect-ratio: 13/9) and (max-width: 767px) {
  body.pl-mobile .chattab .topbuttons  {
    height: 64px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  body.pl-mobile .chattab .topbuttons  .tab-description  {
    margin: 0;
    margin-left: 18px;
    max-height: 23px;
  }
  body.pl-mobile .chattab .topbuttons  .top-content {
    margin: 0;
    margin-right: 70px;
  }
}
.chattab .topbuttons .top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 14px;
}
.pl-computer .chattab .topbuttons .top-content .flatbutton:hover:not(:disabled), .pl-computer .chattab .topbuttons .top-content .flatbutton:active:not(:disabled), .chattab .topbuttons .top-content .flatbutton.selected:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}
body.pl-mobile .chattab .topbuttons .top-content {
  height: 44px;
}
body.pl-mobile .chattab .topbuttons .top-content .flatbutton {
  height: 44px;
  min-width: 44px;
  border-radius: 22px;
}
body.pl-mobile .chattab .topbuttons .top-content .flatbutton .soundtrap-icon {
  font-size: 16px;
}
.chattab .closer {
  border: 0;
  margin-right: -8px;
  display: none;
  position: absolute;
  top: 6px;
  right: 13px;
}
.notabs .chattab .closer {
  display: inline-block;
}
body.pl-mobile.layout-landscape .chattab .closer {
  top: 10px;
}
.chattab .chatbottom {
  position: relative;
  bottom: 0;
  width: 100%;
}
.chattab .video-chat-holder {
  background-color: #5a00aa;
}
.chattab .pokedialog {
  max-height: 300px;
  border-radius: 4px;
  background-color: #3e1165;
  width: 220px;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
  z-index: 10;
  position: absolute;
  right: 0;
  transform: translateY(-110%);
}
.chattab .pokedialog .pokedialog-inner {
  overflow-y: auto;
  width: 100%;
  position: relative;
  max-height: 284px;
  padding: 20px;
}
.chattab .pokedialog .pokeintro {
  width: 180px;
  display: inline-block;
  margin-bottom: 10px;
  word-wrap: break-word;
  white-space: normal;
  justify-content: center;
}
.chattab .pokedialog .poke-face {
  position: relative;
  height: 40px;
  margin-right: 5px;
}
.chattab .pokedialog .poke-face .profile {
  width: 30px;
  height: 30px;
  border-radius: 17px;
  border: 2px solid #ffffff;
}
.chattab .pokedialog .poke-face .facepokebutton {
  font-size: 11px;
  margin-left: 10px;
}
.chattab .pokedialog .poke-face .facepokebutton .flatbutton {
  font-size: 11px;
  min-width: 62px;
}
.chattab .pokedialog .pokearrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: #3e1165 transparent transparent transparent;
  right: 50px;
}
.chattab .pokebuttonrow {
  display: flex;
}
.chattab .pokebuttonrow .pokebuttonwrapper {
  box-sizing: border-box;
  margin-right: 10px;
}
.chattab .pokebuttonrow .pokebuttonwrapper button .soundtrap-icon {
  margin-right: 7px;
  font-size: 16px;
}
.chattab .pokebuttonrow .pokebuttonwrapper button span {
  vertical-align: middle;
  line-height: 16px;
}
.chattab .textinputwrapper {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.chattab .textinput {
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  padding: 5px;
  background-color: var(--background-base);
  border: 1px solid var(--decorative-subdued);
  border-radius: 4px;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  resize: none;
}
.chattab .textinput::placeholder {
  color: var(--text-subdued);
}
.chattab .status {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #c8c8c8;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #3c3c3c;
  padding: 21px;
  opacity: 0.8;
}

.guest-link-dialog .body {
  margin-top: 20px;
  margin-bottom: 20px;
}
.guest-link-dialog .body .guest-link-field {
  display: flex;
}
.guest-link-dialog .body .guest-link-field input {
  flex: 1;
}
.guest-link-dialog .footer {
  margin-bottom: -20px;
}

.assistant {
  border: 1px solid var(--decorative-subdued);
  border-radius: 5px;
  user-select: text;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.assistant ::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.assistant .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.assistant__header {
  padding: 20px;
}

.assistant__title {
  margin: 0;
}

.assistant__messages {
  padding: var(--space-small);
  flex: 0.9;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.assistant-messages--uix-container {
  overflow-y: auto;
  padding-top: 20px;
}

.assistant-messages--container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.assistant-input {
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  width: 90%;
  bottom: 20px;
}
.assistant-input .voice-input {
  fill: var(--text-base);
  border: none;
  appearance: none;
  background: transparent;
  display: block;
  width: 20px;
  padding: 8px 7px 4px;
  box-sizing: content-box;
  border-radius: 20px;
  margin-left: -5px;
  transition: background-color 0.2s ease;
}
.assistant-input .voice-input:hover {
  background-color: var(--background-tinted-base);
  transition: none;
}
.assistant-input .voice-input.is-recording {
  fill: #fff;
  background: var(--text-negative);
  position: relative;
}
.assistant-input .voice-input.is-recording:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border-radius: 50px;
  box-shadow: 0 0 0 0 rgba(180, 7, 75, 0);
  transform: scale(1);
  animation: pulse-black 0.9s infinite;
}
@keyframes pulse-black {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(180, 7, 75, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(180, 7, 75, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(180, 7, 75, 0);
  }
}
.assistant-input .assistant-input-box {
  flex: 1;
}
.assistant-input .assistant__textarea {
  border: 1px solid var(--decorative-subdued);
  border-radius: 15px;
  padding: 10px 14px;
  width: 100%;
}

.assistant-panel {
  height: 100%;
}

.assistant .MessageBubble {
  display: flex;
}

.assistant .MessageBubble-bubble {
  border-radius: 15px;
  padding: 10px 14px;
  margin-bottom: var(--space-tiny-1);
  background: var(--background-tinted-base);
  float: right;
  max-width: 90%;
}
.assistant .MessageBubble-bubble span {
  color: var(--text-base);
  word-wrap: break-word;
}

.assistant .MessageBubble--left {
  justify-content: flex-start;
}

.assistant .MessageBubble--right {
  justify-content: flex-end;
}

.assistant .chat-timestamp, .assistant .chat-sender {
  display: none;
}

.assistant-spinner {
  padding: var(--space-tiny) 0;
  margin-bottom: var(--space-tiny-1);
}

.assistant-spinner.hide {
  display: none;
}

.logo-spinner {
  width: 40px;
  height: 30px;
  background: transparent var(--spinner-svg) no-repeat center center;
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0i MCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci PjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0 NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0 OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUg MTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUu MDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTku ODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMu Nzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0 NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4y OTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIw QzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAy NTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0 OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5 NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMw LjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0i IzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEw IFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC44cyIgcmVw ZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iTTcgMTAgUTEyIDE3LCAxNyAxMCBRMjIgMywg MjcgMTAgOyBNNyAxMCBRMTIgMywgMTcgMTAgUTIyIDE3LCAyNyAxMCA7IE03IDEwIFExMiAxNywg MTcgMTAgUTIyIDMsIDI3IDEwIDsiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNTAw IDAuMDAwIDAuNTAwIDEuMDAwOzAuNTAwIDAuMDAwIDAuNTAwIDEuMDAwIiBrZXlUaW1lcz0iMDsw LjU7MSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0i cm90YXRlIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAsMTcs MTA7IC0wLDE3LDEwOyAwLDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxp bmVzPSIwLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUw MCAwLjAwMCAwLjUwMCAxLjAwMCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9z dmc+");
}

.st-dark-theme .logo-spinner, .sampler-crossfade-icon .logo-spinner, .sampler-crossfade-handle-chamfer .logo-spinner, .sampler-crossfade-handle .logo-spinner, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .logo-spinner {
  filter: brightness(3) saturate(30%);
}

.logo-spinner.version-1 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0i MCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci PjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0 NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0 OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUg MTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUu MDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTku ODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMu Nzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0 NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4y OTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIw QzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAy NTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0 OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5 NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMw LjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0i IzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEw IFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC44cyIgcmVw ZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iTTcgMTAgUTEyIDE3LCAxNyAxMCBRMjIgMywg MjcgMTAgOyBNNyAxMCBRMTIgMywgMTcgMTAgUTIyIDE3LCAyNyAxMCA7IE03IDEwIFExMiAxNywg MTcgMTAgUTIyIDMsIDI3IDEwIDsiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNTAw IDAuMDAwIDAuNTAwIDEuMDAwOzAuNTAwIDAuMDAwIDAuNTAwIDEuMDAwIiBrZXlUaW1lcz0iMDsw LjU7MSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0i cm90YXRlIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAsMTcs MTA7IC0wLDE3LDEwOyAwLDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxp bmVzPSIwLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUw MCAwLjAwMCAwLjUwMCAxLjAwMCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9z dmc+");
}

.logo-spinner.version-2 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC44cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iTTcgMTAgUTkuNSAxNCwgMTIgMTAgUTE0LjUgNiwgMTcgMTAgUTE5LjUgMTQsIDIyIDEwIFEyNC41IDYsIDI3IDEwIDsgTTcgMTAgUTkuNSA2LCAxMiAxMCBRMTQuNSAxNCwgMTcgMTAgUTE5LjUgNiwgMjIgMTAgUTI0LjUgMTQsIDI3IDEwIDsgTTcgMTAgUTkuNSAxNCwgMTIgMTAgUTE0LjUgNiwgMTcgMTAgUTE5LjUgMTQsIDIyIDEwIFEyNC41IDYsIDI3IDEwIDsiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNTAwIDAuMDAwIDAuNTAwIDEuMDAwOzAuNTAwIDAuMDAwIDAuNTAwIDEuMDAwIiBrZXlUaW1lcz0iMDswLjU7MSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAsMTcsMTA7IC0wLDE3LDEwOyAwLDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9zdmc+");
}

.logo-spinner.version-3 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC44cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iTTggMTAgUTE3IDEsIDI2IDEwOyBNOCAxMCBRMTcgMTksIDI2IDEwOyBNOCAxMCBRMTcgMSwgMjYgMTAiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNTAwIDAuMDAwIDAuNTAwIDEuMDAwOzAuNTAwIDAuMDAwIDAuNTAwIDEuMDAwIiBrZXlUaW1lcz0iMDswLjU7MSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAsMTcsMTA7IC0wLDE3LDEwOyAwLDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9zdmc+");
}

.logo-spinner.version-4 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMS44N3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9Ik03IDEwIFE5LjUgMjAsIDEyIDEwIFExNC41IDAsIDE3IDEwIFExOS41IDIwLCAyMiAxMCBRMjQuNSAwLCAyNyAxMCA7IE03IDEwIFE5LjUgMCwgMTIgMTAgUTE0LjUgMjAsIDE3IDEwIFExOS41IDAsIDIyIDEwIFEyNC41IDIwLCAyNyAxMCA7IE03IDEwIFE5LjUgMjAsIDEyIDEwIFExNC41IDAsIDE3IDEwIFExOS41IDIwLCAyMiAxMCBRMjQuNSAwLCAyNyAxMCA7IiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUwMCAwLjAwMCAwLjUwMCAxLjAwMDswLjUwMCAwLjAwMCAwLjUwMCAxLjAwMCIga2V5VGltZXM9IjA7MC41OzEiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxLjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwLDE3LDEwOyAxODAsMTcsMTAiIGNhbGNNb2RlPSJsaW5lYXIiIGtleVNwbGluZXM9IiIga2V5VGltZXM9IjA7MSIvPjwvcGF0aD48L3N2Zz4=");
}

.logo-spinner.version-5 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iTTcgMTAgUTEyIDE0LCAxNyAxMCBRMjIgNiwgMjcgMTAgOyBNNyAxMCBRMTIgNiwgMTcgMTAgUTIyIDE0LCAyNyAxMCA7IE03IDEwIFExMiAxNCwgMTcgMTAgUTIyIDYsIDI3IDEwIDsiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0OzAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0IiBrZXlUaW1lcz0iMDswLjU7MSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjEuMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAsMTcsMTA7IC0xNiwxNywxMDsgMTYsMTcsMTA7IDAsMTcsMTAiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0OzAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0OzAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0IiBrZXlUaW1lcz0iMDswLjMzOzAuNjc7MSIvPjwvcGF0aD48L3N2Zz4=");
}

.logo-spinner.version-6 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iTTggMTAgUTE3IDUsIDI2IDEwOyBNOCAxMCBRMTcgMTUsIDI2IDEwOyBNOCAxMCBRMTcgNSwgMjYgMTAiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0OzAuNjEwIDAuMTgwIDAuNTAwIDAuODQ0IiBrZXlUaW1lcz0iMDswLjU7MSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjMuM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAsMTcsMTA7IC0xODAsMTcsMTA7IDE4MCwxNywxMDsgMCwxNywxMCIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC42MTAgMC4xODAgMC41MDAgMC44NDQ7MC42MTAgMC4xODAgMC41MDAgMC44NDQ7MC42MTAgMC4xODAgMC41MDAgMC44NDQiIGtleVRpbWVzPSIwOzAuMzM7MC42NzsxIi8+PC9wYXRoPjwvc3ZnPg==");
}

.logo-spinner.version-7 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9Ik04IDEwIFExNyA1LCAyNiAxMDsgTTggMTAgUTE3IDE1LCAyNiAxMDsgTTggMTAgUTE3IDUsIDI2IDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC41OzEiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwLDE3LDEwOyAtMTgsMTcsMTA7IDE4LDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9zdmc+");
}

.logo-spinner.version-8 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMy4xNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9Ik03IDEwIFE5LjUgMTgsIDEyIDEwIFExNC41IDIsIDE3IDEwIFExOS41IDE4LCAyMiAxMCBRMjQuNSAyLCAyNyAxMCA7IE03IDEwIFE5LjUgMiwgMTIgMTAgUTE0LjUgMTgsIDE3IDEwIFExOS41IDIsIDIyIDEwIFEyNC41IDE4LCAyNyAxMCA7IE03IDEwIFE5LjUgMTgsIDEyIDEwIFExNC41IDIsIDE3IDEwIFExOS41IDE4LCAyMiAxMCBRMjQuNSAyLCAyNyAxMCA7IiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC41OzEiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwLDE3LDEwOyAtNTEsMTcsMTA7IDUxLDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9zdmc+");
}

.logo-spinner.version-9 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMy41M3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9Ik03IDEwIFExMiAxNSwgMTcgMTAgUTIyIDUsIDI3IDEwIDsgTTcgMTAgUTEyIDUsIDE3IDEwIFEyMiAxNSwgMjcgMTAgOyBNNyAxMCBRMTIgMTUsIDE3IDEwIFEyMiA1LCAyNyAxMCA7IiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC41OzEiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwLDE3LDEwOyAtNDIsMTcsMTA7IDQyLDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNDswLjYxMCAwLjE4MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9zdmc+");
}

.logo-spinner.version-10 {
  --spinner-svg: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic291bmR0cmFwLWxvZ28iIHdpZHRoPSIzNCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDM0IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS43MDM0NCAwLjQxNzY2NUM2LjIzNDg1IDAuOTc0Njk1IDYuMjM0ODUgMS44Nzc5MiA1LjcwMzQ0IDIuNDM0OTVDMS43MjUxIDYuNjA2MzMgMS43MjUxIDEzLjM5MzUgNS43MDM0NCAxNy41NjQ4QzYuMjM0ODUgMTguMTIxOCA2LjIzNDg1IDE5LjAyNSA1LjcwMzQ0IDE5LjU4MjFDNS40Mzc3NCAxOS44NjA2IDUuMDg5NzMgMTkuOTk5OSA0Ljc0MTQ0IDE5Ljk5OTlDNC4zOTMyOSAxOS45OTk5IDQuMDQ1MTQgMTkuODYwNiAzLjc3OTQ0IDE5LjU4MjFDLTEuMjU5ODEgMTQuMjk4NSAtMS4yNTk4MSA1LjcwMTM5IDMuNzc5NDQgMC40MTc2NjVDNC4zMTA4NSAtMC4xMzkyMjIgNS4xNzIwNCAtMC4xMzkyMjIgNS43MDM0NCAwLjQxNzY2NVpNMzAuMjIwNiAwLjQxNzY2NUMzNS4yNTk4IDUuNzAxMzkgMzUuMjU5OCAxNC4yOTg1IDMwLjIyMDYgMTkuNTgyMkMyOS45NTQ5IDE5Ljg2MDggMjkuNjA2OCAyMCAyOS4yNTg2IDIwQzI4LjkxMDQgMjAgMjguNTYyMyAxOS44NjA4IDI4LjI5NjYgMTkuNTgyMkMyNy43NjUzIDE5LjAyNTIgMjcuNzY1MyAxOC4xMjE5IDI4LjI5NjYgMTcuNTY0OUMzMi4yNzQ5IDEzLjM5MzcgMzIuMjc0OSA2LjYwNjMzIDI4LjI5NjYgMi40MzQ5NUMyNy43NjUzIDEuODc3OTIgMjcuNzY1MyAwLjk3NDY5NSAyOC4yOTY2IDAuNDE3NjY1QzI4LjgyODIgLTAuMTM5MjIyIDI5LjY4OTQgLTAuMTM5MDc5IDMwLjIyMDYgMC40MTc2NjVaIiBmaWxsPSIjNUEwMEFBIi8+PHBhdGggaWQ9IndhdmUiIHN0cm9rZT0iIzVBMDBBQSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik03IDEwIFExNyAxMCwgMjcgMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImQiIGR1cj0iMC43NnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9Ik04IDEwIFExNyA3LCAyNiAxMDsgTTggMTAgUTE3IDEzLCAyNiAxMDsgTTggMTAgUTE3IDcsIDI2IDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjk3MCAwLjk1MCAwLjIyMCAwLjkxNDswLjk3MCAwLjk1MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC41OzEiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwLDE3LDEwOyAtMjcsMTcsMTA7IDI3LDE3LDEwOyAwLDE3LDEwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjk3MCAwLjk1MCAwLjIyMCAwLjkxNDswLjk3MCAwLjk1MCAwLjIyMCAwLjkxNDswLjk3MCAwLjk1MCAwLjIyMCAwLjkxNCIga2V5VGltZXM9IjA7MC4zMzswLjY3OzEiLz48L3BhdGg+PC9zdmc+");
}

.effects-picker-tab {
  height: 100%;
  border: 1px solid var(--decorative-subdued);
  overflow-x: hidden;
  padding: var(--space-tiny-1);
}

.effects-picker {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.effects-picker__search-input-wrapper {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.effects-picker__list {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}

.effects-picker__closer {
  border: 0;
  margin-right: -8px;
  position: absolute;
  top: 6px;
  right: 13px;
}
.effects-picker__title {
  margin-top: 0;
}
.effects-picker__search-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 15px;
  color: var(--text-base);
  margin: var(--space-tiny-1) 0px;
}
.effects-picker__search-input-wrapper .ic-search {
  position: absolute;
  font-size: 16px;
  top: 50%;
  margin-top: -8px;
  left: 10px;
}
.effects-picker__search-input {
  width: 100%;
  height: 32px;
  border-radius: 2px;
  background: var(--background-elevated-base);
  display: inline-block;
  flex: 1;
  font-family: var(--font-family);
  font-weight: 400;
  padding-left: var(--space-medium-2);
  min-width: 50px;
  color: var(--text-base);
  box-shadow: none;
  box-sizing: border-box;
  border: 1px solid var(--decorative-subdued);
}
.effects-picker__search-input::placeholder {
  color: var(--text-subdued);
}
.effects-picker__search-input:focus {
  border-color: var(--essential-subdued);
}

.effect-picker__search-tags {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  padding: var(--space-tiny) 0;
  gap: var(--space-tiny);
}

.effect-picker__search-tag {
  min-width: 60px;
  padding-left: var(--space-tiny);
  padding-right: var(--space-tiny);
}
.effect-picker__search-tag:focus-within {
  outline: -webkit-focus-ring-color auto 1px;
}
.effect-picker__search-tag.active {
  background: var(--background-base);
  border-color: var(--background-base);
  color: var(--text-base);
}
.effect-picker__search-tag.active :after {
  content: "  ✕";
}

.effects-picker__empty-state {
  padding: var(--space-small-1);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.effects-picker__empty-state__title {
  margin-top: var(--space-medium);
}
.effects-picker__empty-state__message {
  margin-top: var(--space-tiny);
  max-width: 30ch;
}

.effects-picker__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  grid-row-gap: var(--space-medium);
  grid-column-gap: var(--space-small);
  grid-auto-rows: max-content;
  justify-content: space-around;
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0;
}
.effects-picker__list__list-item {
  transform: translate(0, 0);
}

.effects-picker-card {
  position: relative;
}
.effects-picker-card.ministomp {
  margin: 0 !important;
}
.effects-picker-card.ministomp.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.effects-picker-card.ministomp .stomp {
  background-color: var(--background-elevated-highlight);
}
.effects-picker-card__locked-icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--background-elevated-base);
  width: 20px;
  height: 20px;
  z-index: 1;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transform: translate(4px, -4px);
  color: var(--text-subdued);
}
.effects-picker-card .draggable-icon {
  display: none;
}
.effects-picker-card .new-ribbon {
  z-index: 1;
  right: initial;
  left: 0px;
}

.effects-picker-banner {
  border: 1px solid var(--background-tinted-base);
  border-radius: 8px;
  margin: var(--space-small) 0;
  padding: var(--space-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.effects-picker-banner__title {
  margin-top: 0;
  margin-bottom: var(--space-small);
}
.effects-picker-banner__cta .soundtrap-icon {
  font-size: 0.8em !important;
}

.effects-picker-upsell-banner {
  margin: var(--space-small) calc(var(--space-small) * -1);
  background: var(--background-elevated-base);
  padding: var(--space-small);
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--text-base);
}
.effects-picker-upsell-banner__title {
  margin: 0 var(--space-tiny-1);
}
.effects-picker-upsell-banner__button {
  min-width: 100px;
  flex-shrink: 0;
}
.effects-picker-upsell-banner__locked-icon {
  color: var(--text-subdued);
  font-size: 20px;
}

.discussionstab {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--decorative-subdued);
  background-color: var(--background-elevated-highlight);
  padding: 14px 12px;
}
.discussionstab .inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.discussionstab .inner .top-section .tab-description h2 {
  display: inline;
}
.discussionstab .inner .top-section > .closer {
  border: 0;
  margin-right: -8px;
  display: none;
  position: absolute;
  top: 6px;
  right: 13px;
}
.notabs .discussionstab .inner .top-section > .closer {
  display: inline-block;
}
.discussionstab .inner #discussionstab-header[hidden] {
  display: none;
}
.discussionstab .inner .discussionstab-notification-list {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.discussionstab .inner .discussionstab-list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
  scroll-behavior: smooth;
}
.discussionstab .inner .discussionstab-list .discussions-cards-container {
  height: 100%;
}
.discussionstab .inner .discussionstab-list .discussions-cards-container .discussion-card-container {
  margin-bottom: 8px;
}
.discussionstab .inner #discussionstab-select-div {
  display: flex;
  align-self: end;
  border: none;
  max-width: 50%;
  width: fit-content;
}
.discussionstab .inner #discussionstab-select-div.padding-and-margin {
  padding: 6px;
  margin-bottom: 8px;
}
.discussionstab .inner #discussionstab-select-div[hidden] {
  display: none;
}

.invite-button {
  margin-right: 5px;
  min-width: 34px;
}
.invite-button .soundtrap-icon {
  font-size: 14px;
}
.invite-button .button-text {
  vertical-align: middle;
  margin: 0 0 0 7px;
}
.invite-button.hide-text {
  padding: 0;
}
.invite-button.hide-text .button-text {
  display: none;
}

.flatbutton.invite-button.flatbutton-trans-white:hover {
  border-color: #ffffff;
}

.synth78enginegui {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--background-base);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.1);
  transform-origin: 50% 0;
}
.synth78enginegui > div {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.synth78enginegui .boxed {
  background-color: var(--background-base);
  display: block;
  border-radius: 4px;
  position: relative;
  margin: 4px;
  height: 147px;
}
.synth78enginegui .boxed .lbl {
  position: absolute;
  top: 2px;
  left: 3px;
  color: var(--text-subdued);
  font-size: 15px;
  line-height: 15px;
  font-family: var(--font-family);
  font-weight: 400;
}
.synth78enginegui .oscflipper {
  position: absolute;
  width: 60px;
  height: 30px;
}
.synth78enginegui .oscflipper button {
  font-size: 12px;
  color: var(--text-subdued);
  vertical-align: top;
  margin-top: 0px;
  margin-right: -2px;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
  border: transparent;
  padding: 0;
  margin: 0 0 1px;
}
.pl-computer .synth78enginegui .oscflipper button:hover, .pl-computer .synth78enginegui .oscflipper button:active {
  color: var(--text-base);
  text-decoration: none;
}
.synth78enginegui .oscflipper .display {
  display: inline-block;
  width: 62px;
  height: 16px;
  box-sizing: border-box;
  padding-top: 2px;
  background-color: var(--background-elevated-highlight);
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 2px;
  cursor: pointer;
}
.pl-computer .synth78enginegui .oscflipper .display:hover, .pl-computer .synth78enginegui .oscflipper .display:active {
  background-color: #c8c8c8;
}
.pl-mobile .synth78enginegui .oscflipper .display {
  transition: opacity 150ms;
}
.pl-mobile .synth78enginegui .oscflipper .display:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.synth78enginegui .oscflipper .label-bottom {
  position: absolute;
  top: 24px;
  left: 43px;
  margin-left: -30px;
  width: 60px;
  text-align: center;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  pointer-events: none;
}
.synth78enginegui .osc1 {
  margin-bottom: 8px;
  width: 154px;
  height: 70px;
}
.synth78enginegui .osc1 .param-osc1type {
  left: 3px;
  top: 27px;
}
.synth78enginegui .osc1 .param-osc1semitones {
  left: 76px;
  top: 23px;
}
.synth78enginegui .osc1 .param-osc1cents {
  left: 119px;
  top: 23px;
}
.synth78enginegui .osc2 {
  width: 154px;
  height: 69px;
}
.synth78enginegui .osc2 .param-osc2type {
  left: 3px;
  top: 27px;
}
.synth78enginegui .osc2 .param-osc2semitones {
  left: 76px;
  top: 23px;
}
.synth78enginegui .osc2 .param-osc2cents {
  left: 119px;
  top: 23px;
}
.synth78enginegui .osc2 .param-osc2enabled {
  left: 119px;
  top: 4px;
}
.synth78enginegui .oscmix {
  width: 26px;
}
.synth78enginegui .oscmix .param-oscmix {
  left: 7px;
  top: 10px;
}
.synth78enginegui .oscmix .param-oscmix .label-bottom {
  top: 113px;
  font-size: 12px;
  line-height: 10px;
}
.synth78enginegui .filter {
  width: 172px;
}
.synth78enginegui .filter .param-filterattack {
  left: 8px;
  top: 23px;
}
.synth78enginegui .filter .param-filterdecay {
  left: 51px;
  top: 23px;
}
.synth78enginegui .filter .param-filtersustain {
  left: 94px;
  top: 23px;
}
.synth78enginegui .filter .param-filterrelease {
  left: 137px;
  top: 23px;
}
.synth78enginegui .filter .param-filtertype {
  left: 42px;
  top: 70px;
}
.synth78enginegui .filter .param-filterfrequency {
  left: 8px;
  top: 95px;
}
.synth78enginegui .filter .param-filterresonance {
  left: 51px;
  top: 95px;
}
.synth78enginegui .filter .param-filterenvamount {
  left: 94px;
  top: 95px;
}
.synth78enginegui .filter .param-filterkbt {
  left: 137px;
  top: 95px;
}
.synth78enginegui .amplitudeenv {
  width: 95px;
}
.synth78enginegui .amplitudeenv .param-ampattack {
  left: 13px;
  top: 23px;
}
.synth78enginegui .amplitudeenv .param-ampdecay {
  left: 56px;
  top: 23px;
}
.synth78enginegui .amplitudeenv .param-ampsustain {
  left: 13px;
  top: 95px;
}
.synth78enginegui .amplitudeenv .param-amprelease {
  left: 56px;
  top: 95px;
}
.synth78enginegui .lfo1 {
  margin-bottom: 8px;
  width: 226px;
  height: 70px;
}
.synth78enginegui .lfo1 .param-lfo1type {
  left: 3px;
  top: 27px;
}
.synth78enginegui .lfo1 .param-lfo1clocksync {
  left: 91px;
  top: 4px;
}
.synth78enginegui .lfo1 .param-lfo1rate {
  left: 91px;
  top: 23px;
}
.synth78enginegui .lfo1 .param-lfo1amount {
  left: 127px;
  top: 23px;
}
.synth78enginegui .lfo1 .param-lfo1enabled {
  left: 194px;
  top: 4px;
}
.synth78enginegui .lfo1 .param-lfo1dest {
  left: 161px;
  top: 27px;
}
.synth78enginegui .lfo2 {
  width: 226px;
  height: 69px;
}
.synth78enginegui .lfo2 .param-lfo2type {
  left: 3px;
  top: 27px;
}
.synth78enginegui .lfo2 .param-lfo2clocksync {
  left: 91px;
  top: 4px;
}
.synth78enginegui .lfo2 .param-lfo2rate {
  left: 91px;
  top: 23px;
}
.synth78enginegui .lfo2 .param-lfo2amount {
  left: 127px;
  top: 23px;
}
.synth78enginegui .lfo2 .param-lfo2enabled {
  left: 194px;
  top: 4px;
}
.synth78enginegui .lfo2 .param-lfo2dest {
  left: 161px;
  top: 27px;
}
.synth78enginegui .velocity-section {
  width: 95px;
}
@media (max-width: 768px) {
  .synth78enginegui .velocity-section {
    display: none;
  }
}
.synth78enginegui .velocity-section .param-velgain {
  left: 13px;
  top: 23px;
}
.synth78enginegui .velocity-section .param-velfreq {
  left: 56px;
  top: 23px;
}
.synth78enginegui .velocity-section .param-velenv {
  left: 13px;
  top: 95px;
}
.synth78enginegui .boxed.gain {
  height: 147px;
  width: 43px;
}
@media (max-width: 768px) {
  .synth78enginegui .boxed.gain {
    display: none;
  }
}
.synth78enginegui .boxed.gain .param-gain {
  left: 7px;
  top: 56px;
}

.synth84enginegui {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--decorative-subdued);
  transform-origin: 50% 0;
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
}
.synth84enginegui .container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow-x: scroll;
  overflow-y: scroll;
}
.synth84enginegui .container .control-container {
  position: relative;
  border-radius: 4px;
  background-color: var(--background-base);
  margin: 2px;
  height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text-base);
}
.synth84enginegui .container .control-container .container-header {
  border-radius: 4px 4px 0 0;
  font-weight: 700;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--essential-subdued);
  background-color: var(--background-elevated-base);
}
.synth84enginegui .container .control-container .container-footer {
  width: 100%;
  min-height: 10px;
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--essential-subdued);
  background-color: var(--background-elevated-base);
}
.synth84enginegui .container .control-container .control-area {
  max-height: 152px;
  background-color: var(--background-base);
  padding-top: 4px;
  padding-left: 6px;
  padding-right: 6px;
  height: 100%;
  width: 100%;
  border-right: 1px solid var(--essential-subdued);
  border-left: 1px solid var(--essential-subdued);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.synth84enginegui .container .control-container .control-area .lfo-buttons-container {
  width: 40px;
  margin: 0 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.synth84enginegui .container .control-container .control-area .lfo-buttons-container .button-container {
  margin-top: 14px;
  margin-bottom: 6px;
}
.synth84enginegui .container .control-container .control-area .oscillator-buttons-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.synth84enginegui .container .control-container .control-area .oscillator-buttons-container .icon-container {
  height: 16px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector {
  position: absolute;
  background-color: var(--essential-subdued);
}
.synth84enginegui .container .control-container .control-area .decorative-connector.pwm-decorative-connector-1 {
  top: 32px;
  left: 171px;
  width: 1.5px;
  height: 35px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.pwm-decorative-connector-2 {
  top: 32px;
  left: 76px;
  width: 1.5px;
  height: 7px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.pwm-decorative-connector-3 {
  top: 32px;
  left: 112px;
  width: 1.5px;
  height: 27px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.pwm-decorative-connector-4 {
  top: 32px;
  left: 77px;
  width: 94px;
  height: 1.5px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.sub-osc-decorative-connector-1 {
  top: 32px;
  left: 230px;
  width: 39px;
  height: 1.5px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.sub-osc-decorative-connector-2 {
  top: 32px;
  left: 229px;
  width: 1.5px;
  height: 35px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.sub-osc-decorative-connector-3 {
  top: 32px;
  left: 268px;
  width: 1.5px;
  height: 7px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.vcf-decorative-connector-1 {
  top: 32px;
  left: 97px;
  width: 61px;
  height: 1.5px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.vcf-decorative-connector-2 {
  top: 32px;
  left: 96px;
  width: 1.5px;
  height: 35px;
}
.synth84enginegui .container .control-container .control-area .decorative-connector.vcf-decorative-connector-3 {
  top: 32px;
  left: 157px;
  width: 1.5px;
  height: 7px;
}
.synth84enginegui .container .control-container .control-area .toggle-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-bottom: 15px;
  margin: 0 4px;
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container {
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  font-size: 11px;
  font-weight: 400;
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container input {
  margin: 0;
  height: 15px;
  width: 15px;
  appearance: none;
  background-color: var(--text-base);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 1px 2px var(--default-box-shadow-color);
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container input:hover {
  cursor: pointer;
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container .selected {
  opacity: 100;
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container .toggle {
  border: 1px solid var(--essential-subdued);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container .toggle-label-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 4px;
  padding-top: 2px;
}
.synth84enginegui .container .control-container .control-area .toggle-group .toggle-container .toggle-label-container label {
  cursor: pointer;
}
.synth84enginegui .container .control-container .control-area .button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.synth84enginegui .container .control-container .control-area .button-container .pulse-connector-canvas {
  position: absolute;
  top: 10px;
  left: 100px;
}
.synth84enginegui .container .control-container .control-area .button-wrapper {
  margin-top: -10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  margin-right: 2px;
  margin-left: 2px;
}
.synth84enginegui .container .control-container .control-area .button-wrapper .button-label {
  display: flex;
  flex-direction: column;
}
.synth84enginegui .container .control-container .control-area .button-wrapper svg {
  width: 12px;
}
.synth84enginegui .container .control-container .control-area .button-wrapper svg path {
  fill: var(--text-base);
  stroke: var(--text-base) !important;
}
.synth84enginegui .container .control-container .control-area .button-wrapper .synth-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0.25px solid var(--text-base);
  background-color: var(--background-press);
  margin: 4px 0;
}
.synth84enginegui .container .control-container .control-area .button-wrapper .synth-led-on {
  background-color: var(--background-elevated-highlight);
  box-shadow: var(--background-elevated-base) 0 0 4px 2px;
}
.synth84enginegui .container .control-container .control-area .button-wrapper button {
  width: 25px;
  height: 25px;
  border-radius: 2px;
  border: 1px solid #85828f;
  background-color: var(--background-elevated-base);
}
.synth84enginegui .container .control-container .control-area .button-wrapper button:hover {
  background-color: var(--background-elevated-highlight);
}
.synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed {
  background-color: var(--background-elevated-press);
}
.synth84enginegui .container .control-container .control-area .control-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.synth84enginegui .container .control-container .control-area .control-wrapper .slider {
  margin-bottom: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}
.synth84enginegui .container .control-container .control-area .control-wrapper .slider .label-top {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-end;
  font-size: 11px;
  margin-bottom: 12px;
  height: 24px;
}
.synth84enginegui .container .control-container .control-area .control-wrapper .slider .label-top span {
  margin-top: -4px;
}
.synth84enginegui .container .control-container .control-area .control-wrapper .slider .label-top.disabled {
  opacity: var(--disabled-opacity);
}
.synth84enginegui .container .control-container .control-area .control-wrapper .slider .slider-wrapper {
  width: 110px;
  transform: rotate(-90deg);
  position: absolute;
  top: 78px;
}
.synth84enginegui .container .lfo {
  min-width: 150px;
}
.synth84enginegui .container .dco {
  min-width: 345px;
}
.synth84enginegui .container .hpf {
  min-width: 50px;
}
.synth84enginegui .container .vcf {
  min-width: 260px;
}
.synth84enginegui .container .vca {
  min-width: 115px;
}
.synth84enginegui .container .env {
  min-width: 155px;
}
.synth84enginegui .container .chorus {
  min-width: 80px;
}
.synth84enginegui .container .glide {
  min-width: 120px;
  text-align: center;
}
@media screen and (max-width: 1300px) {
  .synth84enginegui .container .top-row {
    justify-content: flex-start;
  }
}

.sampler1enginegui {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--background-base);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.1);
  transform-origin: 50% 0;
}
.sampler1enginegui > div {
  position: relative;
  width: 100%;
  height: 165px;
  border-radius: 2px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.sampler1enginegui .boxed {
  background-color: var(--background-base);
  border-radius: 6px;
  position: relative;
  margin: 4px;
}
.sampler1enginegui .boxed > .lbl {
  position: absolute;
  left: 16px;
  top: 13px;
  color: var(--text-subdued);
  font-size: 15px;
  line-height: 15px;
  font-family: var(--font-family);
  font-weight: 400;
}
.sampler1enginegui .sound {
  width: 240px;
}
.sampler1enginegui .sound .sampledinstrumentfilterwrapper {
  z-index: 1;
  position: absolute;
  left: 4px;
  top: 34px;
  padding: 13px;
  color: #818181;
  line-height: 11px;
  height: 60px;
  display: flex;
  align-items: center;
}
.sampler1enginegui .sound .sampledinstrumentfilterwrapper input {
  margin-left: 5px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.sampler1enginegui .sound .sampledinstrumentdropdown {
  z-index: 1;
  position: absolute;
  left: 4px;
  top: 84px;
  padding: 13px;
  color: #818181;
}
.sampler1enginegui .amplitudeenv {
  width: 285px;
  padding: 8px;
}
.sampler1enginegui .amplitudeenv .param-gain {
  left: 32px;
  top: 40px;
}
.sampler1enginegui .amplitudeenv .param-ampattack {
  left: 95px;
  top: 40px;
}
.sampler1enginegui .amplitudeenv .param-ampdecay {
  left: 139px;
  top: 40px;
}
.sampler1enginegui .amplitudeenv .param-ampsustain {
  left: 182px;
  top: 40px;
}
.sampler1enginegui .amplitudeenv .param-amprelease {
  left: 230px;
  top: 40px;
}
.sampler1enginegui .amplitudeenv .param-expdecay {
  left: 32px;
  top: 89px;
}
.sampler1enginegui .velfilter {
  width: 233px;
}
.sampler1enginegui .velfilter .param-velsens {
  left: 32px;
  top: 40px;
}
.sampler1enginegui .velfilter .param-velfilterenv {
  left: 103px;
  top: 40px;
}
.sampler1enginegui .velfilter .param-velfilterfreq {
  left: 146px;
  top: 40px;
}
.sampler1enginegui .velfilter .param-velfilterkbt {
  left: 189px;
  top: 40px;
}
.sampler1enginegui .miscsettings {
  width: 180px;
}
.sampler1enginegui .miscsettings .param-spread {
  left: 24px;
  top: 40px;
}
.sampler1enginegui .miscsettings .param-transposable {
  left: 75px;
  top: 48px;
}
.sampler1enginegui .octaveselector {
  width: 175px;
}
.sampler1enginegui .octaveselector .lblinline {
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  display: inline-block;
  margin-top: 40px;
  vertical-align: top;
  left: 0;
  text-align: center;
}
.sampler1enginegui .octaveselector .arrowbutton, .sampler1enginegui .octaveselector .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .sampler1enginegui .octaveselector .pattern-selector-arrowbutton {
  margin-top: 24px;
  font-size: 14px;
}

.bass808enginegui {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--background-base);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.1);
  transform-origin: 50% 0%;
}
.bass808enginegui > div {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.bass808enginegui .boxed {
  background-color: var(--background-base);
  border-radius: 6px;
  position: relative;
  margin: 4px;
}
.bass808enginegui .boxed > .lbl {
  position: absolute;
  left: 16px;
  top: 13px;
  color: var(--text-subdued);
  font-size: 15px;
  line-height: 15px;
  font-family: var(--font-family);
  font-weight: 400;
}
.bass808enginegui .amplitude {
  width: 233px;
  height: 139px;
}
.bass808enginegui .amplitude .param-velsens {
  left: 32px;
  top: 40px;
}
.bass808enginegui .amplitude .param-gain {
  left: 76px;
  top: 40px;
}
.bass808enginegui .octaveselector {
  width: 233px;
  height: 139px;
}
.bass808enginegui .octaveselector .lblinline {
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  display: inline-block;
  margin-top: 40px;
  vertical-align: top;
  left: 0;
  text-align: center;
}
.bass808enginegui .octaveselector .arrowbutton, .bass808enginegui .octaveselector .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .pattern-selector-arrowbutton, .drummer-view .drummer-bottom .drummer-container .pattern-container .pattern-selector-container .pattern-selector .bass808enginegui .octaveselector .pattern-selector-arrowbutton {
  margin-top: 24px;
  font-size: 14px;
}
.bass808enginegui .miscsettings {
  width: 233px;
  height: 139px;
}
.bass808enginegui .miscsettings .param-disableretrigger {
  left: 32px;
  top: 40px;
}

.dnd-sampler-engine-gui {
  background-color: var(--background-base);
  transform-origin: 50% 0;
  width: 100%;
  height: 131px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.dnd-sampler-engine-gui .dnd-sampler-options {
  height: 100%;
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.dnd-sampler-engine-gui .dnd-sampler-options .dnd-sampler-tune-controls {
  background-color: var(--background-base);
  height: 100%;
  width: 372px;
  border-radius: 8px;
  margin-right: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dnd-sampler-engine-gui .dnd-sampler-options .dnd-sampler-misc-settings {
  border-radius: 8px;
  height: 100%;
  padding-left: 12px;
  padding-right: 12px;
  gap: 12px;
  background-color: var(--background-base);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.tippopup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.tippopup:not(.not-dismissable) {
  cursor: pointer;
}
.tippopup.moving {
  animation: tippopupanim 0.5s linear 0 infinite alternate none running;
}
.tippopup.moving.hidden {
  animation-play-state: paused;
}
.tippopup.small .msg {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
}
.tippopup h1 {
  font-weight: 400;
}
.tippopup h3 {
  font-size: 25px;
  margin: 0px 30px 14px 30px;
  line-height: 28px;
}
.tippopup .bdrop {
  background-color: rgba(255, 255, 255, 0.85);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tippopup.flash .inner {
  background-color: #5a00aa;
}
.tippopup .inner {
  position: absolute;
  left: 0;
  margin-left: -130px;
  width: 260px;
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  text-align: center;
  padding: 15px 20px 15px 20px;
  font-family: var(--font-family);
  border-radius: 4px;
  border: none;
  font-size: 13px;
  line-height: 1.5;
}
.tippopup .inner .close-button {
  position: absolute;
  width: 44px;
  top: -10px;
  right: -10px;
}
.tippopup .inner h1 {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-base);
  text-align: center;
}
.tippopup .inner p {
  font-size: 15px;
  line-height: 1.5;
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--text-base);
  text-align: center;
  margin: 0;
}
.tippopup .inner .closer {
  background-size: 10px 10px;
  background-position: 79% 20%;
}
.tippopup .arrow {
  position: absolute;
  width: 0px;
  height: 0px;
  left: -11px;
  top: -11px;
  border: 11px solid;
  border-color: transparent;
  border-top-color: var(--background-elevated-base);
  border-bottom-color: var(--background-elevated-base);
}
.tippopup.nw .inner {
  left: 100px;
  top: 11px;
}
.tippopup.nw .arrow {
  border-top-color: transparent;
}
.tippopup.ne .inner {
  left: -100px;
  top: 11px;
}
.tippopup.ne .arrow {
  border-top-color: transparent;
}
.tippopup.sw .inner {
  left: 100px;
  bottom: 11px;
}
.tippopup.sw .arrow {
  top: -11px;
  border-bottom-color: transparent;
}
.tippopup.se .inner {
  left: -100px;
  bottom: 11px;
}
.tippopup.se .arrow {
  top: -11px;
  border-bottom-color: transparent;
}
.tippopup .msg {
  font-size: 16px;
  line-height: 1.2em;
}
.tippopup .flatbutton {
  margin-top: 15px;
}
.tippopup.remoterecord .inner {
  width: 290px;
}
.tippopup.theme-toggle-popup .inner {
  left: 0;
  margin-left: 0;
  transform: translateX(-50%);
  top: 11px;
  text-align: left;
  padding: 3px;
  width: 384px;
  padding-bottom: 32px;
  border-radius: 10px;
}
.tippopup.theme-toggle-popup .inner .tooltip-img {
  width: 100%;
  height: 211px;
  background: top/contain no-repeat url("/studio/assets/images/studio/theme-tooltip-v2.png");
  border-radius: 5px;
}
.tippopup.theme-toggle-popup .inner .msg {
  margin-top: var(--space-small);
  padding: 0 30px;
  font-size: 18px;
}
.tippopup.theme-toggle-popup .inner .msg p {
  font-size: 15px;
  text-align: left;
  margin-top: var(--space-tiny-1);
}
.tippopup.theme-toggle-popup .arrow {
  border-top-color: transparent;
}
body.pl-mobile .tippopup .inner .closer {
  background-size: 14px 14px;
  opacity: 0.3;
}

.allowaudioarrowtarget {
  position: fixed;
  left: 360px;
  top: 125px;
  width: 0;
  height: 0;
}
.os-windows.browser-chrome .allowaudioarrowtarget {
  left: 180px;
  top: 130px;
}
.os-windows.browser-edge .allowaudioarrowtarget {
  left: auto;
  top: auto;
  bottom: 70px;
  right: 27%;
}
.os-chromeos .allowaudioarrowtarget {
  left: 245px;
  top: 125px;
}

.allowmidiarrowtarget {
  position: fixed;
  left: 380px;
  top: 100px;
  width: 0;
  height: 0;
}
.os-windows.browser-chrome .allowmidiarrowtarget {
  left: 180px;
  top: 130px;
}
.os-windows.browser-edge .allowmidiarrowtarget {
  left: auto;
  top: auto;
  bottom: 70px;
  right: 27%;
}
.os-chromeos .allowmidiarrowtarget {
  left: 245px;
  top: 125px;
}

.downloadedfilearrowtarget {
  position: fixed;
  left: 100px;
  bottom: 0;
  width: 0;
  height: 0;
}

table.performance-test-results {
  border: 1px solid #999999;
  border-collapse: collapse;
  margin: 0 auto;
}
table.performance-test-results td {
  padding: 2px 5px 2px 5px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #c8c8c8;
}
table.performance-test-results .perc {
  width: 20%;
}

.collaborationvideo {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.collaborationvideo .videothumbnail {
  position: relative;
  flex: 2;
  -webkit-flex: 2;
  margin-top: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.4);
}
.collaborationvideo .videothumbnail .collab-thumbnail {
  height: 218px;
  width: 340px;
  border-radius: 4px;
  background: url("/studio/assets/images/studio/collab_thumbnail.jpg") no-repeat;
}
@media (max-width: 339px) {
  .collaborationvideo .videothumbnail .collab-thumbnail {
    width: 300px;
  }
}
.collaborationvideo .videothumbnail .overlay {
  position: absolute;
  display: flex;
  display: -webkit-flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 37px;
  color: #c8c8c8;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
}
.collaborationvideo .videothumbnail .overlay .videothumbnail-label {
  font-size: 13px;
  background-color: #56a0b5;
  color: #ffffff;
  padding: 4px 10px;
  border-top-left-radius: 4px;
}
.collaborationvideo .videothumbnail .overlay .closer {
  display: block;
  position: static;
  opacity: 1;
  cursor: pointer;
}
.collaborationvideo .videothumbnail .overlay .middle-section {
  width: 205px;
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
}
@media (max-width: 339px) {
  .collaborationvideo .videothumbnail .overlay .middle-section {
    margin-left: -23px;
  }
}
.collaborationvideo .videothumbnail .overlay .play-label {
  color: #ffffff;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin-top: 10px;
}
.collaborationvideo .videothumbnail .overlay .play-button-wrapper {
  transition: background-color 100ms;
  border: 1px solid #ffffff;
  width: 42px;
  height: 42px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.4);
  justify-content: center;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.collaborationvideo .videothumbnail .overlay .play-button-wrapper .play-button {
  color: #ffffff;
  font-size: 30px;
}
.pl-computer .collaborationvideo .videothumbnail .overlay .play-button-wrapper:hover:not(.disabled) {
  background-color: rgba(255, 255, 255, 0.2);
}
.collaborationvideo .invite-placeholder {
  width: 100%;
  height: 246px;
  background: url("/studio/assets/images/studio/img-collaborators-purple.png") no-repeat #5a00aa center 23%;
  text-align: center;
  display: flex;
  display: -webkit-flex;
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .collaborationvideo .invite-placeholder {
    background: url("/studio/assets/images/studio/img-collaborators-purple@2x.png") no-repeat #5a00aa center 23%;
    background-size: 44%;
  }
}
.collaborationvideo .invite-placeholder p {
  width: 240px;
  white-space: normal;
  color: #ffffff;
  font-family: var(--font-family);
  font-weight: 300;
  margin-bottom: 20px;
}
.pl-computer .collaborationvideo .overlay:hover {
  text-decoration: none;
}
.collaborationvideo .collaborationinfo {
  border-left: 1px solid #e6e6e6;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  width: 100%;
  padding: 10px 20px 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.collaborationvideo .collaborationinfo .email-invite-wrapper {
  width: 100%;
  margin-top: 10px;
}
.collaborationvideo .collaborationinfo .email-invite-wrapper .email-invite-header {
  font-family: var(--font-family);
  font-weight: 500;
  color: #3c3c3c;
  margin-bottom: 5px;
}
.collaborationvideo .collaborationinfo .email-invite-wrapper .email-invite-input-wrapper {
  display: flex;
  display: -webkit-flex;
}
.collaborationvideo .collaborationinfo .email-invite-wrapper .email-invite-input-wrapper .flatbutton {
  min-width: 100px;
  margin: 0 0 0 10px;
}
.collaborationvideo .collaborationinfo .choosefriendsbutton {
  cursor: pointer;
}
.collaborationvideo .collaborationinfo .flatbutton {
  min-width: 114px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  padding: 10px;
}
.layout-portrait .collaborationvideo.compactheight .invite-placeholder {
  display: none;
}
.layout-landscape .collaborationvideo.compactheight .collaborationinfo {
  display: none;
}

.new-badge {
  border-radius: 0;
  background-color: transparent;
  border: 1px solid rgba(102, 57, 183, 0.55);
  color: #5a00aa;
  padding: 1px 3px;
  font-size: 9px;
  font-weight: 500;
  transform: translatey(-5px);
  line-height: 9px;
  display: inline-block;
}

.sync-area {
  position: relative;
  width: 100%;
  z-index: 2;
  height: 0;
  background-color: var(--background-base);
  color: var(--text-base);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 300;
  transition: height 250ms ease;
  will-change: height;
}
.sync-area .syncbutton  {
  min-width: 70px;
}
.sync-area.expanded {
  min-height: 50px;
  height: initial;
}
.sync-area .sync-lbl {
  margin-right: 5px;
}

.chat-facepile {
  display: flex;
  align-items: center;
  height: 34px;
}
.chat-facepile .individuals {
  display: inline-block;
}
.chat-facepile .additional {
  box-sizing: border-box;
  cursor: default;
  text-align: center;
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  border: 1px solid var(--essential-subdued);
  line-height: 24px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.studioheader .chat-facepile {
  margin-top: 0;
}
body.pl-mobile .chat-facepile {
  height: 44px;
}
body.pl-mobile .chat-facepile .additional {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
}

.chat-face {
  display: inline-block;
  position: relative;
  margin-right: 5px;
}
.chat-face .profile {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.chat-face .presence {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.chat-face.present .presence {
  border: 1px solid #ffffff;
  background-color: #6bcc99;
}
.chat-face.pending {
  opacity: 0.5;
}
body.pl-mobile .chat-face {
  height: 44px;
  width: 44px;
}
body.pl-mobile .chat-face .profile {
  height: 44px;
  width: 44px;
  border-radius: 22px;
}

.svgspinner .loader {
  position: relative;
  margin: 0px auto;
  width: 13px;
}
.svgspinner .loader:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.svgspinner .circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.svgspinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

/*
Hack to vertically center Zendesk chat widget in the studio.
This might change since we don't own the code. Sorry.
 */
iframe#launcher {
  margin: 0 var(--space-nano) -3px 0 !important;
  transform: scale(0.85) !important;
}
@media (max-height: 320px) {
  iframe#launcher {
    /* hiding the Zendesk chat widget when the client height is small,
    because otherwise it covers the composition area */
    display: none;
  }
}

.dropdown {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 100ms, background-image 100ms, border-color 100ms, color 100ms, opacity 100ms;
  border: none;
  padding: 9px;
  min-width: 76px;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  color: inherit;
  line-height: 11px;
  text-transform: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  min-width: 0;
}
.dropdown:hover {
  transition: background-color 30ms, background-image 30ms, border-color 30ms, color 30ms, opacity 30ms;
}
.pl-mobile .dropdown {
  transition: opacity 150ms;
}
.pl-mobile .dropdown:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.stomp .dropdown {
  position: absolute;
  top: 54px;
  padding: 10px 0;
  width: 90%;
  left: 5%;
}
.dropdown.dropdown-boxed {
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  padding: 9px 12px;
  width: 260px;
  text-align: left;
  border-radius: 3px;
}
.dropdown.dropdown-boxed .menudown {
  position: absolute;
  right: 10px;
  top: 9px;
}
.dropdown.ampdropdown {
  color: var(--text-primary);
  height: 20px;
}

.popupmenu {
  --icon-size: 11px;
  --icon-margin: 13px;
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 200;
}
.popupmenu .closer {
  z-index: 300;
}
.popupmenu .dialogbackdrop {
  opacity: 0;
  z-index: 200;
}
.popupmenu.repositioning {
  opacity: 0.01;
}
.popupmenu .inner {
  position: fixed;
  color: var(--text-base);
  z-index: 201;
  font-size: 15px;
  font-weight: 400;
  overflow: auto;
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 2px 6px 0 var(--default-box-shadow-color);
  background-color: var(--background-base);
  border: solid 1px var(--background-elevated-highlight);
  padding: 3px 0;
}
.popupmenu .inner .text {
  text-align: left;
  padding: 4px 12px 0 14px;
}
.popupmenu .inner .text .lbl {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-subdued);
}
.popupmenu .inner .text .subdued {
  font-weight: 500;
  color: var(--text-subdued);
}
.popupmenu .inner .item {
  list-style: none;
  box-sizing: border-box;
  text-align: left;
  min-width: 200px;
}
.popupmenu .inner .button {
  cursor: pointer;
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  padding: 8px 12px 7px 15px;
  line-height: 17px;
}
body.pl-mobile .popupmenu .inner .button {
  padding: 12px 12px 12px 12px;
}
.popupmenu .inner .item .icon {
  display: inline-block;
  height: var(--icon-size);
  vertical-align: bottom;
  margin-bottom: 3px;
  width: var(--icon-size);
  font-size: 11px;
  margin-right: var(--icon-margin);
  color: var(--text-base);
}
.popupmenu .inner .item .icon svg {
  fill: currentColor;
  margin-top: -1px;
}
.popupmenu .inner .item .icon.ic-ok {
  margin-bottom: 3px;
}
.popupmenu .inner .item .icon.icon-small-dot-green, .popupmenu .inner .item .icon.icon-small-dot-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 6px;
  margin-left: 4px;
  margin-right: 13px;
}
.popupmenu .inner .item .icon.icon-small-dot-green {
  background-color: var(--essential-positive);
}
.popupmenu .inner .item .icon.icon-small-dot-red {
  background-color: var(--essential-negative);
}
.popupmenu .inner .item .icon.icon-big-dot {
  border-radius: 50%;
  margin-bottom: 4px;
  background-color: var(--background-elevated-base);
}
.popupmenu .inner .item .lbl {
  display: inline-block;
  color: var(--text-base);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0.026px;
  margin-right: 10px;
  font-family: var(--font-family);
}
.popupmenu .inner .item .shortcut {
  color: var(--text-base);
  float: right;
  font-size: 12px;
  line-height: 20px;
}
.popupmenu .inner .item .shortcut.soundtrap-icon {
  margin-top: 1px;
}
.popupmenu .inner .item .shortcut.ic-chevron-right {
  font-size: 9px;
  line-height: 17px;
  margin-top: 1px;
}
.popupmenu .inner .item.item-checked .icon {
  color: var(--essential-base);
}
.popupmenu .inner .item.item-checked .shortcut {
  color: var(--text-base);
}
body.pl-computer .popupmenu .inner .item:hover, .popupmenu .inner .item.studio-focus-visible, .popupmenu .inner .item .button.studio-focus-visible, .popupmenu .inner .item.hovered {
  outline: none;
  background-color: var(--background-tinted-base);
  color: var(--text-base);
}
body.pl-computer .popupmenu .inner .item:hover .icon, .popupmenu .inner .item.studio-focus-visible .icon, .popupmenu .inner .item .button.studio-focus-visible .icon, .popupmenu .inner .item.hovered .icon {
  color: var(--text-base);
}
body.pl-computer .popupmenu .inner .item:hover .lbl, .popupmenu .inner .item.studio-focus-visible .lbl, .popupmenu .inner .item .button.studio-focus-visible .lbl, .popupmenu .inner .item.hovered .lbl {
  color: var(--text-base);
}
body.pl-computer .popupmenu .inner .item:hover .shortcut, .popupmenu .inner .item.studio-focus-visible .shortcut, .popupmenu .inner .item .button.studio-focus-visible .shortcut, .popupmenu .inner .item.hovered .shortcut {
  color: var(--text-base);
}
.popupmenu .inner .item.disabled {
  color: var(--text-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.popupmenu .inner .item.disabled .icon {
  color: var(--text-subdued);
}
.popupmenu .inner .item.disabled .lbl {
  color: var(--text-subdued);
}
.popupmenu .inner .item.disabled .shortcut {
  color: var(--text-subdued);
}
.popupmenu .inner .separator {
  width: 100%;
  margin: 8px 0 7px;
  background-color: var(--decorative-subdued);
  height: 1px;
  list-style: none;
}
body.pl-mobile .popupmenu.popup-menu-horizontal .inner {
  white-space: nowrap;
  padding: 0;
}
body.pl-mobile .popupmenu.popup-menu-horizontal .inner .item {
  cursor: pointer;
  width: auto;
  min-width: initial;
  padding: 9px 23px 9px 9px;
  display: inline-block;
}
body.pl-mobile .popupmenu.popup-menu-horizontal.wrapok .inner {
  white-space: normal;
}
.popupmenu.hide-icons .inner .item .icon {
  display: none;
}

.popupmenu__upsellText {
  font-size: 11px;
  color: var(--text-subdued);
  float: right;
  margin-left: 10px;
  margin-top: 3px;
}
button:hover .popupmenu__upsellText, button:focus .popupmenu__upsellText {
  text-decoration: underline;
}

.popupmenu__spotlightText {
  font-size: 11px;
  color: var(--text-spotlight);
  float: right;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 3px;
}
button:hover .popupmenu__spotlightText button:focus .popupmenu__spotlightText {
  text-decoration: underline;
}

.popupmenu__description {
  display: block;
  margin-left: calc(var(--icon-size) + var(--icon-margin));
  color: var(--text-subdued);
  margin-top: 4px;
}

.popupmenu__sectionHeading {
  text-align: left;
  color: var(--text-subdued);
  padding: 8px 12px 2px 14px;
  font-size: 11px;
  margin: 0;
}

.popupmenu__sectionList {
  margin: 0;
  padding: 0;
}
.popupmenu__sectionList:not(:last-child) {
  border-bottom: 1px solid var(--decorative-subdued);
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.popupmenu .color-menu,
.color-dialog .color-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 202px;
  padding: 10px;
}
.popupmenu .color-menu .color-item-wrapper,
.color-dialog .color-menu .color-item-wrapper {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--decorative-subdued);
  margin: 1px;
}
.popupmenu .color-menu .color-item-wrapper.selected,
.color-dialog .color-menu .color-item-wrapper.selected {
  border-color: var(--essential-primary);
}
.popupmenu .color-menu .color-item,
.color-dialog .color-menu .color-item {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin: 2px;
  opacity: 0.8;
  background-color: var(--background-elevated-base);
}
.popupmenu .color-menu .color-item:hover,
.color-dialog .color-menu .color-item:hover {
  opacity: 1;
}

.color-dialog.basicdialog .inner {
  padding: 40px 80px;
}
.color-dialog.basicdialog .inner .color-menu {
  justify-content: center;
  width: initial;
}
.color-dialog.basicdialog .inner .color-menu .color-item-wrapper {
  width: 56px;
  height: 56px;
  margin: 10px;
  border-width: 3px;
}
.color-dialog.basicdialog .inner .color-menu .color-item-wrapper .color-item {
  width: 44px;
  height: 44px;
  margin: 3px;
}

.toggle-menu-item-holder {
  cursor: pointer;
}
.toggle-menu-item-holder .toggle-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 7px 7px 15px;
}
.toggle-menu-item-holder .toggle-menu-item.left-pad {
  margin-left: calc(var(--icon-size) + var(--icon-margin));
}
.toggle-menu-item-holder .toggle-menu-item.fullscreen {
  justify-content: flex-start;
}
.toggle-menu-item-holder .toggle-menu-item.fullscreen.left-pad {
  margin-left: var(--icon-size);
}
.toggle-menu-item-holder .toggle-menu-item .label-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.toggle-menu-item-holder .toggle-menu-item .icon {
  margin-right: var(--icon-margin);
  color: var(--text-base);
  font-size: 11px;
}
.toggle-menu-item-holder .toggle-menu-item .svg-icon {
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-base);
  margin-right: var(--icon-margin);
}
.toggle-menu-item-holder .toggle-menu-item .lbl {
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0.1px;
  margin-right: 8px;
  margin-bottom: 0;
  font-size: 13px;
  cursor: pointer;
}
.toggle-menu-item-holder .toggle-menu-item .new-label {
  background: var(--essential-positive);
  border-radius: 2px;
  font-size: 8px;
  padding: 4px 6px;
  color: white;
}
.toggle-menu-item-holder .toggle-menu-item .bold {
  font-weight: 500;
}
.toggle-menu-item-holder:hover {
  background-color: var(--background-tinted-base);
  color: var(--text-base);
}
.toggle-menu-item-holder:hover > * {
  background-color: transparent; /* Ensure child elements don't inherit the background color */
}
.toggle-menu-item-holder:hover .svg-icon {
  fill: var(--text-base);
}

.automationheaders {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: var(--background-base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--decorative-subdued);
}
.automationheaders .soundtrap-icon {
  transform: translateY(1px);
}
.automationheaders.collapsed {
  display: none;
}
.automationheaders .automationheader-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.automationheaders .automationheader-container .automationheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--space-nano);
  align-items: stretch;
  gap: var(--space-nano);
  margin: var(--space-tiny);
  border-radius: 4px;
  background-color: var(--background-elevated-base);
  height: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: var(--decorative-subdued);
}
.automationheaders .automationheader-container .automationheader.selected {
  border-color: var(--essential-subdued);
}
.automationheaders .automationheader-container .automationheader .automationheader-toggle {
  display: flex;
  align-items: stretch;
}
.automationheaders .automationheader-container .automationheader .automationheader-onoff {
  padding: var(--space-tiny) var(--space-nano) var(--space-tiny) var(--space-tiny-1);
  color: var(--essential-primary);
  background-color: transparent;
  border: 0;
}
.automationheaders .automationheader-container .automationheader .automationheader-onoff.off {
  color: var(--essential-subdued);
}
.automationheaders .automationheader-container .automationheader .automationheader-caption {
  align-self: center;
  flex: 1;
  color: var(--text-base);
}
.automationheaders .automationheader-container .automationheader .automationheader-caption.on {
  color: var(--text-base);
}
.automationheaders .automationheader-container .automationheader .automationheader-caption.off {
  color: var(--text-subdued);
}
.automationheaders .automationheader-container .automationheader .automationparamselector {
  display: inline-flex;
  gap: var(--space-nano);
  margin-left: var(--space-tiny);
  align-items: center;
  color: var(--essential-primary);
}
.automationheaders .automationheader-container .automationheader .automationparamselector.off {
  color: var(--essential-subdued);
}
.automationheaders .automationheader-container .automationheader .deleteautomation {
  padding-right: var(--space-tiny);
  color: var(--essential-subdued);
  border: 0;
  background: none;
}
.automationheaders .automationheader-container .automationheader .deleteautomation:hover {
  color: var(--essential-base);
}
.automationheaders button.newautomationbutton {
  border: none;
  padding: 0;
  background: none;
}
.automationheaders .newautomationbutton-wrapper {
  display: flex;
  flex-direction: row;
}
.automationheaders .newautomationbutton-wrapper .newautomationbutton-inner {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-nano);
  margin: var(--space-tiny);
  border: 1px solid var(--essential-subdued);
  border-radius: 4px;
  text-align: center;
  color: var(--text-base);
}

.automationeditors {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  left: 1px;
  border-bottom: 1px solid var(--decorative-subdued);
}
.automationeditors .automationcontrolpoint {
  border-color: var(--decorative-subdued);
}
.automationeditors .automationcontrolpoint.selected {
  background-color: var(--background-base);
}
.automationeditors .automationcontrolpoint:hover:not(.selected) {
  box-shadow: 0px 0px 0px 4px rgba(var(--background-base), 50%);
}
.automationeditors .automationeditor {
  opacity: 0.75;
  position: relative;
  box-sizing: border-box;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--decorative-subdued);
}
.automationeditors .automationeditor svg {
  position: relative;
  width: 100%;
  stroke: var(--background-elevated-highlight);
}
.automationeditors .automationeditor svg polyline {
  fill: none;
  stroke-miterlimit: 0;
}
.automationeditors .automationeditor .automationcontrolpoint {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--decorative-subdued);
  background-color: var(--background-tinted-base);
}
.automationeditors .automationeditor .automationcontrolpoint.selected {
  background-color: var(--background-elevated-highlight) !important;
}
.automationeditors .automationeditor .automationcontrolpoint:hover:not(.selected) {
  box-shadow: 0 0 0 4px var(--background-highlight);
}
.automationeditors .automationeditor.track-selected .automationcontrolpoint {
  background-color: var(--decorative-base);
}
.automationeditors .automationeditor .selectionmarquee {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed #ffffff;
  background: #5a00aa;
  opacity: 0.3;
}
.automationeditors .automationeditor.disabled {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-filter: saturate(0%);
  -moz-filter: saturate(0%);
  -o-filter: saturate(0%);
  -ms-filter: saturate(0%);
  filter: saturate(0%);
}
.automationviewer {
  top: -1px;
  opacity: 1;
  position: relative;
  overflow: hidden;
  z-index: 9999;
  pointer-events: none;
  stroke: var(--essential-subdued);
  opacity: 0.5;
}
.automationviewer svg {
  position: absolute;
  left: 0px;
  width: 100%;
}
.automationviewer svg polyline {
  fill: none;
  stroke-miterlimit: 0;
}

.automationupgradeprompt {
  display: flex;
  flex-direction: column;
  background-color: var(--background-elevated-base);
  border-top: solid 1px var(--decorative-subdued);
  padding: 20px;
  margin-top: 7px;
  margin-bottom: -7px;
}
.automationupgradeprompt .message {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-base);
  width: 200px;
}
.automationupgradeprompt .upgradebutton {
  font-size: 11px;
  height: 26px;
  line-height: 26px;
  margin-right: 10px;
}

.drum-controller-touch {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
}
.drum-controller-touch.with-top-menu {
  top: 80px;
  margin-top: -80px;
}
.drum-controller-touch .hit-overlay {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.drum-controller-touch .pressed .hit-overlay {
  opacity: 0.3;
}
.drum-controller-touch .elem-a {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 34vw;
  height: 34vw;
  left: 33vw;
  bottom: 33vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: -7vw;
  bottom: 8vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-a.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-a .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 92%;
  height: 92%;
  left: 4%;
  bottom: 4%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-a .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-a .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 40%;
  height: 40%;
  left: 30%;
  bottom: 30%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-a .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-a .hit-overlay {
  width: 106%;
  height: 106%;
  margin-left: -3%;
  margin-top: -3%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-b {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 21vw;
  height: 21vw;
  left: 39.5vw;
  bottom: 39.5vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 26vw;
  bottom: 2vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-b.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-b .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 92%;
  height: 92%;
  left: 4%;
  bottom: 4%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-b .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-b .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 40%;
  height: 40%;
  left: 30%;
  bottom: 30%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-b .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-b .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-c {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 14vw;
  height: 14vw;
  left: 43vw;
  bottom: 43vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 29.7vw;
  bottom: 20.3vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-c.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-c .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 70%;
  height: 70%;
  left: 15%;
  bottom: 15%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-c .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-c .hit-overlay {
  width: 116%;
  height: 116%;
  margin-left: -8%;
  margin-top: -8%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-d {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 14vw;
  height: 14vw;
  left: 43vw;
  bottom: 43vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 43vw;
  bottom: 11vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-d.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-d .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 70%;
  height: 70%;
  left: 15%;
  bottom: 15%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-d .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-d .hit-overlay {
  width: 116%;
  height: 116%;
  margin-left: -8%;
  margin-top: -8%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-e {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 21vw;
  height: 21vw;
  left: 39.5vw;
  bottom: 39.5vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 58vw;
  bottom: 2vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-e.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-e .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 80%;
  height: 80%;
  left: 10%;
  bottom: 10%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-e .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-e .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 60%;
  height: 60%;
  left: 20%;
  bottom: 20%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-e .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-e .inner-3 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 16%;
  height: 16%;
  left: 42%;
  bottom: 42%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-e .inner-3.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-e .inner-4 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 8%;
  height: 8%;
  left: 46%;
  bottom: 46%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-e .inner-4.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-e .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-f {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 21vw;
  height: 21vw;
  left: 39.5vw;
  bottom: 39.5vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 65vw;
  bottom: 19vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-f.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-f .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 80%;
  height: 80%;
  left: 10%;
  bottom: 10%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-f .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-f .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 60%;
  height: 60%;
  left: 20%;
  bottom: 20%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-f .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-f .inner-3 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 16%;
  height: 16%;
  left: 42%;
  bottom: 42%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-f .inner-3.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-f .inner-4 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 8%;
  height: 8%;
  left: 46%;
  bottom: 46%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-f .inner-4.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-f .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-g {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 11vw;
  height: 11vw;
  left: 44.5vw;
  bottom: 44.5vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 84vw;
  bottom: 11vw;
  background-color: #ffb8f4;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-g.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-g .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 64%;
  height: 64%;
  left: 18%;
  bottom: 18%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-g .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-g .hit-overlay {
  width: 120%;
  height: 120%;
  margin-left: -10%;
  margin-top: -10%;
  background-color: var(--essential-base);
}
.drum-controller-touch .elem-h {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 11vw;
  height: 11vw;
  left: 44.5vw;
  bottom: 44.5vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 89vw;
  bottom: 22vw;
  background-color: #ffb8f4;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-touch .elem-h.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-h .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 64%;
  height: 64%;
  left: 18%;
  bottom: 18%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-touch .elem-h .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-touch .elem-h .hit-overlay {
  width: 120%;
  height: 120%;
  margin-left: -10%;
  margin-top: -10%;
  background-color: var(--essential-base);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 54.4vw;
  height: 54.4vw;
  left: 22.8vw;
  bottom: 22.8vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: -4vw;
  bottom: 8vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 92%;
  height: 92%;
  left: 4%;
  bottom: 4%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 40%;
  height: 40%;
  left: 30%;
  bottom: 30%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-a .hit-overlay {
  width: 106%;
  height: 106%;
  margin-left: -3%;
  margin-top: -3%;
  background-color: var(--essential-base);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 33.6vw;
  height: 33.6vw;
  left: 33.2vw;
  bottom: 33.2vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 50vw;
  bottom: 2vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 92%;
  height: 92%;
  left: 4%;
  bottom: 4%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 40%;
  height: 40%;
  left: 30%;
  bottom: 30%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-b .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
  background-color: var(--essential-base);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-d {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 22.4vw;
  height: 22.4vw;
  left: 38.8vw;
  bottom: 38.8vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 75vw;
  bottom: 15vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-d.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-d .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 70%;
  height: 70%;
  left: 15%;
  bottom: 15%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-d .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-d .hit-overlay {
  width: 116%;
  height: 116%;
  margin-left: -8%;
  margin-top: -8%;
  background-color: var(--essential-base);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e {
  position: absolute;
  border: 1px solid var(--decorative-subdued);
  width: 33.6vw;
  height: 33.6vw;
  left: 33.2vw;
  bottom: 33.2vw;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 59vw;
  bottom: 45vw;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-1 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 80%;
  height: 80%;
  left: 10%;
  bottom: 10%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-2 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 60%;
  height: 60%;
  left: 20%;
  bottom: 20%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-3 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 16%;
  height: 16%;
  left: 42%;
  bottom: 42%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-3.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-4 {
  pointer-events: none;
  opacity: 0.4;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 8%;
  height: 8%;
  left: 46%;
  bottom: 46%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .inner-4.transparent {
  pointer-events: none;
  opacity: 0;
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-e .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
  background-color: var(--essential-base);
}
body.ff-handheld.layout-portrait .drum-controller-touch .elem-c,
body.ff-handheld.layout-portrait .drum-controller-touch .elem-f,
body.ff-handheld.layout-portrait .drum-controller-touch .elem-g,
body.ff-handheld.layout-portrait .drum-controller-touch .elem-h {
  display: none !important;
}

.drum-controller-desktop {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.drum-controller-desktop .above {
  flex: 1;
}
.drum-controller-desktop .middle {
  position: relative;
  width: 905px;
  height: 323px;
  margin-left: 40px;
  align-self: center;
}
.drum-controller-desktop .below {
  flex: 1;
}
.drum-controller-desktop .hit-overlay {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background-color: var(--essential-base);
}
.drum-controller-desktop .pressed .hit-overlay {
  opacity: 0.3;
}
.drum-controller-desktop .key {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -13px;
  margin-top: -13px;
  pointer-events: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--decorative-subdued);
  font-size: 13px;
  font-family: var(--font-family);
  font-weight: 500;
  text-align: center;
  line-height: 26px;
  background-color: var(--essential-base);
}
.drum-controller-desktop .key.transparent {
  opacity: 0;
}
.drum-controller-desktop .elem-a {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 205px;
  height: 205px;
  left: -52.5px;
  bottom: -52.5px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 334px;
  bottom: 0px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-a.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-a .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 56%;
  height: 56%;
  left: 22%;
  bottom: 22%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-a .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-a .hit-overlay {
  width: 106%;
  height: 106%;
  margin-left: -3%;
  margin-top: -3%;
}
.drum-controller-desktop .elem-b {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 154px;
  height: 154px;
  left: -27px;
  bottom: -27px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 200px;
  bottom: 46px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-b.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-b .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 95%;
  height: 95%;
  left: 2.5%;
  bottom: 2.5%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-b .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-b .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 46%;
  height: 46%;
  left: 27%;
  bottom: 27%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-b .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-b .hit-overlay {
  width: 108%;
  height: 108%;
  margin-left: -4%;
  margin-top: -4%;
}
.drum-controller-desktop .elem-c {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 154px;
  height: 154px;
  left: -27px;
  bottom: -27px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 517px;
  bottom: 46px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-c.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-c .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 95%;
  height: 95%;
  left: 2.5%;
  bottom: 2.5%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-c .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-c .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 46%;
  height: 46%;
  left: 27%;
  bottom: 27%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-c .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-c .hit-overlay {
  width: 108%;
  height: 108%;
  margin-left: -4%;
  margin-top: -4%;
}
.drum-controller-desktop .elem-d {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 134px;
  height: 134px;
  left: -17px;
  bottom: -17px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 307px;
  bottom: 159px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-d.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-d .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 94%;
  height: 94%;
  left: 3%;
  bottom: 3%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-d .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-d .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 50%;
  height: 50%;
  left: 25%;
  bottom: 25%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-d .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-d .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.drum-controller-desktop .elem-e {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 134px;
  height: 134px;
  left: -17px;
  bottom: -17px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 430px;
  bottom: 159px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-e.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-e .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 94%;
  height: 94%;
  left: 3%;
  bottom: 3%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-e .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-e .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 50%;
  height: 50%;
  left: 25%;
  bottom: 25%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-e .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-e .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.drum-controller-desktop .elem-f {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 147px;
  height: 147px;
  left: -23.5px;
  bottom: -23.5px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 103px;
  bottom: 84px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-f.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-f .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 78%;
  height: 78%;
  left: 11%;
  bottom: 11%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-f .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-f .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 56%;
  height: 56%;
  left: 22%;
  bottom: 22%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-f .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-f .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.drum-controller-desktop .elem-g {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 147px;
  height: 147px;
  left: -23.5px;
  bottom: -23.5px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 621px;
  bottom: 84px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-g.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-g .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 78%;
  height: 78%;
  left: 11%;
  bottom: 11%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-g .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-g .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 56%;
  height: 56%;
  left: 22%;
  bottom: 22%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-g .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-g .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.drum-controller-desktop .elem-h {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 129.36px;
  height: 129.36px;
  left: -14.68px;
  bottom: -14.68px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 205px;
  bottom: 193px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-h.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-h .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 78%;
  height: 78%;
  left: 11%;
  bottom: 11%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-h .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-h .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 56%;
  height: 56%;
  left: 22%;
  bottom: 22%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-h .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-h .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.drum-controller-desktop .elem-i {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 129.36px;
  height: 129.36px;
  left: -14.68px;
  bottom: -14.68px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 538px;
  bottom: 193px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-i.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-i .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 78%;
  height: 78%;
  left: 11%;
  bottom: 11%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-i .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-i .inner-2 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 56%;
  height: 56%;
  left: 22%;
  bottom: 22%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-i .inner-2.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-i .hit-overlay {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.drum-controller-desktop .dk-crosstick {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: 279px;
  bottom: 29px;
}
.drum-controller-desktop .dk-crosstick .hit-overlay {
  width: 100%;
  height: 100%;
}
.drum-controller-desktop .dk-hihatclosed {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: 147px;
  bottom: 56px;
}
.drum-controller-desktop .dk-hihatclosed .hit-overlay {
  width: 100%;
  height: 100%;
}
.drum-controller-desktop .dk-hihatpedal {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: 72px;
  bottom: 127px;
}
.drum-controller-desktop .dk-hihatpedal .hit-overlay {
  width: 100%;
  height: 100%;
}
.drum-controller-desktop .dk-riderim {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: 704px;
  bottom: 65px;
}
.drum-controller-desktop .dk-riderim .hit-overlay {
  width: 100%;
  height: 100%;
}
.drum-controller-desktop .elem-j {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 80px;
  height: 80px;
  left: 10px;
  bottom: 10px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 818px;
  bottom: 200px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-j.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-j .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 66%;
  height: 66%;
  left: 17%;
  bottom: 17%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-j .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-j .hit-overlay {
  width: 116%;
  height: 116%;
  margin-left: -8%;
  margin-top: -8%;
}
.drum-controller-desktop .elem-k {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 80px;
  height: 80px;
  left: 10px;
  bottom: 10px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 818px;
  bottom: 110px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-k.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-k .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 66%;
  height: 66%;
  left: 17%;
  bottom: 17%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-k .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-k .hit-overlay {
  width: 116%;
  height: 116%;
  margin-left: -8%;
  margin-top: -8%;
}
.drum-controller-desktop .elem-l {
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 80px;
  height: 80px;
  left: 10px;
  bottom: 10px;
  border-radius: 50%;
  transition: 0.3s opacity;
  left: 818px;
  bottom: 20px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.drum-controller-desktop .elem-l.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-l .inner-1 {
  pointer-events: none;
  opacity: 0.6;
  position: absolute;
  border: 1px solid var(--essential-subdued);
  width: 66%;
  height: 66%;
  left: 17%;
  bottom: 17%;
  border-radius: 50%;
  transition: 0.3s opacity;
}
.drum-controller-desktop .elem-l .inner-1.transparent {
  pointer-events: none;
  opacity: 0;
}
.drum-controller-desktop .elem-l .hit-overlay {
  width: 116%;
  height: 116%;
  margin-left: -8%;
  margin-top: -8%;
}

.step-sequencer-view {
  height: 100%;
  background-color: var(--background-elevated-base);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-sequencer-view .flex-filler {
  flex-grow: 1;
}
.pl-mobile .step-sequencer-view .flex-filler {
  display: none;
}
.pl-mobile .step-sequencer-view {
  align-items: auto;
}
.step-sequencer-view .step-sequencer-view-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 1200px;
  min-height: 115px;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 16px;
}
.pl-mobile .step-sequencer-view .step-sequencer-view-top {
  justify-content: space-between;
  height: auto;
  padding-top: 0;
  min-height: auto;
}
@media (max-width: 1050px) {
  .step-sequencer-view .step-sequencer-view-top .instrument-row-button-layout {
    flex-direction: row;
    max-width: unset;
    align-items: center;
    justify-content: inherit;
  }
}
.layout-landscape.pl-mobile .step-sequencer-view .step-sequencer-view-top {
  display: none;
}
.step-sequencer-view .step-sequencer-view-top .toolbutton {
  margin-right: 8px;
  border-color: #d2d2d2;
  font-size: 13px;
  line-height: 10px;
  padding-bottom: 11px;
  padding-top: 10px;
}
.step-sequencer-view .step-sequencer-view-top .toolbutton.active {
  background-color: #5a00aa;
  color: #ffffff;
}
.step-sequencer-view .step-sequencer-view-top .savepresetbutton {
  margin-left: 10px;
}
.step-sequencer-view .step-sequencer-view-top .quickcontrols {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  flex-grow: 1;
}
.step-sequencer-view .step-sequencer-view-top .quickcontrols .quickcontrolfx {
  margin: 0 15px;
}
.pl-mobile .step-sequencer-view .step-sequencer-view-top .quickcontrols {
  display: none;
}
.step-sequencer-view .step-sequencer-view-top .aigeneratorbutton .ic-instrument-drums {
  margin-top: -2px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: -1.5px;
}
.step-sequencer-view .step-sequencer-view-main {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex-grow: 1;
}
.step-sequencer-view .instrument-loading-progress {
  pointer-events: none;
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.step-sequencer-view .step-sequencer-editor {
  width: 100%;
  background-color: var(--background-base);
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
.step-sequencer-view .step-sequencer-editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.step-sequencer-view .step-sequencer-editor::-webkit-scrollbar-track {
  border-radius: 10px;
  background: var(--background-tinted-base);
}
.step-sequencer-view .step-sequencer-editor::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--essential-subdued);
  border: none;
}
.pl-computer .step-sequencer-view .step-sequencer-editor::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
}
.step-sequencer-view .step-sequencer-editor::-webkit-scrollbar-corner {
  background-color: transparent;
}
.step-sequencer-view .step-sequencer-editor .playhead-lane {
  height: 20px;
  display: flex;
  align-items: center;
  position: absolute;
  top: 24px;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .playhead-lane {
  top: 0;
}
.step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell {
  height: 8px;
  width: 8px;
  background-color: var(--background-elevated-base);
  border-radius: 4px;
  margin: 0 18px 0 22px;
}
.step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell.fourth {
  margin: 0 18px 0 28px;
}
.step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell.newbar {
  margin: 0 18px 0 38px;
}
.step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell.active {
  background-color: var(--essential-subdued);
}
.step-sequencer-view .step-sequencer-editor .playhead-lane .playhead-cell.unplayable {
  background: none;
}
.step-sequencer-view .step-sequencer-editor .unresolved-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  z-index: 1;
}
.step-sequencer-view .step-sequencer-editor .unresolved-sheet .problem-description {
  font-size: 18px;
  margin-bottom: 15px;
}
.step-sequencer-view .step-sequencer-editor .unresolved-sheet .resolve-button {
  color: #5a00aa;
  background-color: #ffffff;
  margin: 0 5px;
}
.step-sequencer-view .step-sequencer-editor .macro-controls {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  right: 0;
  color: var(--text-base);
  background-color: var(--background-base);
  box-shadow: -5px 0px 6px var(--background-base);
  z-index: 2;
  padding: 20px 20px 0 7px;
  width: 266px;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .macro-controls {
  justify-content: flex-end;
  gap: 4px;
  padding-top: 10px;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .cycle-button-wrapper {
  display: flex;
  align-items: center;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .cycle-button-wrapper .cycle-button {
  margin-right: 10px;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .cycle-button-wrapper .cycle-button .soundtrap-icon {
  vertical-align: middle;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .autoscroll-toggle {
  display: flex;
  align-items: center;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .autoscroll-toggle .btn {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .autoscroll-toggle .btn .auto-scroll-icon {
  background-image: url("/studio/assets/images/icons/ic-follow-beat.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 14px;
  background-size: contain;
  height: 14px;
}
.step-sequencer-view .step-sequencer-editor .macro-controls .autoscroll-toggle.active .auto-scroll-icon {
  background-image: url("/studio/assets/images/icons/ic-follow-beat-inv.png");
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes {
  position: relative;
  width: 100%;
  margin: 0;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable::-webkit-scrollbar-track {
  border-radius: 10px;
  background: var(--background-tinted-base);
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--essential-subdued);
  border: none;
}
.pl-computer .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable::-webkit-scrollbar-corner {
  background-color: transparent;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable .scrollable-lanes {
  height: 100%;
  position: relative;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable .scrollable-lanes .lanes {
  position: relative;
  overflow: visible;
  top: 48px;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable .scrollable-lanes .lanes {
  top: 24px;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable .scrollable-lanes .lanes .step-sequencer-lane {
  height: 44px;
  margin-bottom: 4px;
  display: flex;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable .scrollable-lanes .lanes .step-sequencer-lane .step-sequencer-cells {
  display: flex;
  height: 100%;
}
.step-sequencer-view .step-sequencer-editor .step-sequencer-lanes-scrollable .scrollable-lanes .dummy-lane {
  position: absolute;
  left: 0;
  height: 1px;
}
.step-sequencer-view .step-sequencer-editor .headers-lanes {
  display: flex;
  margin: auto;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.step-sequencer-view .step-sequencer-editor .headers {
  position: relative;
  margin: 48px 0 0 16px;
  width: 174px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .headers {
  margin-top: 0;
}
.step-sequencer-view .step-sequencer-editor .headers.no-add-button {
  margin-bottom: 48px;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header {
  width: 136px;
  height: 44px;
  border-radius: 4px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-subdued);
  color: var(--text-base);
  font-size: 13px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 10px;
  margin-right: 6px;
  margin-bottom: 4px;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .headers .lane-header {
  width: 112px;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector {
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  margin-left: 10px;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector {
  padding: 0;
  margin-left: 8px;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector .pitch-selector-name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector .selector-caret {
  font-size: 9px;
  margin-left: 6px;
  color: var(--essential-base);
  flex-shrink: 0;
  display: none;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector:not(disabled):hover .selector-caret, .step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector.studio-focus-visible .selector-caret {
  display: inline;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header .lane-remove {
  border: 0;
  background-color: transparent;
  color: var(--essential-subdued);
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header .pitch-selector,
.step-sequencer-view .step-sequencer-editor .headers .lane-header .lane-remove {
  cursor: pointer;
}
.step-sequencer-view .step-sequencer-editor .headers .lane-header.muted {
  color: #d2d2d2;
}
.step-sequencer-view .step-sequencer-editor .bar-counter {
  font-size: 18px;
  color: #ffffff;
  margin: 0 40px;
}
.step-sequencer-view .step-sequencer-editor .bar-markers {
  display: flex;
  color: var(--essential-base);
  position: absolute;
  left: -1px;
  top: 0;
  height: 20px;
}
.step-sequencer-view .step-sequencer-editor .bar-markers .bar-marker {
  position: relative;
  width: 792px;
  display: flex;
}
.pl-mobile .step-sequencer-view .step-sequencer-editor .bar-markers .bar-marker {
  display: none;
}
.step-sequencer-view .step-sequencer-editor .bar-markers .bar-marker .bar-line {
  width: 1px;
  background-color: rgba(155, 100, 220, 0.2);
  position: absolute;
  top: 0;
}
.step-sequencer-view .step-sequencer-editor .bar-markers .bar-marker .bar-number {
  left: 23px;
  position: relative;
}

.step-sequencer-cell {
  height: 100%;
  background-color: var(--background-elevated-base);
  border: 2px solid var(--essential-subdued);
  border-radius: 4px;
  box-shadow: 0 0 0 var(--background-elevated-base);
  transition: box-shadow 0.2s;
}

.step-sequencer-cell__active {
  background-color: var(--essential-subdued);
}

.step-sequencer-cell__unplayable {
  background-color: var(--background-tinted-base);
  border: none;
}

.step-sequencer-cell__unplayable.step-sequencer-cell__active {
  background-color: var(--essential-subdued);
}

.step-sequencer-cell__playing {
  box-shadow: 0 0 8px var(--text-subdued);
  transition: box-shadow 0s;
}

.step-sequencer-lane.muted .step-sequencer-cell {
  background-color: #9b9b9b;
}

.add-lane-button {
  width: 136px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-right: 6px;
  font-size: 13px;
  height: 44px;
  background-color: transparent;
  color: var(--text-subdued);
  border: 1px solid var(--essential-subdued);
  justify-content: center;
  cursor: pointer;
  margin-bottom: 0;
}
.pl-mobile .add-lane-button {
  width: 112px;
}
.add-lane-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.add-lane-button__icon {
  margin-right: 1ch;
}

.transcript-wrapper {
  background-color: var(--background-elevated-base);
}
.transcript-wrapper .transcript-editor-window {
  background-color: var(--background-elevated-base);
  min-height: 44px;
  border-bottom: 1px solid var(--decorative-subdued);
}
.transcript-wrapper .transcript-editor-window.expanded {
  position: relative;
  z-index: 1;
}
.transcript-wrapper .transcript-editor-window .cursor-pointer {
  cursor: pointer;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header {
  border-top: 1px solid var(--decorative-subdued);
  display: flex;
  align-items: center;
  height: 44px;
  justify-content: center;
  padding: 0 20px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex: 1;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-left .st-anchored-tool-tip {
  left: 92px;
  top: 60px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-left .transcript-shortcut-padding {
  margin-left: 130px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-left .transcript-shortcut-label {
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.1px;
  color: #ffffff;
  background-color: #9b64dc;
  padding: 3px 20px;
  border-radius: 6px;
  white-space: nowrap;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-left .transcript-shortcut-label.disabled {
  color: #9b9b9b;
  background-color: inherit;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-editor-header-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 1;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-label {
  display: flex;
  align-items: center;
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
  cursor: default;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-label.cursor-pointer {
  cursor: pointer;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-label .soundtrap-icon {
  font-size: 16px;
  margin-right: 7px;
  color: var(--text-base);
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .transcript-label .transcript-label-text {
  font-size: 13px;
  color: var(--text-base);
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .st-mouse-drag-handler {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background-color: #d2d2d2;
  display: flex;
  align-self: flex-start;
  padding: 5px 10px 10px 10px;
  box-sizing: content-box;
  background-clip: content-box;
}
.transcript-wrapper .transcript-editor-window .transcript-editor-header .st-clickable .soundtrap-icon {
  font-size: 17px;
  color: #9b9b9b;
}
.transcript-wrapper .transcript-editor-window .transcript-editor {
  display: flex;
  flex-direction: column;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-toolbar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: -34px;
  right: 14px;
  z-index: 10000;
  padding-left: 10px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-toolbar .tool-picker {
  min-width: 180px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-toolbar .tool-picker .icon-value {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-toolbar .tool-picker .icon-value .soundtrap-icon {
  color: #3c3c3c;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-toolbar .tool-picker .icon-value .value {
  padding-left: 0;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .top-border {
  background-color: #ffffff;
  height: 10px;
  border-bottom: 1px solid #e6e6e6;
  flex-shrink: 0;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable-viewport {
  overflow-x: hidden;
  overflow-y: auto;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .placeholder-doc {
  margin-top: 50px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .track-empty-banner {
  margin-top: 90px;
  cursor: pointer;
  font-style: italic;
  color: #9b9b9b;
  padding: 10px;
  text-align: center;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .timestamp {
  pointer-events: none;
  margin-left: -61px;
  margin-bottom: -31px;
  width: 55px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: var(--text-subdued);
  font-size: 11px;
  letter-spacing: 0.2px;
  margin-top: 2px;
  user-select: none;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .timestamp::selection {
  background-color: transparent;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .timestamp .timestamp-text.autobreak {
  color: #d2d2d2;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .timestamp .timestamp-text.autobreak::before {
  content: "(";
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .timestamp .timestamp-text.autobreak::after {
  content: ")";
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .timestamp .st-track-marker {
  margin-right: 7px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle {
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle .circle {
  position: absolute;
  pointer-events: none;
  top: -1px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0;
  background-color: var(--background-base);
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle .angle {
  display: inline-block;
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  margin-bottom: 8px;
  pointer-events: none;
  border-style: solid;
  border-width: 0;
  border-color: var(--background-base);
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle:hover .circle {
  opacity: 0.75;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle:hover .angle {
  border-color: #fff;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle.trim-handle-start .angle {
  margin-left: 2px;
  border-width: 2px 0 0 2px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle.trim-handle-end {
  margin-left: -5px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle.trim-handle-end .circle {
  left: -6px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .trim-handle.trim-handle-end .angle {
  margin-right: 2px;
  border-width: 2px 2px 0 0;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-correction .trim-handle {
  display: none;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
  padding-bottom: 90px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor span,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor p,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor h1,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .playing,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .trim-handle,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .cursor {
  user-select: none;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor span::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor p::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor h1::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .playing::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .trim-handle::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .cursor::selection {
  background-color: transparent;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .selectable {
  user-select: text;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .audio-editor .cursor {
  background-color: #5a00aa;
  width: 2px;
  margin-right: 1px;
  margin-left: -3px;
  margin-bottom: -6px;
  height: 22px;
  display: inline-block;
  cursor: text;
  animation-name: cursor-blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor span::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor p::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor h1::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor .playing::selection,
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor .trim-handle::selection {
  background-color: #d7c1ea;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor .selectable {
  user-select: text;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .text-editor p {
  color: #e6e6e6;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc {
  width: 596px;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.1px;
  user-select: none;
  cursor: text;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .selected {
  color: var(--background-base);
  background-color: var(--essential-base);
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .partially-selected {
  background-color: rgba(255, 0, 0, 0.5);
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing {
  border-radius: 2px;
  background-color: var(--essential-subdued);
  color: var(--background-base);
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .playing.selected {
  box-shadow: 0px 0px 0px 1px var(--decorative-base);
  position: relative;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc h1 {
  min-height: 30px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc p {
  margin-bottom: 25px;
  min-height: 30px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .rdoc .text-correction {
  color: var(--text-base);
  border: 1px solid var(--decorative-subdued);
  box-shadow: 0 0 6px var(--default-box-shadow-color);
  padding: 5px 0 6px 5px;
  border-radius: 4px;
  margin-left: -6px;
  margin-right: -1px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .untranscribed-region {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  font-weight: 500;
  padding: 30px 0;
  line-height: 1.33;
  margin: 40px 0;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .untranscribed-region .transcript-progress {
  display: flex;
  align-items: center;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .untranscribed-region .transcript-progress .st-simple-progress-bar .st-simple-progress-bar-bar {
  width: 206px;
}
.transcript-wrapper .transcript-editor-window .transcript-editor .transcript-editor-scrollable .untranscribed-region .transcript-progress .st-simple-progress-bar .st-simple-progress-bar-label {
  font-size: 13px;
}

.tool-picker-popup-menu .inner .item .lbl {
  font-size: 13px;
}

@keyframes cursor-blink {
  0% {
    background-color: var(--essential-primary);
  }
  50% {
    background-color: transparent;
  }
}
.transcript-track-menu {
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
  margin: 10px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--decorative-subdued);
  height: 28px;
  border-radius: 3px;
  background-color: transparent;
  font-family: var(--font-family);
  font-weight: 400;
  box-sizing: border-box;
}
.transcript-track-menu .soundtrap-icon.ic-chevron-double {
  color: #9b9b9b;
  padding: 0 5px;
  font-size: 13px;
  line-height: 28px;
  top: initial;
}
.transcript-track-menu .transcript-track-menu-chosen-tracks {
  margin-left: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  overflow: hidden;
}
.transcript-track-menu .transcript-track-menu-chosen-tracks .transcript-track-menu-chosen-tracks-markers {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.transcript-track-menu .transcript-track-menu-chosen-tracks .transcript-track-menu-chosen-tracks-markers .st-track-marker {
  margin-right: -2px;
  border-width: 1px;
  border-color: white;
  border-style: solid;
  width: 10px;
  height: 10px;
}
.transcript-track-menu .transcript-track-menu-chosen-tracks .transcript-track-menu-chosen-tracks-names {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.transcript-track-menu .transcript-track-menu-no-chosen-tracks {
  color: var(--text-base);
  margin-left: 15px;
  margin-right: 15px;
}
.transcript-track-menu.transcript-track-menu-disabled {
  border-color: var(--decorative-subdued);
  pointer-events: none;
  cursor: default;
}
.transcript-track-menu.transcript-track-menu-disabled .transcript-track-menu-no-chosen-tracks {
  color: var(--text-subdued);
}
.transcript-track-menu.transcript-track-menu-disabled .soundtrap-icon.ic-chevron-double {
  color: var(--text-subdued);
}

.transcript-track-menu-contents {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  cursor: default;
  max-width: 600px;
}
.transcript-track-menu-contents .transcript-track-menu-contents-scrollable {
  overflow-y: scroll;
  flex: 1;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .section-info {
  text-align: left;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--text-base);
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row {
  cursor: default;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  height: 48px;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .st-checkbox {
  margin-bottom: 0px;
  line-height: 1;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .st-checkbox .st-checkbox-input {
  margin-right: 27px;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .st-track-marker {
  margin-right: 7px;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .track-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .track-identifier {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .track-name {
  flex: 1;
  overflow: hidden;
  text-align: left;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .track-length {
  color: var(--text-base);
  margin-left: 16px;
  text-align: left;
}
.transcript-track-menu-contents .transcript-track-menu-contents-section .transcript-track-menu-contents-row .transcribe-button-async {
  min-width: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left: 40px;
}
.transcript-track-menu-contents .transcription-quota-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-elevated-base);
  margin-bottom: -10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}
.transcript-track-menu-contents .transcription-quota-info .transcription-quota-info-quota {
  min-width: 270px;
  min-height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.transcript-track-menu-contents .transcription-quota-info .transcription-quota-info-quota .transcription-quota-info-time-description {
  color: var(--text-subdued);
  margin-right: 5px;
}
.transcript-track-menu-contents .transcription-quota-info .transcription-quota-info-quota .transcription-quota-info-time-value {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}
.transcript-track-menu-contents .transcription-quota-info .transcription-quota-info-quota .transcription-quota-info-time-value .mango-label-medium {
  color: var(--text-subdued);
}
.transcript-track-menu-contents .transcription-quota-info .transcription-quota-info-upgrade-info {
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 270px;
  word-break: break-word;
  white-space: normal;
}
.transcript-track-menu-contents .transcription-quota-info .transcription-quota-info-upgrade-info .transcription-quota-info-upgrade-info-cta {
  margin: 10px;
}

.transcript-confirmation-dialog.basicdialog {
  z-index: 101;
}
.transcript-confirmation-dialog.basicdialog .inner {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 10px;
  padding-bottom: 30px;
  width: 494px;
}
.transcript-confirmation-dialog .body {
  white-space: pre-wrap;
  text-align: center;
}
.transcript-confirmation-dialog .body .transcript-confirmation-dialog-info {
  margin-top: 45px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}
.transcript-confirmation-dialog .body .transcript-confirmation-dialog-info .transcript-confirmation-dialog-info-track-identifier {
  margin-left: 5px;
  margin-right: 3px;
  font-weight: 700;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-top: -1px;
}
.transcript-confirmation-dialog .body .transcript-confirmation-dialog-info .transcript-confirmation-dialog-info-track-identifier .transcript-confirmation-dialog-info-track-name {
  margin-left: 5px;
}
.transcript-confirmation-dialog .body .transcript-confirmation-dialog-message {
  margin-bottom: 24px;
}
.transcript-confirmation-dialog .body .transcript-confirmation-dialog-disclaimer {
  margin-bottom: 24px;
  font-style: italic;
}
.transcript-confirmation-dialog .body .dont-show-again .st-checkbox-label {
  font-weight: 400;
}
.transcript-confirmation-dialog .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 65px;
}
.transcript-confirmation-dialog .footer .st-button {
  margin-left: 5px;
  margin-right: 5px;
}

.smart-voice-dialog .message-input {
  resize: none;
  width: 100%;
  height: 100%;
  min-height: 150px;
}
.smart-voice-dialog .buttons {
  margin-top: 20px;
}

.timeline-discussion-area {
  height: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.discussion-anchor {
  position: absolute;
  height: 24px;
  border-radius: 12px;
  background-color: var(--decorative-subdued);
  color: inherit;
  border: none;
  padding: 0;
  z-index: 1;
}
.discussion-anchor.no-background {
  background-color: transparent;
}
.discussion-anchor .comment-anchor {
  background: #aaa;
  position: relative;
  border: 1px solid var(--essential-base);
  border-radius: 3px;
  width: 20px;
  height: 16px;
}
.discussion-anchor .comment-anchor__arrow {
  content: "";
  position: absolute;
  top: 14px;
  left: 4px;
  border-top: solid 5px var(--essential-base);
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
}
.discussion-anchor .comment-anchor__arrow:after {
  content: "";
  position: absolute;
  top: -5px;
  left: -3px;
  border-top: solid 4px #aaa;
  border-left: solid 3px transparent;
  border-right: solid 3px transparent;
}
.discussion-anchor .comment-anchor__arrow--unread:after {
  border-top: solid 4px var(--essential-primary);
}
.discussion-anchor .comment-anchor--grouped-bg {
  top: -20px;
  left: 3px;
  z-index: -2;
}
.discussion-anchor .comment-anchor--unread {
  background: var(--essential-primary);
}
.discussion-anchor .comment-anchor__text {
  color: var(--text-base);
  font-size: 11px;
  display: block;
  position: relative;
  top: -1px;
  line-height: 16px;
}
.discussion-anchor .comment-anchor__text--small {
  font-size: 10px;
}
.discussion-anchor .profile-icon {
  height: 24px;
  width: 24px;
  border-radius: 12px;
  border: 2px solid var(--decorative-subdued);
  background-color: var(--decorative-subdued);
  vertical-align: baseline !important;
  position: relative;
}
.discussion-anchor .additional-count {
  height: 24px;
  width: 24px;
  border-radius: 12px;
  border: 2px solid var(--decorative-subdued);
  position: relative;
  background-color: var(--background-elevated-base);
  display: inline-block;
  box-sizing: border-box;
  font-size: 11px;
  overflow: hidden;
  line-height: 18px;
}

.timeline-add-discussion-thread-carriage {
  position: absolute;
}

.timeline-add-discussion-thread-button:hover,
.timeline-add-discussion-thread-button {
  background-color: var(--decorative-subdued);
  color: var(--text-base);
  border-radius: 4px;
  font-size: 16px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.st-dropdown {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  width: 100%;
}
.st-dropdown.st-dropdown-small {
  --st-dropdown-button-height: 28px;
  --st-dropdown-value-font-size: 13px;
  --st-dropdown-chevron-line-height: 26px;
  --st-dropdown-chevron-font-size: 12px;
  --st-dropdown-padding: 0 5px 0 8px;
  --st-dropdown-gap: var(--space-tiny);
}
.st-dropdown.st-dropdown-medium {
  --st-dropdown-button-height: 34px;
  --st-dropdown-value-font-size: 15px;
  --st-dropdown-chevron-line-height: 33px;
  --st-dropdown-chevron-font-size: 13px;
  --st-dropdown-padding: 0 7px 0 10px;
  --st-dropdown-gap: var(--space-small);
}

.st-dropdown-button[disabled] {
  --st-dropdown-opacity: 0.5;
}

.st-dropdown-button:not([disabled]) {
  --st-dropdown-opacity: 1;
}

.st-dropdown-button {
  background-color: var(--background-base);
  cursor: pointer;
  height: var(--st-dropdown-button-height);
  padding: 0;
  width: 100%;
  border-radius: 2px;
  border: 1px solid transparent;
  opacity: var(--st-dropdown-opacity);
}

.st-dropdown-button__naked {
  background-color: transparent;
}

.st-dropdown-button__outline {
  border-color: var(--essential-subdued);
}

.st-dropdown-button-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--st-dropdown-gap);
  padding: var(--st-dropdown-padding);
}

.st-dropdown-value {
  text-align: left;
  font-size: var(--st-dropdown-value-font-size);
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.2px;
  color: var(--text-base);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-dropdown-icon {
  fill: var(--text-base);
  width: 1em;
  display: flex;
  align-items: center;
  color: var(--text-base);
}

.st-select {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  --st-select-button-height: 28px;
  --st-select-value-font-size: 15px;
  --st-select-chevron-line-height: 28px;
  --st-select-chevron-font-size: 11px;
}

.st-select-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: var(--st-select-button-height);
  width: 100%;
  display: flex;
  justify-content: center;
}
.st-select-button--left {
  justify-content: start;
}
.st-select-button--center {
  justify-content: center;
}
.st-select-button--right {
  justify-content: end;
}

.st-select-value {
  font-size: var(--st-select-value-font-size);
  color: var(--text-base);
  margin-right: 10px;
}

.st-select-button-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.st-select-chevron {
  color: var(--text-base);
  font-size: var(--st-select-chevron-font-size);
  line-height: var(--st-select-chevron-line-height);
}

.chat-record-area {
  position: relative;
  width: 100%;
}
.chat-record-area .fatfingerbutton {
  padding-left: 10px;
}

.vu-meter {
  width: 258px;
  height: 127px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.vu-meter .vu-meter-background {
  width: 258px;
  height: 94px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: contain;
}
.vu-meter .vu-meter-needle-base {
  width: 1px;
  height: 1px;
  position: absolute;
  left: 120px;
  bottom: -10px;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}
.vu-meter .vu-meter-needle {
  width: 2px;
  height: 90px;
  position: absolute;
  left: 129px;
  top: 29px;
  transform-origin: center 95px;
  will-change: transform;
}
.vu-meter .red-zone-img {
  position: absolute;
  right: 0;
  top: 20px;
}
.vu-meter .safe-zone-img {
  position: absolute;
  left: 0;
  top: 0;
}
.vu-meter.passive .red-zone-img {
  color: var(--essential-subdued);
}
.vu-meter.passive .safe-zone-img {
  color: var(--essential-subdued);
}
.vu-meter.passive .vu-meter-needle-base {
  background-color: var(--essential-subdued);
  border-color: var(--essential-subdued);
}
.vu-meter.passive .vu-meter-needle {
  background-color: var(--essential-subdued);
}
.vu-meter.active .red-zone-img {
  color: var(--essential-negative);
}
.vu-meter.active .safe-zone-img {
  color: var(--essential-primary);
}
.vu-meter.active .vu-meter-needle-base {
  background-color: var(--essential-primary);
  border-color: var(--essential-primary);
}
.vu-meter.active .vu-meter-needle {
  background-color: var(--essential-primary);
}

.status-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.status-badge .status-badge-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.status-badge .status-badge-inner .soundtrap-icon {
  color: #ffffff;
  font-size: 20px;
}
.status-badge.status-success {
  background-color: rgba(95, 200, 130, 0.2);
}
.status-badge.status-success .status-badge-inner {
  background-color: #5fc882;
}
.status-badge.status-failure {
  background-color: rgba(235, 45, 85, 0.2);
}
.status-badge.status-failure .status-badge-inner {
  background-color: #eb2d55;
}

.input-selector {
  display: none;
  flex-direction: row;
  align-items: center;
  transition: height 0.1s;
  min-height: 32px;
  margin: 7px 16px 8px 20px;
  padding: 0;
}
.input-selector * {
  box-sizing: border-box;
}
.input-selector.visible {
  display: flex;
}
.input-selector .mic-calibration-button {
  margin-left: 16px;
}
.input-selector.stacked {
  flex-direction: column;
  margin: 0;
}
.input-selector.stacked .volume-section {
  width: 100%;
}
.input-selector.stacked .mic-calibration-button {
  margin-left: 0;
}
.input-selector.stacked .input-select-button {
  margin-bottom: 8px;
  width: 100%;
  border: 1px solid var(--essential-subdued);
  border-radius: 3px;
}
.input-selector .divider {
  width: 1px;
  height: 32px;
  margin-left: 16px;
  margin-right: 16px;
  background: var(--decorative-subdued);
}
.input-selector .volume-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.input-select-button {
  border: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 34px;
  background-color: transparent;
}
.input-selector:not(.stacked) .input-select-button {
  padding: 0;
}
.input-select-button .input-selector-device-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-select-button .input-selector-device-name .ic-mic {
  font-size: 14px;
  margin-right: 8px;
  color: var(--text-base);
}
.input-select-button .input-selector-device-name .input-selector-device-name-label {
  color: var(--text-base);
  white-space: nowrap;
  font-size: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.input-select-button .input-selector-device-name .input-selector-device-channels {
  color: var(--essential-subdued);
  text-wrap: nowrap;
  margin-left: 5px;
}
.input-select-button .ic-chevron-double {
  color: var(--essential-primary);
  margin-left: 7px;
  margin-right: 0;
  font-size: 13px;
  margin-top: 1px;
}
.input-select-button.readonly {
  cursor: default;
}
.input-select-button.readonly .ic-chevron-double {
  display: none;
}

.new-input-selector {
  width: 210px;
}
.new-input-selector__button {
  border: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-color: transparent;
  padding: 0;
}
.new-input-selector__button .ic-chevron-down {
  font-size: 10px;
  color: var(--text-base);
  margin-left: var(--space-nano);
}
.new-input-selector__button.readonly {
  cursor: default;
}
.new-input-selector__button.readonly .ic-chevron-down {
  display: none;
}
.new-input-selector__device-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  font-size: 11px;
}
.new-input-selector__device-name .ic-mic {
  font-size: var(--space-tiny-1);
  color: var(--text-base);
  margin-right: var(--space-nano);
  vertical-align: text-bottom;
}
.new-input-selector__device-name-label {
  color: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}
.new-input-selector__device-channels {
  color: var(--essential-subdued);
  margin-left: var(--space-nano);
  font-size: inherit;
  flex-shrink: 0;
}
.new-input-selector__input-source {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-tiny);
  gap: var(--space-tiny);
  transition: background 0.1s ease-out;
}
.new-input-selector__input-source:hover, .new-input-selector__input-source:focus-within {
  background-color: var(--background-tinted-highlight);
  border-color: transparent;
  border-radius: var(--space-tiny);
}
.new-input-selector__calibrate-monitoring-row {
  margin-top: 12px;
  margin-left: var(--space-tiny);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.new-input-selector__calibrate-monitoring-row .mic-calibration-button button {
  min-width: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.new-input-selector__calibrate-monitoring-row .monitoring-label {
  font-size: 11px;
  font-weight: 500;
}

.st-light-theme, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container, .synth84enginegui .container .control-container .control-area .button-wrapper button, .synth84enginegui .container .control-container .control-area .button-wrapper button:hover, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed {
  --signal-bar-quiet: #3F036D;
  --signal-bar-clipping: #B4074B;
}

.st-dark-theme, .sampler-crossfade-icon, .sampler-crossfade-handle-chamfer, .sampler-crossfade-handle, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols {
  --signal-bar-quiet: #9B7AE7;
  --signal-bar-clipping: #F72D7C;
}

@keyframes clipping-dot-fade {
  from {
    background-color: var(--signal-bar-clipping);
  }
  40% {
    background-color: var(--signal-bar-clipping);
  }
  to {
    background-color: var(--decorative-subdued);
  }
}
@keyframes clipping-bar-fade {
  from {
    background-image: linear-gradient(to right, var(--signal-bar-clipping), var(--signal-bar-clipping));
  }
  99% {
    background-image: linear-gradient(to right, var(--signal-bar-clipping), var(--signal-bar-clipping));
  }
  to {
    background-image: linear-gradient(to right, var(--signal-bar-quiet), var(--signal-bar-clipping));
  }
}
.signal-bar-holder {
  --signal-bar-width: 100px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  gap: 4px;
  width: var(--signal-bar-width);
}
.stacked .signal-bar-holder {
  --signal-bar-width: 100%;
  margin-right: 4px;
}
.signal-bar-holder .signal-bar {
  position: relative;
  background-color: var(--background-tinted-highlight);
  overflow: hidden;
  width: 100%;
  height: 4px;
  border-radius: 4px;
}
.signal-bar-holder .signal-bar .signal-bar-filled {
  height: 100%;
  width: 0;
  background-size: var(--signal-bar-width) 100%;
  background-image: linear-gradient(to right, var(--signal-bar-quiet), var(--signal-bar-clipping));
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  will-change: width, background-image;
  animation-name: clipping-bar-fade;
  animation-duration: 1s;
}
.signal-bar-holder .signal-bar .signal-bar-filled.clipping {
  animation-name: none;
  background-image: linear-gradient(to right, var(--signal-bar-clipping), var(--signal-bar-clipping));
}
.signal-bar-holder .clipping-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--background-tinted-highlight);
  will-change: background-color;
  animation-name: clipping-dot-fade;
  animation-duration: 5s;
}
.signal-bar-holder .clipping-dot.clipping {
  animation-name: none;
  background-color: var(--signal-bar-clipping);
}

.device-selector-popup .inner {
  padding: 0;
}
.device-selector-popup .device-selector .device-list {
  overflow-y: auto;
  padding: 0 0 10px 0;
}
.device-selector-popup .device-selector .device-list .device-item {
  display: grid;
  grid-template-areas: "radio label";
  grid-template-columns: 56px minmax(auto, 330px);
  align-items: center;
  min-height: 40px;
  transition: background 0.1s ease-out;
}
.device-selector-popup .device-selector .device-list .device-item:hover, .device-selector-popup .device-selector .device-list .device-item:focus-within {
  background-color: var(--background-tinted-highlight);
}
.device-selector-popup .device-selector .device-list .device-item .st-radio {
  grid-area: radio;
  justify-self: center;
}
.device-selector-popup .device-selector .device-list.advanced .device-item {
  padding-top: 0px;
}
.device-selector-popup .device-selector .advanced-toggle {
  height: 60px;
  border-top-style: solid;
  border-top-color: var(--decorative-subdued);
  border-top-width: 1px;
  display: flex;
  align-items: center;
}
.device-selector-popup .device-selector .advanced-toggle .st-toggle {
  margin-left: 20px;
  margin-right: 10px;
}
.device-selector-popup .device-selector .advanced-toggle .para-m {
  color: var(--text-subdued);
}
.device-selector-popup .device-label {
  grid-area: label;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.device-selector-popup .device-label .device-label-filler {
  opacity: 0;
  height: 0;
  transition: opacity 0.1s, height 0.1s;
}
.device-selector-popup .device-label .device-label-label {
  flex: 1;
  font-weight: normal;
  margin: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
  overflow: hidden;
}
.device-selector-popup .device-label .device-channel-selector {
  background-color: transparent;
  border: 0;
  pointer-events: none;
  opacity: 0;
  height: 0px;
  color: #9b9b9b;
  transition: opacity 0.1s, height 0.1s;
}
.device-selector-popup .device-label .device-channel-selector .ic-chevron-down {
  font-size: 8px;
  margin-left: 5px;
  vertical-align: middle;
}
.device-selector-popup .device-label.advanced {
  padding-bottom: 15px;
}
.device-selector-popup .device-label.advanced .device-channel-selector {
  pointer-events: auto;
  opacity: 1;
  height: 15px;
}

.device-channel-selector-popup .inner .item {
  min-width: 0px;
}
.device-channel-selector-popup .inner .item .icon {
  display: none;
}

.mic-calibration-button .ic-mic {
  font-size: 12px !important;
  margin-right: 6px !important;
}
.mic-calibration-button .soundcheck-icon {
  background-image: url("/studio/assets/images/studio/ic-volume-test-purple@3x.png");
  background-size: 100% 100%;
  filter: saturate(0%) contrast(100%);
  width: 24px;
  height: 19px;
  display: inline-block;
}
.st-dark-theme .mic-calibration-button .soundcheck-icon, .sampler-crossfade-icon .mic-calibration-button .soundcheck-icon, .sampler-crossfade-handle-chamfer .mic-calibration-button .soundcheck-icon, .sampler-crossfade-handle .mic-calibration-button .soundcheck-icon, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .mic-calibration-button .soundcheck-icon {
  filter: saturate(0%) contrast(100%) invert(1);
}

@keyframes volumecheck-needed {
  0% {
    transform: scale(1);
    filter: saturate(0%) contrast(0%) brightness(122%);
  }
  15% {
    transform: scale(0.9);
  }
  20% {
    transform: scale(1.2);
    filter: saturate(100%) contrast(100%) brightness(100%);
  }
  25% {
    transform: scale(0.9);
  }
  30% {
    transform: scale(1);
  }
  100% {
    filter: saturate(0%) contrast(0%) brightness(122%);
  }
}
.st-toggle[aria-checked=true] {
  --st-toggle-pill-background-color: var(--essential-positive);
  --st-toggle-nub-translate-x: 10px;
}

.st-toggle[aria-checked=false] {
  --st-toggle-pill-background-color: var(--essential-subdued);
  --st-toggle-nub-translate-x: 0px;
}

.st-toggle[disabled=true] {
  --st-toggle-opacity: var(--disabled-opacity);
}

.st-toggle[disabled=false] {
  --st-toggle-opacity: 1;
}

.st-toggle {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--st-toggle-opacity);
}

.st-toggle-pill {
  display: block;
  position: relative;
  width: 26px;
  height: 16px;
  border-radius: 26px;
  transition: background-color 0.1s;
  background-color: var(--st-toggle-pill-background-color);
}
.st-toggle.small .st-toggle-pill {
  width: 23px;
  height: 13px;
  border-radius: 20px;
}

.st-toggle-nub {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  top: 2px;
  left: 2px;
  transition: transform 0.1s;
  background-color: var(--background-base);
  transform: translateX(var(--st-toggle-nub-translate-x));
}
.st-toggle.small .st-toggle-nub {
  width: 9px;
  height: 9px;
  border-radius: 9px;
}

.st-radio {
  border: 0;
  flex: 1;
  background-color: transparent;
}

.st-radio[aria-checked=true] {
  --st-radio-circle-border-color: var(--essential-primary);
  --st-radio-dot-opacity: 1;
  --st-radio-dot-transform: scale(1) translate(-50%, -50%);
}

.st-radio[aria-checked=false] {
  --st-radio-circle-border-color: var(--text-subdued);
  --st-radio-dot-opacity: 0;
  --st-radio-dot-transform: scale(0.01) translate(-150%, -150%);
}

.st-radio-circle {
  --st-radio-circle-width: 16px;
  width: var(--st-radio-circle-width);
  min-width: var(--st-radio-circle-width);
  max-width: var(--st-radio-circle-width);
  height: var(--st-radio-circle-width);
  min-height: var(--st-radio-circle-width);
  max-height: var(--st-radio-circle-width);
  border-radius: var(--st-radio-circle-width);
  border-color: var(--st-radio-circle-border-color);
  border-width: 2px;
  border-style: solid;
  box-sizing: border-box;
  position: relative;
}

.st-radio-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-origin: center;
  transition: opacity 16ms linear 0ms, transform 128ms linear 16ms;
  width: calc(var(--st-radio-circle-width) / 2);
  height: calc(var(--st-radio-circle-width) / 2);
  background-color: var(--essential-primary);
  opacity: var(--st-radio-dot-opacity);
  transform: var(--st-radio-dot-transform);
}

.st-anchored-tool-tip {
  position: absolute;
  cursor: pointer;
  z-index: 1;
}
.st-anchored-tool-tip .inner {
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  text-align: center;
  padding: 20px;
  font-family: var(--font-family);
  border-radius: 4px;
  border: none;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
.st-anchored-tool-tip .inner .dismiss {
  color: var(--text-base);
  opacity: 0.5;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.st-anchored-tool-tip .arrow-top {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  left: 50%;
  margin-left: -11px;
  border-bottom-color: var(--background-elevated-base);
  top: -22px;
}
.st-anchored-tool-tip .arrow-right {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  top: 50%;
  margin-top: -11px;
  border-left-color: var(--background-elevated-base);
  right: -22px;
}
.st-anchored-tool-tip .arrow-bottom {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  left: 50%;
  margin-left: -11px;
  border-top-color: var(--background-elevated-base);
  top: 100%;
}
.st-anchored-tool-tip .arrow-left {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 11px solid;
  border-color: transparent;
  top: 50%;
  margin-top: -11px;
  border-right-color: var(--background-elevated-base);
  left: -22px;
}
.st-anchored-tool-tip .msg {
  font-size: 13px;
  line-height: 1.3;
}
.st-anchored-tool-tip .st-anchored-tool-tip-bdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.st-shadowed-scroll {
  position: relative;
}
.st-shadowed-scroll .st-shadowed-scroll-shadow {
  position: absolute;
  width: 95%;
  height: 60px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.st-shadowed-scroll .st-shadowed-scroll-shadow.upper {
  top: 0;
  background-image: linear-gradient(var(--background-base), rgba(255, 255, 255, 0));
}
.st-shadowed-scroll .st-shadowed-scroll-shadow.lower {
  bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0), var(--background-base));
}
.st-shadowed-scroll .st-shadowed-scroll-shadow.visible {
  opacity: 1;
}

.video-chat {
  display: flex;
  flex-direction: column;
}
.video-chat .video-chat-upper {
  position: relative;
  height: 273px;
  width: 390px;
  overflow: hidden;
  margin: 0 auto;
}
.video-chat .video-chat-upper video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.video-chat .video-chat-upper .local-video {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 64px;
  width: 64px;
  overflow: hidden;
}
.video-chat .video-chat-upper .gradient-overlay {
  position: absolute;
  bottom: 0;
  height: 58%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.video-chat .video-chat-upper .remote-video {
  background-color: #000000;
  width: 100%;
  height: 100%;
}
.video-chat .video-chat-upper .remote-recording-indicator {
  position: absolute;
  top: 10px;
  left: 0px;
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgba(235, 45, 85, 0.8);
  border-top-right-radius: 11px;
  border-bottom-right-radius: 11px;
}
.video-chat .video-chat-upper .remote-recording-indicator .remote-recording-indicator-label {
  margin-left: 10px;
  margin-right: 5px;
  color: #ffffff;
  line-height: 18px;
}
.video-chat .video-chat-upper .remote-recording-indicator .remote-recording-indicator-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  margin-right: 3px;
  padding: 2px;
  will-change: transform;
  animation-name: pulsating-remote-recording-indicator-dot;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.video-chat .video-chat-upper .remote-recording-indicator .remote-recording-indicator-dot .remote-recording-indicator-dot-middle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  padding: 2px;
}
.video-chat .video-chat-upper .remote-recording-indicator .remote-recording-indicator-dot .remote-recording-indicator-dot-middle .remote-recording-indicator-dot-inner {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}
.video-chat .video-chat-lower {
  width: 100%;
  height: 44px;
  background-color: #3e1165;
}
.video-chat .video-chat-lower .video-chat-audio-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.video-chat .video-chat-lower .video-chat-audio-controls .record-chat-audio-button button {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
}
.video-chat .video-chat-lower .video-chat-audio-controls .record-chat-audio-button button .ic-record {
  color: #eb2d55;
  margin-right: 5px;
  font-size: 10px;
}
.video-chat .setup-voice-tracks-cta {
  width: 100%;
  height: 80px;
  background-color: #4f0590;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 14px;
}
.video-chat .setup-voice-tracks-cta.dismissed {
  display: none;
}
.video-chat .setup-voice-tracks-cta .cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.video-chat .setup-voice-tracks-cta .cta .cta-message {
  color: #ffffff;
}
.video-chat .setup-voice-tracks-cta .cta .btn {
  display: flex;
  align-items: center;
}
.video-chat .setup-voice-tracks-cta .cta .btn .ic-mic {
  margin-right: 4px;
  margin-left: -4px;
}
.video-chat .setup-voice-tracks-cta .closerx-newstyle {
  font-size: 18px;
  top: 14px;
  right: 10px;
  color: white;
  opacity: 1;
}

@keyframes pulsating-remote-recording-indicator-dot {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}
.guest-call-accept-dialog .body {
  margin-top: 40px;
  margin-bottom: 40px;
}
.guest-call-accept-dialog .footer .btn {
  margin-left: 10px;
  margin-right: 10px;
}

.video-chat-settings {
  width: 340px;
  text-align: left;
}
.video-chat-settings .settings-section {
  padding: 20px;
  border-bottom: 1px solid #d2d2d2;
}
.video-chat-settings .settings-section .soundtrap-icon {
  color: #9b9b9b;
}
.video-chat-settings .settings-section:first-child {
  padding-top: 10px;
}
.video-chat-settings .settings-section:last-child {
  border-bottom: none;
  padding-bottom: 10px;
}
.video-chat-settings .share-project-audio {
  display: flex;
  align-items: center;
}
.video-chat-settings .share-project-audio > * {
  margin-right: 10px;
}
.video-chat-settings .share-project-audio .st-toggle {
  margin-left: auto;
}
.video-chat-settings .share-project-audio .ic-info {
  font-size: 12px;
}
.video-chat-settings .share-project-audio .ic-info:hover {
  color: #5a00aa;
}
.video-chat-settings .device-list-section {
  display: flex;
  flex-direction: column;
}
.video-chat-settings .device-list-section .devices-header {
  font-family: var(--font-family);
  font-weight: 500;
  padding-bottom: 10px;
}
.video-chat-settings .device-list-section .device-list {
  list-style: none;
  padding-left: 0;
}
.video-chat-settings .device-list-section .device-list .device-item {
  padding: 10px 0;
  cursor: pointer;
  display: grid;
  grid-template-areas: "radio label";
  grid-template-columns: 56px minmax(auto, 100%);
  align-items: center;
  min-height: 40px;
}
.video-chat-settings .device-list-section .device-list .device-item .st-radio {
  grid-area: radio;
  justify-self: center;
}
.video-chat-settings .device-list-section .device-list .device-item .device-label {
  display: flex;
  position: relative;
  overflow: hidden;
}
.video-chat-settings .device-list-section .device-list .device-item .device-label-label {
  flex: 1;
  font-weight: normal;
  margin: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.video-chat-settings .device-list-section .device-list .device-item .device-channel-selector {
  display: none;
}
.video-chat-settings .device-list-section .device-list .device-item.selected .device-label {
  color: var(--text-primary);
  font-family: var(--font-family);
  font-weight: 500;
}
.video-chat-settings .setup-voice-tracks {
  display: flex;
  align-items: center;
}
.video-chat-settings .setup-voice-tracks .desc {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.video-chat-settings .setup-voice-tracks .desc .small {
  font-size: 13px;
  color: #9b9b9b;
  text-align: left;
}

.call-button button {
  min-width: 0px;
}

.st-knob {
  --knob-size: ${$mediumSize};
  position: relative;
  display: flex;
  width: initial;
  cursor: ns-resize;
}
.st-knob.disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
.st-knob .st-knobwheel {
  position: relative;
  width: calc(var(--knob-size) * 1px);
  height: calc(var(--knob-size) * 1px);
}
.st-knob .circular-chart {
  position: relative;
  width: 100%;
  left: 0;
  stroke: var(--background-base);
  transform: rotate(-135deg);
}
.st-knob .st-knob-pos {
  stroke-width: 1;
  transform-box: view-box;
  transform-origin: 50% 50%;
  stroke: var(--background-base);
}
.st-knob .circle {
  fill: none;
  stroke-width: 1;
  animation: progress 1s ease-out forwards;
  transform-origin: center;
  stroke: var(--background-base);
}
.st-knob.mini {
  --knob-size: 18;
}
.st-knob.small {
  --knob-size: 24;
}
.st-knob.medium {
  --knob-size: 54;
}
.st-knob.big {
  --knob-size: 80;
}

.st-knob-volume {
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
}
.st-knob-volume .lbl-wrap {
  font-size: 8px;
  position: absolute;
  bottom: -2px;
  right: -12px;
  font-weight: 300;
}
.st-knob-volume .circle {
  stroke: var(--essential-subdued);
  fill: var(--background-base);
}
.st-knob-volume .st-knob-pos {
  stroke-linecap: round;
}
.st-knob-volume .circle {
  stroke-width: calc(36 / var(--knob-size));
}
.st-knob-volume .st-knob-pos {
  stroke-width: calc(72 / var(--knob-size));
}

.st-knob-param {
  flex-direction: column;
  align-items: center;
}
.st-knob-param .lbl-wrap {
  position: relative;
  height: 25px;
  line-height: 25px;
  font-size: 11px;
}
.st-knob-param .lbl {
  display: block;
  font-weight: 400;
}
.st-knob-param .circle-bg {
  fill: var(--background-elevated-base);
  stroke: var(--decorative-subdued);
  transition-property: fill;
  transition: fill 0.1s linear;
}
.st-knob-param .circle, .st-knob-param .circle-bg {
  stroke-width: 3px;
}
.st-knob-param .st-knob-pos {
  stroke-width: 2px;
}
.st-knob-param.selected .circle-bg {
  fill: var(--background-press) !important;
}
.st-knob-param.small .circle, .st-knob-param.small .circle-bg, .st-knob-param.small .st-knob-pos, .st-knob-param.mini .circle, .st-knob-param.mini .circle-bg, .st-knob-param.mini .st-knob-pos {
  stroke-width: 4px;
}

.st-knob--new-design .lbl-wrap {
  height: 15px;
  line-height: 15px;
  margin-top: calc(-1px * var(--knob-size) / 8);
  text-align: center;
}
.st-knob--new-design .lbl {
  transition: opacity 0.1s linear;
  transition-delay: 0.2s;
}
.st-knob--new-design .lbl-value {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  transition: opacity 0.1s linear;
  transition-delay: 0;
}
.st-knob--new-design:hover .lbl, .st-knob--new-design.selected .lbl {
  opacity: 0;
  transition-delay: 0;
}
.st-knob--new-design:hover .lbl-value, .st-knob--new-design.selected .lbl-value {
  opacity: 1;
  transition-delay: 0.15s;
}
.st-knob--new-design .st-knob-pos {
  stroke-dasharray: 4, 10;
  stroke-dashoffset: -8;
  stroke-width: 1.5px;
}
.st-knob--new-design .circle-inner {
  fill: none;
}
.st-knob--new-design .circle, .st-knob--new-design .circle-bg, .st-knob--new-design .st-knob-pos {
  stroke-linecap: round;
  fill: none;
}
.st-knob--new-design .circle-bg, .st-knob--new-design .circle-inner {
  stroke: var(--background-tinted-base);
}
.st-knob--new-design.selected .circle-inner {
  fill: var(--background-highlight);
}
.st-knob--new-design.selected .circle-bg {
  fill: none !important;
}
.st-knob--new-design.small .st-knob-pos, .st-knob--new-design.mini .st-knob-pos {
  stroke-dashoffset: -9;
}
.st-knob--new-design.small .circle-inner, .st-knob--new-design.mini .circle-inner {
  transform: scale(0.9);
  transform-origin: center;
}
.st-knob--new-design .st-knobwheel {
  width: calc(var(--knob-size) * 1px);
  height: calc(var(--knob-size) * 1px);
}
.st-knob--new-design .circle, .st-knob--new-design .circle-bg {
  stroke-width: calc(108 / var(--knob-size)) !important;
}
.st-knob--new-design .circle-inner {
  stroke-width: calc(36 / var(--knob-size)) !important;
}
.st-knob--new-design .st-knob-pos {
  stroke-width: calc(72 / var(--knob-size)) !important;
}
.st-knob--new-design.mini {
  --knob-size: 24;
}
.st-knob--new-design.small {
  --knob-size: 34;
}
.st-knob--new-design.medium {
  --knob-size: 46;
}
.st-knob--new-design.big {
  --knob-size: 74;
}

.st-clickable {
  cursor: pointer;
  display: inline-flex;
  align-items: inherit;
  justify-content: inherit;
  background: transparent;
  border: 0;
}

.fullscreen-video-chat {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.fullscreen-video-chat video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fullscreen-video-chat .remote-video  {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000000;
}
.fullscreen-video-chat .local-video {
  max-width: 320px;
  position: absolute;
  right: 20px;
}
.fullscreen-video-chat .fslogo {
  position: fixed;
  top: 20px;
  left: 20px;
  background-image: url("/studio/assets/images/studio/minilogo4_b17@2x.png");
  background-size: contain;
  width: 28px;
  height: 29px;
  z-index: 1;
}
.fullscreen-video-chat .video-chat-controls {
  justify-content: center;
  margin-bottom: 40px;
  font-size: 23px;
}
.fullscreen-video-chat .video-chat-controls .video-chat-controls-element {
  margin: 0 20px;
}
.fullscreen-video-chat .video-chat-controls .video-control-separator {
  height: 27px;
}

@media (768px) {
  .fullscreen-video-chat .local-video {
    text-align: right;
    right: 10px;
    top: 10px;
    width: 40%;
  }
  .fullscreen-video-chat .video-chat-controls {
    margin-bottom: 10px;
    justify-content: space-between;
  }
  .fullscreen-video-chat .video-chat-controls .video-chat-controls-element {
    margin: 0;
  }
}
.video-chat-controls {
  position: absolute;
  bottom: 0;
  height: 37px;
  width: 100%;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  margin-bottom: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.video-chat-controls .video-chat-controls-element {
  color: white;
  font-size: 18px;
}
.video-chat-controls .video-control-separator {
  height: 20px;
  width: 1px;
  background-color: white;
  opacity: 0.4;
}
.video-chat-controls .st-clickable, .video-chat-controls .st-knob {
  padding: 7px;
}
.video-chat-controls .st-clickable {
  border-radius: 100%;
  background-color: rgba(230, 230, 230, 0);
}
.video-chat-controls .st-clickable:hover {
  background-color: rgba(230, 230, 230, 0.16);
}
.video-chat-controls .st-clickable.active {
  background-color: rgba(210, 210, 210, 0.56);
}

.hover .video-chat-controls {
  opacity: 1;
}

.st-profile-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
}
.st-profile-icon .st-profile-icon-image {
  max-width: 100%;
  max-height: 100%;
}
.st-profile-icon.large {
  width: 76px;
  height: 76px;
}
.st-profile-icon.enormous {
  width: 120px;
  height: 120px;
}

.st-copy-text {
  display: flex;
  align-items: center;
}

.st-copy-text__copy-area {
  flex: 1;
  margin-right: 8px;
  background-color: var(--background-elevated-base);
  border-radius: 2px;
  border: 1px solid var(--essential-subdued);
  box-shadow: none;
  cursor: text;
  line-height: 1.5;
  overflow: hidden;
  padding: 9px 10px 8px;
  white-space: nowrap;
}

.st-copy-text__button {
  padding: 0;
  border-radius: 100px;
  min-width: 95px;
}
.st-copy-text__button span {
  font-size: 15px;
  text-transform: none;
  font-weight: 500;
}

.st-button:not(.button_circular) .soundtrap-icon {
  line-height: inherit;
  margin-right: 7px;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.st-button.button_circular .soundtrap-icon {
  line-height: inherit;
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.st-preview-button .ic-refresh {
  animation: rotate-spinner 2s infinite;
  transform-origin: center;
  animation-timing-function: linear;
}

.st-tabs {
  position: relative;
  display: flex;
  border: solid 1px var(--decorative-subdued);
  border-radius: 32px;
  padding: 1px;
  gap: 0;
}
.st-tabs--tinted {
  background-color: var(--background-tinted-base);
}
.st-tabs--subtle {
  background-color: var(--background-base);
}
.st-tabs__tab {
  position: relative;
  z-index: 2;
  border-radius: 30px;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.st-tabs__tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.st-tabs__tab-wrap {
  padding: 6px var(--space-small);
  display: flex;
  gap: var(--space-tiny);
  align-items: center;
  margin: 0;
}
.st-tabs__tab-caption {
  margin-bottom: 1px;
}
.st-tabs__selection-marker {
  display: none;
  position: absolute;
  z-index: 1;
  top: 1px;
  bottom: 1px;
  pointer-events: none;
  transition-property: transform, width;
  transition-duration: 250ms;
  color: var(--text-base);
  background-color: var(--background-elevated-base);
  border: solid 1px var(--essential-subdued);
  border-radius: 30px;
}
.st-tabs__radio-input {
  appearance: none;
  background: transparent;
  border-radius: 999px;
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.tab-button {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-base);
  position: relative;
}
.tab-button.selected, .tab-button.selected.with-new-ribbon .ribbon-wrap {
  color: var(--essential-primary);
}
.tab-button.selected > span, .tab-button.selected.with-new-ribbon .ribbon-wrap > span {
  position: relative;
}
.tab-button.selected > span:after, .tab-button.selected.with-new-ribbon .ribbon-wrap > span:after {
  content: "";
  width: 100%;
  height: 2px;
  border: 1px solid var(--essential-primary);
  border-radius: 10px;
  background-color: var(--essential-primary);
  position: absolute;
  bottom: -5px;
  left: 0;
}

.with-808-styling .tab-button.selected {
  color: var(--text-spotlight);
}
.with-808-styling .tab-button.selected > span:after {
  border-color: var(--text-spotlight);
  background-color: var(--text-spotlight);
}

.with-synth-84-styling .tab-button.selected {
  color: var(--background-elevated-highlight);
}
.with-synth-84-styling .tab-button.selected > *:after {
  border-color: var(--background-elevated-highlight);
  background-color: var(--background-elevated-highlight);
}

.with-new-ribbon .new-ribbon {
  position: static !important;
  transform: translateY(-1px);
}
.with-new-ribbon .new-ribbon:after {
  display: none;
}
.with-new-ribbon .ribbon-wrap {
  display: inline-flex;
  gap: var(--space-nano);
  align-items: baseline;
}
.with-new-ribbon .tab-label:after {
  bottom: -3px !important;
}

.st-label {
  font-weight: 500;
  color: var(--text-base);
  letter-spacing: 0.2px;
}

.st-label-value {
  display: block;
  margin: 0;
}
.st-label-value__label-group {
  display: flex;
  justify-content: space-between;
}
.st-label-value__value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}
.st-label-value:hover .st-label-value__value, .st-label-value:focus-within .st-label-value__value {
  opacity: 1;
}

.flash {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
}
.flash.fade:not(.dontfade) {
  transition: opacity 1s;
  opacity: 0;
}
.flash .flash-inner {
  background-color: rgba(62, 17, 101, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  min-width: 149px;
  min-height: 98px;
  padding: 20px;
}
.flash .flash-inner .soundtrap-icon {
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 10px;
}
.flash .flash-inner .title-m {
  color: #ffffff;
}

.st-simple-progress-bar {
  justify-content: center;
  align-items: center;
}
.st-simple-progress-bar.st-simple-progress-bar-horizontal {
  display: flex;
  flex-direction: row;
}
.st-simple-progress-bar.st-simple-progress-bar-vertical {
  display: flex;
  flex-direction: column;
}
.st-simple-progress-bar .st-simple-progress-bar-bar {
  position: relative;
  border-radius: 2px;
  height: 4px;
  width: 70px;
  background-color: #f2f2f2;
  margin: 0 20px;
}
.st-simple-progress-bar .st-simple-progress-bar-bar .fill {
  height: 100%;
  background-color: #5a00aa;
  width: 0;
  border-radius: 2px;
}
.st-simple-progress-bar .st-simple-progress-bar-label {
  text-align: left;
  color: #9b9b9b;
}

.st-track-marker {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--background-elevated-highlight);
}

.placeholder-doc {
  text-align: left;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.placeholder-doc .rdoc {
  margin-left: 100px;
  position: relative;
}
.placeholder-doc .rdoc:after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--background-elevated-base));
}
.placeholder-doc .rdoc .highlighted {
  border-radius: 2px;
  background-color: #5a00aa;
  color: #ffffff;
}
.placeholder-doc .placeholder-doc-description {
  width: 596px;
  text-align: center;
  margin-top: 32px;
  z-index: 1;
  white-space: pre-wrap;
  font-size: 18px;
}
.placeholder-doc .placeholder-doc-disclaimer {
  font-style: italic;
}

.st-progress-dots {
  pointer-events: none;
}
.st-progress-dots.st-progress-dots-small {
  font-size: 10px;
}
.st-progress-dots.st-progress-dots-normal {
  font-size: 15px;
}
.st-progress-dots.st-progress-dots-large {
  font-size: 24px;
}
.st-progress-dots .st-progress-dots-dot {
  font-weight: 700;
  animation-name: st-progress-dots-animation;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.st-progress-dots .st-progress-dots-dot.st-progress-dots-dot-1 {
  animation-delay: 0s;
}
.st-progress-dots .st-progress-dots-dot.st-progress-dots-dot-2 {
  animation-delay: 0.2s;
}
.st-progress-dots .st-progress-dots-dot.st-progress-dots-dot-3 {
  animation-delay: 0.4s;
}

@keyframes st-progress-dots-animation {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
.st-overflowing-text {
  white-space: nowrap;
}

.st-carousel {
  display: flex;
  flex-direction: row;
}
.st-carousel .st-carousel-arrow {
  display: flex;
  align-items: center;
  width: 45px;
  font-size: 18px;
  color: #9b9b9b;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s;
}
.st-carousel .st-carousel-arrow.st-carousel-left-arrow {
  justify-content: flex-start;
}
.st-carousel .st-carousel-arrow.st-carousel-right-arrow {
  justify-content: flex-end;
}
.st-carousel .st-carousel-arrow:hover {
  color: #646464;
}
.st-carousel .st-carousel-arrow.st-carousel-arrow-invisible {
  opacity: 0;
  cursor: default;
}
.st-carousel .st-carousel-scrollable {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex: 1;
  overflow-x: scroll;
}
.st-carousel .st-carousel-scrollable::-webkit-scrollbar {
  height: 0px;
}
.st-carousel .st-carousel-scrollable .st-carousel-item {
  margin-left: 10px;
  margin-right: 10px;
}
.st-carousel .st-carousel-scrollable .st-carousel-item:first-child {
  margin-left: 0px;
}
.st-carousel .st-carousel-scrollable .st-carousel-item:last-child {
  margin-right: 0px;
}

.tempo-tapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tempo-tapper .tempo-tapper-button {
  position: relative;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 50ms;
  cursor: pointer;
}
.tempo-tapper .tempo-tapper-button:active, .tempo-tapper .tempo-tapper-button.active {
  opacity: 0.9;
}
.tempo-tapper .tempo-tapper-button:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-base);
  border: 5px solid var(--decorative-subdued);
  opacity: 0.75;
}
.tempo-tapper .tempo-tapper-icon-wrapper {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background-color: var(--background-press);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text-base);
  font-size: 17px;
  transform: rotate(330deg);
}

.undo-toast .undo-label {
  font-weight: normal;
}
.undo-toast .spacing-horizontal-10 {
  margin-left: 10px;
}

.preset-search {
  left: 404px;
  position: absolute;
  top: 28px;
  width: 200px;
  z-index: 2;
}
.preset-search .preset-search-input-container .ic-search {
  color: var(--essential-subdued);
  left: 14px;
  position: absolute;
  top: 10px;
}
.preset-search .preset-search-input {
  color: var(--text-subdued);
  padding-left: 34px;
  border: 1px solid var(--decorative-subdued);
  background-color: var(--background-base);
}
.preset-search .close-preset-search-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preset-search .close-preset-search-button .reset-search {
  color: var(--text-base);
  cursor: pointer;
  position: relative;
}
.preset-search .start-searching {
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}
.preset-search .start-searching .ic-search {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--background-elevated-highlight);
  background-color: var(--essential-subdued);
  margin: 10px 0 20px;
}
.preset-search .start-searching .search-suggestion {
  font-size: 12px;
}
.preset-search .search-result-container {
  background-color: var(--background-elevated-highlight);
  border: 1px solid var(--background-tinted-base);
  border-radius: 5px;
  box-shadow: 0 0 3px var(--default-box-shadow-color);
  height: auto;
  left: -30px;
  position: absolute;
  top: 40px;
  width: 260px;
}
.preset-search .search-result-container p {
  color: var(--essential-subdued);
}
.preset-search .search-result-container .no-results-title {
  color: var(--text-subdued);
}
.preset-search .no-results {
  border-radius: 5px;
  padding: 40px;
}
.preset-search .search-result-preset-list {
  padding: 0;
}
.preset-search .search-result-preset-pane {
  border-bottom-right-radius: 4px;
  max-height: 550px;
  overflow-y: scroll;
  padding: 0;
  list-style: none;
}
.preset-search .presetheadercontent {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: solid 1px var(--background-elevated-highlight);
  color: var(--text-base);
  font-size: 13px;
  min-height: 44px;
  padding-left: 20px;
  margin: 0;
}
.preset-search .presetheadercontent .presetheadertext {
  font-family: var(--font-family);
  font-weight: 500;
}
.preset-search .presetheadercontent .presetcount {
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--text-subdued);
  margin-left: 10px;
}

.ff-handheld .preset-search {
  height: 100%;
  left: 0;
  top: 0;
  transform: translateX(100%);
  transition: 400ms all cubic-bezier(0.1, 0.7, 0.1, 1);
  width: 100%;
}
.ff-handheld .preset-search .no-results,
.ff-handheld .preset-search .start-searching {
  position: absolute;
  top: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 40px;
}
.ff-handheld .preset-search .no-results {
  padding-top: 40px;
}
.ff-handheld .preset-search .start-searching-title,
.ff-handheld .preset-search .no-results-title {
  font-size: 17px;
}
.ff-handheld .preset-search .search-suggestion,
.ff-handheld .preset-search .no-results-suggestion {
  font-size: 14px;
}
.ff-handheld .preset-search .start-searching .ic-search {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  font-size: 54px;
  justify-content: center;
  margin: 20px;
  background-color: var(--essential-subdued);
  color: var(--background-elevated-highlight);
}
.ff-handheld .preset-search .start-searching .start-searching-title {
  font-size: 17px;
}
.ff-handheld .preset-search .preset-search-input-container {
  background: var(--background-base);
  border-bottom: 1px solid var(--background-tinted-base);
  box-sizing: border-box;
  height: 58px;
  padding: 12px 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.ff-handheld .preset-search .preset-search-input-container .ic-search {
  top: 19px;
  left: 50px;
  font-size: 18px;
  color: var(--essential-base);
}
.ff-handheld .preset-search .preset-search-input {
  border-width: 0;
  padding: 0 0 0 40px;
  width: 100%;
}
.ff-handheld .preset-search .search-result-container {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0;
  height: 100%;
  left: 0;
  top: 58px;
  width: 100%;
}
.ff-handheld .preset-search .search-result-preset-pane {
  background-color: var(--background-base);
  max-height: none;
}
.ff-handheld .preset-search.searching {
  transform: translateX(0);
}

.ff-handheld.layout-landscape .preset-search .preset-search-input-container {
  height: 64px;
  padding: 15px 40px;
}
.ff-handheld.layout-landscape .preset-search .preset-search-input-container .ic-search {
  top: 23px;
}
.ff-handheld.layout-landscape .preset-search .reset-search {
  top: 23px;
}
.ff-handheld.layout-landscape .preset-search .search-result-container {
  top: 64px;
}

.st-tag {
  background-color: var(--background-tinted-base);
  border-radius: 4px;
  color: var(--text-base);
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  height: 26px;
  position: relative;
  white-space: nowrap;
}
.st-tag.has-image .tag-content {
  padding-left: 42px;
}
.st-tag .tag-image {
  background-size: cover;
  border-radius: 100%;
  height: 20px;
  left: 8px;
  position: absolute;
  top: 3px;
  width: 20px;
}
.st-tag .text {
  height: 15px;
  line-height: 1.36;
}
.st-tag .action-icon {
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  right: 8px;
  top: 8px;
}
.st-tag .tag-content {
  padding: 6px 33px 1px 10px;
  font-size: 11px;
}

.notification-area {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 2;
}
.notification-area .notification {
  padding: 20px;
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid var(--decorative-subdued);
}
.notification-area .notification_content {
  display: flex;
}
.notification-area .notification_content .notification_icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
.notification-area .notification_content .notification_icon img {
  width: 100%;
}
.notification-area .notification_content .notification_info {
  flex: 1;
}
.notification-area .notification_actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
.notification-area .notification_actions > * {
  margin-left: 10px;
}
.notification-area .notification_inner_wrapper {
  width: 340px;
}

.rhythm-templates-dialog .st-dialog-footer {
  padding-left: var(--space-large-2);
  justify-content: space-between;
}
.rhythm-templates-dialog .st-dialog-footer > label {
  font-size: 15px;
}
.rhythm-templates-dialog .st-dialog-footer .st-checkbox {
  display: inline-flex;
}
.rhythm-templates-dialog .st-dialog-footer .st-checkbox-label {
  font-weight: 400;
}
.rhythm-templates-dialog .heading-wrapper .st-beta-tag {
  margin-left: var(--space-tiny);
}
.rhythm-templates-dialog .rhythm-templates-dialog-body {
  height: 340px;
  overflow: scroll;
}
.rhythm-templates-dialog .rhythm-templates-title {
  display: inline-block;
  margin: 0;
}
.rhythm-templates-dialog .rhythm-templates-list {
  padding-left: 0;
}
.rhythm-templates-dialog .destination-choice {
  padding: var(--space-small-1) var(--space-large-2);
}
.rhythm-templates-dialog .choice-label {
  display: inline-flex;
  align-items: center;
}
.rhythm-templates-dialog .st-radio {
  display: inline-block;
}
.rhythm-templates-dialog .radio-label {
  padding-left: var(--space-tiny-1);
  vertical-align: top;
  font-weight: 400;
}
.rhythm-templates-dialog .radio-label.selected {
  font-weight: 500;
}
.rhythm-templates-dialog .message {
  padding-top: var(--space-huge-2);
  padding-left: var(--space-huge);
  padding-bottom: var(--space-huge-2);
}
.rhythm-templates-dialog .general-error {
  color: #eb2d55;
}
.rhythm-templates-dialog .destinations {
  display: flex;
  justify-content: space-between;
}
.rhythm-templates-dialog .rhythm-templates-item {
  display: flex;
}
.rhythm-templates-dialog .rhythm-templates-item .selected-icon {
  display: inline-flex;
  align-items: center;
  color: var(--essential-positive);
  margin: 0 var(--space-small-1) 0 auto;
}
.rhythm-templates-dialog .rhythm-templates-item.selected {
  background: var(--background-elevated-highlight);
  box-shadow: inset 1px 1px 5px var(--default-box-shadow-color);
}
.rhythm-templates-dialog .rhythm-templates-item.playing .play-icon,
.rhythm-templates-dialog .rhythm-templates-item.playing .title {
  color: var(--essential-primary);
}
.rhythm-templates-dialog .rhythm-templates-item .play-icon {
  vertical-align: text-top;
  padding-right: var(--space-medium);
}
.rhythm-templates-dialog .rhythm-templates-item .title {
  padding-right: var(--space-medium);
}
.rhythm-templates-dialog .rhythm-templates-item .loading-text {
  color: var(--text-subdued);
}
.rhythm-templates-dialog .rhythm-templates-item .error {
  color: var(--text-negative);
}
.rhythm-templates-dialog .rhythm-templates-item.rhythm-templates-category-item {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 17px;
  border-bottom: 1px solid var(--decorative-subdued);
  padding: var(--space-small-1) var(--space-large-2);
}
.rhythm-templates-dialog .rhythm-templates-item-button {
  border: 0;
  background: var(--background-elevated-base);
  border-bottom: 1px solid var(--decorative-subdued);
  padding: var(--space-small-1) var(--space-large-2);
  line-height: 1em;
  cursor: pointer;
  flex: 1;
  text-align: left;
}

.rhythmtemplatesonboardingdialog.basicdialog .inner {
  padding: 0;
  overflow: hidden;
}
.rhythmtemplatesonboardingdialog.basicdialog .closer {
  z-index: 99;
  color: white;
}
.rhythmtemplatesonboardingdialog.basicdialog .video-container .onboarding-video {
  width: 100%;
}
.rhythmtemplatesonboardingdialog.basicdialog .body {
  padding: var(--space-medium);
  text-align: left;
}
.rhythmtemplatesonboardingdialog.basicdialog .body .menu-image {
  width: 200px;
  margin: var(--space-tiny-1) 0;
}
.rhythmtemplatesonboardingdialog.basicdialog .body .rhythm-templates-region-button-wrapper {
  margin: 0px 2px;
  border: 2px solid var(--decorative-subdued);
  border-radius: 10px;
}
.rhythmtemplatesonboardingdialog.basicdialog .body .title,
.rhythmtemplatesonboardingdialog.basicdialog .body .description {
  text-align: left;
}
.rhythmtemplatesonboardingdialog.basicdialog .body .title {
  font-weight: 700;
  font-size: 25px;
  margin-bottom: var(--space-small);
}
.rhythmtemplatesonboardingdialog.basicdialog .footer .content-container {
  padding: var(--space-small) var(--space-medium);
  margin-top: var(--space-small);
  border-top: 1px solid var(--decorative-subdued);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rhythmtemplatesonboardingdialog.basicdialog .footer .content-container .dontshowagain {
  display: inline-flex;
  align-self: center;
  font-weight: 400;
}
.rhythmtemplatesonboardingdialog.basicdialog .footer .content-container .dontshowagain input[type=checkbox] {
  margin-right: 5px;
}

.rhythmtemplates-region-button-container {
  display: inline-block;
  margin-left: var(--spacing-small);
}

.rhythm-templates-region-button-wrapper {
  display: inline-flex;
}

.rhythm-templates-region-button {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  border-radius: 4px;
  transition: background-color 100ms, background-image 100ms, border-color 100ms, color 100ms, opacity 100ms;
  border: none;
  padding: 9px;
  min-width: 76px;
  border-radius: 10px;
  color: var(--text-base);
  background-color: var(--background-elevated-base) !important;
  font-size: 12px;
  color: var(--text-base);
  line-height: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  height: 17px;
  line-height: 17px;
  padding: 0 7px;
  border-width: 0;
  transition: opacity 0s;
  min-width: initial;
  cursor: pointer;
}
.rhythm-templates-region-button:hover {
  transition: background-color 30ms, background-image 30ms, border-color 30ms, color 30ms, opacity 30ms;
}
.pl-mobile .rhythm-templates-region-button {
  transition: opacity 150ms;
}
.pl-mobile .rhythm-templates-region-button:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
.rhythm-templates-region-button:hover {
  opacity: 0.9;
  color: var(--text-base);
  background-color: var(--background-elevated-highlight) !important;
}
.rhythm-templates-region-button.hidden {
  display: none;
  pointer-events: none;
}
.rhythm-templates-region-button:not(.button_circular) .soundtrap-icon {
  color: var(--text-base);
  font-size: 1em;
  height: 1.25em;
  margin-right: 0px;
}

.rhythm-templates-notification .message-part-one {
  margin-right: 3px;
}
.rhythm-templates-notification .message-part-two {
  margin-left: 3px;
}

.rhythm-templates-length-warning .inner.shadoweddialog.shadoweddialog-newstyle {
  padding: 0;
}
.rhythm-templates-length-warning .body {
  text-align: left;
  padding: 40px;
}
.rhythm-templates-length-warning .body h3 {
  margin-bottom: 20px;
}
.rhythm-templates-length-warning .footer {
  border-top: 1px solid var(--decorative-subdued);
  display: flex;
  justify-content: end;
  padding: 20px 40px;
  gap: 10px;
}

.memory-limit-notification {
  white-space: break-spaces;
  display: flex;
}

.memory-indicator-toast-icon {
  color: #ff780a;
  font-size: 21px;
  display: block;
  margin-right: var(--space-tiny);
  padding-top: var(--space-tiny);
}

.notification-area.memory_notification {
  width: auto;
}

.st-beta-tag {
  display: inline-flex;
  background: rgba(90, 0, 170, 0.2);
  color: var(--text-primary);
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 2px;
  vertical-align: bottom;
}
.st-beta-tag.small {
  width: 40px;
  height: 20px;
}
.st-beta-tag.medium {
  width: 48px;
  height: 28px;
}
.st-beta-tag .title {
  text-transform: uppercase;
  color: var(--text-primary);
}
.st-beta-tag .description {
  display: none;
  position: absolute;
  width: max-content;
  white-space: nowrap;
  background: var(--background-base);
  top: calc(100% + 15px);
  padding: var(--space-tiny) var(--space-tiny);
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}
.st-beta-tag .description:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--decorative-subdued);
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
}
.st-beta-tag:hover .description {
  display: block;
}

.aadc-banner-container {
  display: flex;
  align-items: center;
  padding: var(--space-tiny) var(--space-small);
}
.aadc-banner-container .description {
  display: inline;
  white-space: normal;
  font-size: 11px;
  margin: 0;
}
.aadc-banner-container .cta {
  flex-shrink: 0;
}

.collaboration-started-tip .collaboration-started-dialog-help-link-icon,
.collaboration-started-dialog-help-link-text {
  vertical-align: baseline;
}

.collaboration-started-body .st-dialog-body {
  padding: 64px 64px 32px;
}
.collaboration-started-body .button_GP_L {
  padding: 0 15px;
  font-size: 15px;
  line-height: 20px;
  height: 40px;
}
.collaboration-started-body .st-dialog-footer {
  height: 80px;
}

.st-dialog-title.collaboration-started-title {
  line-height: 30px;
  letter-spacing: -0.003em;
  margin-bottom: 16px;
}

.collaboration-started-message {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  white-space: pre-wrap;
}

.collaboration-started-dialog-help-link-icon {
  font-size: 12px;
}

.collaboration-started-dialog-help-link-text {
  padding-left: 8px;
  font-size: 15px;
}

.collaboration-started-tip {
  display: block;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.001em;
  padding-top: 12px;
  color: var(--essential-primary);
}
.collaboration-started-tip:hover, .collaboration-started-tip:active, .collaboration-started-tip:focus {
  text-decoration: underline;
}

.chatbubble,
.chatnotification {
  position: relative;
  display: flex;
  margin-top: 5px;
}
.chatbubble .chat-face .presence,
.chatnotification .chat-face .presence {
  top: 26px;
  bottom: unset;
}
.chatbubble.chatbubble--left,
.chatnotification.chatbubble--left {
  justify-content: flex-start;
}
.chatbubble.chatbubble--right,
.chatnotification.chatbubble--right {
  justify-content: flex-end;
}

.chatbubble-bubble {
  box-sizing: border-box;
  position: relative;
  border-radius: 5px;
  padding: 8px;
  margin-left: 0;
  width: 236px;
  display: flow-root;
  font-family: var(--font-family);
  font-weight: 400;
  white-space: normal;
}
.chatbubble-bubble.right {
  margin-left: 85px;
  margin-right: 7px;
  background-color: var(--background-base);
  color: var(--text-base);
}
.chatbubble-bubble.right::after {
  position: absolute;
  right: 0;
  margin-right: -14px;
  border-style: solid;
  border-width: 8px;
  border-color: transparent transparent transparent var(--background-base);
  top: 9px;
  content: "";
}
.chatbubble-bubble.right .chat-timestamp {
  color: var(--text-base);
  opacity: 0.6;
}
.chatbubble-bubble.left {
  background-color: var(--background-tinted-base);
  color: var(--text-base);
  margin-right: 40px;
  margin-left: 13px;
  padding: 8px;
}
.chatbubble-bubble.left::before {
  position: absolute;
  border-style: solid;
  border-width: 8px;
  left: -16px;
  border-color: transparent var(--background-tinted-base) transparent transparent;
  top: 9px;
  content: "";
}

.chatbubble--chatface-placeholder {
  width: 34px;
  margin-right: 5px;
}

.chatbubble--new-talker {
  margin-top: 10px;
}

.chat-timestamp {
  float: right;
  vertical-align: bottom;
  color: var(--text-base);
  margin-top: 2px;
  margin-left: 3px;
  font-size: 12px;
}

.chat-sender {
  display: block;
  font-size: 12px;
  margin-top: 2px;
  color: var(--text-subdued);
}

.chatbubble-typing-ellipsis:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis steps(4, end) 1s infinite;
  content: "…";
  width: 0;
}

@keyframes ellipsis {
  to {
    width: 1em;
  }
}
.chat-date-separator {
  color: var(--text-subdued);
  text-align: center;
  padding-top: 20px;
  text-transform: uppercase;
  margin: 0 auto;
}

.chatnotification {
  color: var(--text-base);
  padding: 0;
  margin-top: 5px;
}

.chatnotification--text {
  box-sizing: border-box;
  position: relative;
  padding: 8px;
  margin-right: 40px;
  width: 236px;
  font-family: var(--font-family);
  font-weight: 400;
  white-space: normal;
}
.chatnotification--text .chat-timestamp {
  display: inline-block;
  float: none;
}

.guestnotification {
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  font-size: 15px;
  color: #9b9b9b;
  padding: 5px 16px 1px 0;
  margin: 5px auto 10px 45px;
}

.chat-messages--container {
  padding: 0 14px 20px;
  font-size: 13px;
}

.chat-messages--uix-parent-container {
  overflow-y: auto;
}

.chat-date-separator {
  color: var(--text-subdued);
  text-align: center;
  padding-top: 20px;
  text-transform: uppercase;
  margin: 0 auto;
}

.chat-empty-placeholder {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  white-space: normal;
  align-items: center;
  font-size: 15px;
  line-height: 20px;
  color: var(--text-base);
}

.chat-empty-placeholder-title {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.chat-empty-placeholder-body {
  max-width: 280px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 1.5rem;
}

.chat-empty-placeholder-list {
  margin-top: 28px;
  margin-bottom: 32px;
  font-size: 13px;
  line-height: 17px;
}

.chat-empty-placeholder-list-item {
  padding-top: 12px;
}

.chat-empty-placeholder-list-icon {
  font-size: 17px;
  padding-right: 8px;
  vertical-align: bottom;
}

.chat-empty-placeholder-button {
  font-size: 15px;
}

.st-theme-switch {
  border: 1px solid var(--essential-subdued);
  padding: 0px;
  border-radius: 0%;
  background: var(--background-elevated-base);
  width: 52px;
  height: 26px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.st-theme-switch .option {
  transition: all 2s;
  z-index: 99;
}
.st-theme-switch .option:not(.active) svg path {
  color: var(--text-subdued);
}
.st-theme-switch .option.light {
  padding: 5px;
  border-radius: 100%;
  height: 26px;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px;
}
.st-theme-switch .option.dark {
  padding: 5px;
  border-radius: 100%;
  height: 26px;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
}
.st-theme-switch .active-indicator {
  height: 26px;
  width: 26px;
  position: absolute;
  background-color: var(--text-subdued);
  border-radius: 100%;
  transition: all 1.5s;
}
.st-theme-switch .active-indicator.light-theme {
  left: 0;
}
.st-theme-switch .active-indicator.dark-theme {
  left: 50%;
}
.st-theme-switch .option.active {
  color: var(--background-base);
}

.localsolomuteonboarding {
  margin-top: 15px;
}

.auto-save-status-indicator {
  padding: 0;
  border: none;
  appearance: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  background-color: transparent;
  display: flex;
  align-items: center;
  margin-left: 30px;
  min-width: 70px;
}
@media (max-width: 768px) {
  .auto-save-status-indicator {
    margin-left: 10px;
    min-width: auto;
  }
}
@media (max-width: 380px) {
  .auto-save-status-indicator {
    margin-left: 3px;
  }
}
.auto-save-status-indicator .soundtrap-icon {
  color: var(--text-subdued);
  margin: 2px 4px 0 0;
}
.auto-save-status-indicator .soundtrap-icon.saving {
  animation-name: spin-saving;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin-saving {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.auto-save-status-indicator .st-label {
  color: var(--text-subdued);
  margin-bottom: -2px;
  cursor: pointer;
}

.timeline-comments-container {
  border-top: 1px solid var(--decorative-subdued);
  border-bottom: 1px solid var(--decorative-subdued);
  border-left: 1px solid var(--decorative-subdued);
}

.timeline-parts-container {
  overflow: hidden;
  border-bottom: 1px solid var(--decorative-subdued);
}
.timeline-parts-container .parts-area {
  position: relative;
}
.timeline-parts-container .timeline-part {
  position: absolute;
  border-radius: 4px;
  border: 1px solid var(--essential-subdued);
  height: 100%;
  top: 0;
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.timeline-parts-container .timeline-part button {
  background-color: transparent;
  border: none;
}
.timeline-parts-container .timeline-part:hover, .timeline-parts-container .timeline-part:focus-within {
  background-color: var(--background-elevated-highlight);
}
.timeline-parts-container .timeline-part .timeline-part-handle {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-parts-container .timeline-part .timeline-part-handle padding .timeline-part-name {
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.timeline-parts-container .timeline-part .starthandle {
  font-size: 12px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 1px;
  height: 100%;
  width: 36px;
  cursor: col-resize;
}
.timeline-parts-container .timeline-part .starthandle svg {
  color: var(--essential-subdued);
  opacity: 0;
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: 0;
  height: 24px;
  width: 24px;
}
body.pl-computer .timeline-parts-container .timeline-part .starthandle {
  width: 18px;
}
body.pl-computer .timeline-parts-container .timeline-part .starthandle:active {
  margin-left: -100px;
  top: -100px;
  height: 300px;
  width: 300px;
  background-position: 102px 102px;
}
body.pl-computer .timeline-parts-container .timeline-part .starthandle:active .cycleknob {
  margin-left: 100px;
  margin-top: 100px;
}
.timeline-parts-container .timeline-part .endhandle {
  font-size: 12px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0;
  height: 100%;
  width: 36px;
  cursor: col-resize;
}
.timeline-parts-container .timeline-part .endhandle svg {
  color: var(--essential-subdued);
  opacity: 0;
  position: absolute;
  pointer-events: none;
  right: 0;
  bottom: 0;
  height: 24px;
  width: 24px;
}
body.pl-computer .timeline-parts-container .timeline-part .endhandle {
  width: 18px;
}
body.pl-computer .timeline-parts-container .timeline-part .endhandle:active {
  margin-right: -100px;
  top: -100px;
  height: 300px;
  width: 300px;
  background-position: 183px 102px;
}
body.pl-computer .timeline-parts-container .timeline-part .endhandle:active .cycleknob {
  margin-right: 100px;
  margin-top: 100px;
}
.timeline-parts-container .timeline-part:hover .starthandle svg,
.timeline-parts-container .timeline-part:hover .endhandle svg, .timeline-parts-container .timeline-part:focus-within .starthandle svg,
.timeline-parts-container .timeline-part:focus-within .endhandle svg {
  opacity: 1;
}

.timeline-add-part-button:hover,
.timeline-add-part-button {
  background-color: var(--decorative-subdued);
  color: var(--text-base);
  overflow-x: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
  width: 100% !important;
  height: 24px;
}
.timeline-add-part-button:hover:hover,
.timeline-add-part-button:hover {
  color: var(--text-base);
}
.timeline-add-part-button:hover .soundtrap-icon,
.timeline-add-part-button .soundtrap-icon {
  padding-right: 4px;
  vertical-align: middle !important;
  font-size: 14px;
}

.rtc-beta-flag {
  position: relative;
  color: var(--essential-primary);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 4px 8px;
  border-radius: 4px;
}
.rtc-beta-flag:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.2;
  background-color: var(--essential-primary);
  border-radius: 4px;
}

.rtc-beta-flag-project-name {
  display: inline-block;
}

.comment-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10000;
  pointer-events: none;
}
.comment-container .region-comments {
  width: 100%;
  height: 100%;
}
.comment-container .region-comments .discussion-anchor-area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.comment-container .region-comments .discussion-anchor-area .discussion-anchor {
  pointer-events: auto;
}

.global-variation-selection {
  margin-top: var(--space-small);
  padding-left: 80px;
}
.global-variation-selection .variation-list {
  padding: 0;
  margin-top: var(--space-medium);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-small);
}
.global-variation-selection .variation-list .variation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-tiny-1);
  gap: var(--space-tiny-1);
  background: var(--background-elevated-base);
}
.global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper {
  position: relative;
  background-color: var(--background-base);
  width: 180px;
  height: 180px;
}
.global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper .style-button-icon-wrapper {
  width: 100%;
  height: 100%;
}
.global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper .style-button-icon-wrapper .style-button-icon {
  opacity: 30%;
}
.global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper .style-button-icon-wrapper img {
  height: 85px;
  width: 85px;
}
.global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper .variation-item-play-btn {
  position: absolute;
  bottom: var(--space-tiny);
  right: var(--space-tiny);
  border: none;
  padding: 0;
  height: 47px;
  width: 47px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--essential-primary);
}
.global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper .variation-item-play-btn .ic-play, .global-variation-selection .variation-list .variation-item .variation-item-cover-wrapper .variation-item-play-btn .ic-stop {
  font-size: 18px;
}
.global-variation-selection .variation-list .variation-item .variation-name {
  width: 100%;
  text-align: left;
}
.global-variation-selection .variation-list .variation-item .select-variation-button {
  background: transparent;
  height: 33px;
}

.discussion-card {
  border: 1px solid var(--decorative-subdued);
  background-color: var(--background-elevated-base);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  min-width: 230px;
  width: 100%;
  max-width: 700px;
  padding: 12px;
  position: relative;
}
.discussion-card--clickable {
  cursor: pointer;
}
.discussion-card .discussion-card-button {
  z-index: 2; /* needed to make clickable on top of card clickable */
}
.discussion-card .discussion-card-button,
.discussion-card .discussion-card-button:active {
  color: var(--text-base);
  font-size: 11px;
  min-width: auto;
}
.discussion-card .discussion-card-button:disabled {
  color: var(--text-subdued);
}
.discussion-card__header {
  color: var(--text-base);
  display: flex;
  font-size: 13px;
  align-items: center;
  min-height: 22px;
}
.discussion-card__header__time-label {
  flex-grow: 1;
  font-weight: 500;
}
.discussion-card__sub-header {
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 12px;
  min-height: 44px;
}
.discussion-card__sub-header__profile-icon {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  vertical-align: baseline !important;
  position: relative;
  margin-right: 8px;
}
.discussion-card__sub-header__text {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1 1 0;
}
.discussion-card__sub-header__text__name {
  font-size: 15px;
  font-weight: 500;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.discussion-card__sub-header__text__datetime {
  color: var(--text-subdued);
  font-size: 11px;
  padding-right: 6px;
}
.discussion-card__first-comment {
  color: var(--text-subdued);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
  font-size: 13px;
  line-height: 17px;
}
.discussion-card__first-comment--expanded {
  -webkit-line-clamp: unset;
}
.discussion-card__first-comment--expanded .discussion-comment-text {
  max-height: 326px;
  overflow-y: auto;
}
.discussion-card__footer {
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  min-height: 38px;
}
.discussion-card__footer__icon {
  font-size: 10px;
}
.discussion-card__footer__text {
  padding-left: 5px;
  font-size: 11px;
  font-weight: 500;
}
.discussion-card__footer__center {
  flex-grow: 1;
  text-align: center;
}
.discussion-card__footer__button {
  vertical-align: initial;
  position: static;
}
.discussion-card__footer__button:after {
  /* make entire card clickable and still accessible */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.discussion-cards-empty-state {
  display: flex;
  white-space: normal;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin: 0 60px;
  font-size: 15px;
}
.discussion-cards-empty-state .discussion-cards-empty-state__text {
  text-align: center;
}

.discussion-notification-card {
  height: 40px;
  opacity: 1;
  overflow: hidden;
}
.discussion-notification-card__title {
  margin-right: 16px;
}

.discussions-tab-header-filter-toggle-section {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

.discussions-tab-header-filter-dropdown-section {
  display: flex;
  justify-content: right;
  margin: 12px 0px;
}

.eq-container {
  --z-index-grid: 1;
  --z-index-spectrum: 2;
  --z-index-eq-curve: 3;
  --z-index-q-node-connector: 4;
  --z-index-q-node-handle: 5;
  --z-index-filter-handle: 6;
  --z-index-filter-info: 6;
  --z-index-rotate-device-container: 7;
  align-items: center;
  align-self: center;
  background-color: var(--background-elevated-base);
  display: flex;
  justify-content: center;
  height: 330px;
  margin: 50px 0 15px;
  position: relative;
  width: 570px;
  overflow: hidden;
}
.pl-mobile.ff-handheld .eq-container {
  margin: 20px 0;
  height: 100%;
  background-color: transparent;
}
.eq-container .visual-equalizer-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 20px;
}
.eq-container .visual-equalizer {
  height: 100%;
  position: absolute;
  width: 530px;
}
.eq-container .visual-equalizer.disabled {
  opacity: 0.3;
  -webkit-filter: grayscale(1) brightness(1) contrast(1);
  filter: grayscale(1) brightness(1) contrast(1);
}
.pl-mobile.ff-handheld .eq-container .visual-equalizer {
  height: 100%;
}
.eq-container .visual-equalizer .filter-handle {
  color: #2d2d2d;
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=lowshelf] {
  background: #92e89b;
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=lowshelf]:not([disabled=true]):focus, .eq-container .visual-equalizer .filter-handle[handle-filter-name=lowshelf]:not([disabled=true]):hover {
  outline-color: rgba(146, 232, 155, 0.4);
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=low],
.eq-container .visual-equalizer .q-node[handle-filter-name=low],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=low] {
  background: #bea4ff;
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=low]:not([disabled=true]):focus, .eq-container .visual-equalizer .filter-handle[handle-filter-name=low]:not([disabled=true]):hover,
.eq-container .visual-equalizer .q-node[handle-filter-name=low]:not([disabled=true]):focus,
.eq-container .visual-equalizer .q-node[handle-filter-name=low]:not([disabled=true]):hover,
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=low]:not([disabled=true]):focus,
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=low]:not([disabled=true]):hover {
  outline-color: rgba(190, 164, 255, 0.4);
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=low].q-node-connector-left[handle-filter-name=low],
.eq-container .visual-equalizer .q-node[handle-filter-name=low].q-node-connector-left[handle-filter-name=low],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=low].q-node-connector-left[handle-filter-name=low] {
  background: linear-gradient(90deg, rgba(190, 164, 255, 0.15), rgba(190, 164, 255, 0));
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=low].q-node-connector-right[handle-filter-name=low],
.eq-container .visual-equalizer .q-node[handle-filter-name=low].q-node-connector-right[handle-filter-name=low],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=low].q-node-connector-right[handle-filter-name=low] {
  background: linear-gradient(270deg, rgba(190, 164, 255, 0.15), rgba(190, 164, 255, 0));
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=mid],
.eq-container .visual-equalizer .q-node[handle-filter-name=mid],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=mid] {
  background: #ff7478;
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=mid]:not([disabled=true]):focus, .eq-container .visual-equalizer .filter-handle[handle-filter-name=mid]:not([disabled=true]):hover,
.eq-container .visual-equalizer .q-node[handle-filter-name=mid]:not([disabled=true]):focus,
.eq-container .visual-equalizer .q-node[handle-filter-name=mid]:not([disabled=true]):hover,
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=mid]:not([disabled=true]):focus,
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=mid]:not([disabled=true]):hover {
  outline-color: rgba(255, 116, 120, 0.4);
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=mid].q-node-connector-left[handle-filter-name=mid],
.eq-container .visual-equalizer .q-node[handle-filter-name=mid].q-node-connector-left[handle-filter-name=mid],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=mid].q-node-connector-left[handle-filter-name=mid] {
  background: linear-gradient(90deg, rgba(255, 116, 120, 0.15), rgba(255, 116, 120, 0));
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=mid].q-node-connector-right[handle-filter-name=mid],
.eq-container .visual-equalizer .q-node[handle-filter-name=mid].q-node-connector-right[handle-filter-name=mid],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=mid].q-node-connector-right[handle-filter-name=mid] {
  background: linear-gradient(270deg, rgba(255, 116, 120, 0.15), rgba(255, 116, 120, 0));
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=high],
.eq-container .visual-equalizer .q-node[handle-filter-name=high],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=high] {
  background: #eebe64;
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=high]:not([disabled=true]):focus, .eq-container .visual-equalizer .filter-handle[handle-filter-name=high]:not([disabled=true]):hover,
.eq-container .visual-equalizer .q-node[handle-filter-name=high]:not([disabled=true]):focus,
.eq-container .visual-equalizer .q-node[handle-filter-name=high]:not([disabled=true]):hover,
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=high]:not([disabled=true]):focus,
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=high]:not([disabled=true]):hover {
  outline-color: rgba(238, 190, 100, 0.4);
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=high].q-node-connector-left[handle-filter-name=high],
.eq-container .visual-equalizer .q-node[handle-filter-name=high].q-node-connector-left[handle-filter-name=high],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=high].q-node-connector-left[handle-filter-name=high] {
  background: linear-gradient(90deg, rgba(238, 190, 100, 0.15), rgba(238, 190, 100, 0));
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=high].q-node-connector-right[handle-filter-name=high],
.eq-container .visual-equalizer .q-node[handle-filter-name=high].q-node-connector-right[handle-filter-name=high],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=high].q-node-connector-right[handle-filter-name=high] {
  background: linear-gradient(270deg, rgba(238, 190, 100, 0.15), rgba(238, 190, 100, 0));
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=highshelf] {
  background: #89ccce;
}
.eq-container .visual-equalizer .filter-handle[handle-filter-name=highshelf]:not([disabled=true]):focus, .eq-container .visual-equalizer .filter-handle[handle-filter-name=highshelf]:not([disabled=true]):hover {
  outline-color: rgba(137, 204, 206, 0.4);
}
.eq-container .visual-equalizer .q-node[handle-filter-name=lowshelf],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=lowshelf],
.eq-container .visual-equalizer .q-node[handle-filter-name=highshelf],
.eq-container .visual-equalizer .q-node-connector[handle-filter-name=highshelf] {
  display: none;
}
.eq-container .visual-equalizer-curve,
.eq-container .spectrum-analyser,
.eq-container .grid {
  height: 280px;
  left: 0;
  position: absolute;
  top: 0;
  width: 530px;
}
.eq-container .visual-equalizer-curve {
  z-index: var(--z-index-eq-curve);
}
.eq-container .spectrum-analyser {
  z-index: var(--z-index-spectrum);
}
.eq-container .grid {
  z-index: var(--z-index-grid);
}
.eq-container .filter-handle {
  align-items: center;
  border-radius: 100%;
  color: #fff;
  display: flex;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  left: 0;
  margin-left: -10px;
  margin-top: -10px;
  position: absolute;
  top: 0;
  user-select: none;
  width: 20px;
  z-index: var(--z-index-filter-handle);
  border: none;
}
.eq-container .q-node-container {
  position: absolute;
  z-index: var(--z-index-q-node-handle);
}
.eq-container .q-node-container:focus, .eq-container .q-node-container.studio-focus-visible {
  border: 1px solid var(--focus);
}
.eq-container .q-node-container:focus.q-node-icon, .eq-container .q-node-container.studio-focus-visible.q-node-icon {
  border: 1px solid var(--focus);
}
.eq-container .q-node-container .q-node {
  z-index: var(--z-index-q-node-handle);
  position: absolute;
  padding: 0;
  cursor: ew-resize;
  border: none;
}
.eq-container .q-node-container .q-node.q-node {
  min-width: 1px;
}
.eq-container .q-node-container .q-node.q-node:hover {
  cursor: ew-resize;
}
.eq-container .q-node-container .q-node.q-node::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 400%;
  height: 400%;
}
.eq-container .q-node-container .q-node .q-node-icon-container {
  position: absolute;
  font-size: 12px;
  color: var(--text-base);
}
.eq-container .q-node-container .q-node .q-node-icon-container .q-node-icon {
  border: none;
  padding: 0;
  background: none;
  cursor: ew-resize;
}
.eq-container .q-node-container .q-node .q-node-icon-container .q-node-icon.q-node-icon:hover {
  cursor: ew-resize;
}
.eq-container .q-node-container .q-node.q-node[q-node-type=right] .q-node-icon-container {
  margin-top: -0.5px;
}
.eq-container .q-node-container .q-node.q-node[q-node-type=right] .q-node-icon-container .ic-exit:before {
  display: inline-block;
  transform: rotate(180deg);
}
.eq-container .q-node-connector {
  z-index: var(--z-index-q-node-connector);
  position: absolute;
  height: 1px;
  cursor: auto;
}
.eq-container .filter-handle[disabled=true] {
  opacity: 0.8;
  -webkit-filter: grayscale(1) brightness(1) contrast(1);
  filter: grayscale(1) brightness(1) contrast(1);
}
.eq-container .filter-handle:not([disabled=true]):focus {
  border: 1px solid var(--focus);
}
.eq-container .filter-handle:not([disabled=true]):focus,
.eq-container .filter-handle:not([disabled=true]):hover {
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  width: 24px;
  outline: 4px solid;
}
.eq-container .eq-panel {
  bottom: 3px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  position: absolute;
  width: 100%;
  z-index: var(--z-index-filter-info);
}
.eq-container .filter-info {
  display: flex;
}
.eq-container .button-controls {
  display: flex;
  align-items: center;
}
.eq-container .button-controls .reset-button {
  margin-right: 12px;
  padding-left: 0;
  padding-right: 0;
  min-width: 50px;
}
.eq-container .filter-frequency,
.eq-container .filter-gain,
.eq-container .filter-q {
  color: var(--text-base);
  text-align: left;
  white-space: nowrap;
}
.eq-container .filter-frequency {
  width: 140px;
}
.eq-container .filter-gain {
  width: 100px;
}
.eq-container .filter-q {
  width: 40px;
}
.eq-container .rotate-device-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-align: center;
}
.eq-container .rotate-device-container.soundtrap-icon {
  font-size: 20px;
}
.eq-container .rotate-device-message {
  font-size: 15px;
  line-height: 21px;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--text-base);
  margin: 10px;
}
.eq-container .hidden {
  display: none;
}

.preview canvas {
  height: 130px;
  width: 175px;
  left: 0;
  position: absolute;
  top: 42px;
  margin: 0 0 10px;
}

.visualeq-simple-preview {
  display: none;
}

.effects-picker-tab .visualeq-simple-preview,
.addeffectdialog .visualeq-simple-preview {
  height: 130px;
  width: 175px;
  left: 0;
  position: absolute;
  top: 42px;
  margin: 0 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.effects-picker-tab .visualeq-simple-preview svg,
.addeffectdialog .visualeq-simple-preview svg {
  transform: scale(1.8);
}

@media (max-width: 880px) {
  .preview canvas {
    max-width: 100%;
  }
}
.star-rating-survey {
  color: var(--text-base);
  background: var(--background-base);
  white-space: normal;
}
.star-rating-survey .bottom-close {
  display: inline;
  float: right;
  padding: 16px;
  color: var(--text-base);
  text-decoration: none;
}
.star-rating-survey .bottom-feedback-content {
  padding: 16px;
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-title {
  font-size: 15px;
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-link {
  color: #aa8cf0;
  font-weight: 500;
  font-size: 15px;
  display: block;
  padding-top: 4px;
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-link-text {
  margin-right: 4px;
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-stars {
  margin-top: 12px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  --star-color: var(--mango-l1);
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-stars .bottom-feedback-star {
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  transform: scale(1.2);
  margin-right: 4px;
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-stars .bottom-feedback-star:hover, .star-rating-survey .bottom-feedback-content .bottom-feedback-stars .bottom-feedback-star:hover ~ div {
  color: var(--star-color);
}
.star-rating-survey .bottom-feedback-content .bottom-feedback-stars .bottom-feedback-star:hover ~ .bottom-feedback-star, .star-rating-survey .bottom-feedback-content .bottom-feedback-stars .bottom-feedback-star:hover ~ div ~ .bottom-feedback-star {
  color: var(--star-color);
}

.star-rating-survey.round-edges {
  border-radius: 6px;
}

.star-rating-survey.contrasting {
  background: var(--background-press);
}

.loop-tab-search-type-selector {
  margin-top: 12px;
  margin-bottom: -6px;
}
.loop-tab-search-type-selector .option {
  margin-right: 16px;
}
.loop-tab-search-type-selector .option .st-radio {
  margin-right: 8px;
  accent-color: var(--background-base);
}
.loop-tab-search-type-selector .option .label-text {
  font-weight: normal;
  font-size: 15px;
  color: var(--text-base);
}

.search-type-new-tag {
  color: var(--text-base);
  background: var(--background-base);
  padding: 2px 4px;
  display: inline-block;
  font-size: 11px;
  font-weight: normal;
  border-radius: 2px;
  margin-left: 8px;
}

.sampler-ui-container {
  position: relative;
  display: flex;
  gap: 16px;
}

.mobile-fallback-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100px;
}
.mobile-fallback-container .presetselectorpicker {
  margin: 8px 0;
  width: 255px;
}

.sampler-container {
  margin: 0 auto;
}

.sampler-ui-edit-instrument-container {
  display: flex;
  flex-direction: row;
}

.sampler-ui-left-button-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 75px;
}
.sampler-ui-left-button-panel .presetselectorpicker {
  margin: 8px 0;
  width: 255px;
}
.sampler-ui-left-button-panel .fx-button {
  flex-grow: 0;
  max-width: 255px;
}
@media (max-width: 1050px) {
  .sampler-ui-left-button-panel {
    display: none;
  }
}

.sampler-ui-fieldset {
  display: flex;
  flex-direction: column;
}

.drag-to-replace-overlay {
  background-color: var(--text-base);
  color: var(--background-base);
  border-radius: 8px;
  font-size: 22px;
  opacity: 0.9;
  position: absolute;
  height: 100%;
  width: 390px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.drag-to-replace-overlay .drag-to-replace-overlay-text {
  text-align: center;
  white-space: initial;
  width: 200px;
}

.sampler-ui-panel {
  flex: 1;
}

.sampler-ui-panel--edit {
  display: flex;
  align-items: stretch;
}

.sampler-ui-label {
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 17px;
}

.sampler-ui-editor {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
}

.sampler-ui-edit-import {
  padding: 20px;
}

.sampler-ui-edit-import,
.sampler-ui-adjustment-controls {
  display: flex;
  align-items: center;
  background-color: var(--background-elevated-highlight);
  border-radius: 8px;
}

.sampler-ui-adjustment-controls {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  margin-left: 8px;
}

.sampler-ui-edit-import {
  min-width: 300px;
  justify-content: center;
}

.sampler-ui-waveform-editor {
  position: relative;
}

.sampler-ui-sampler-mode {
  margin-bottom: 38px;
  min-width: 135px;
  margin-left: 2px;
}
.sampler-ui-sampler-mode .st-select-button {
  justify-content: flex-start;
}
.sampler-ui-sampler-mode__label {
  padding-right: var(--space-tiny);
}

.sampler-ui-adjustment-controls-glide-container, .sampler-ui-adjustment-controls-adsr-container {
  background: var(--background-tinted-highlight);
  border-radius: 8px;
  width: 100%;
}

.sampler-ui-adjustment-controls-column-1, .sampler-ui-adjustment-controls-column-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.sampler-ui-adjustment-controls-column-1 {
  width: 166px;
  justify-content: flex-start;
  margin-right: 8px;
}

.sampler-ui-adjustment-controls-adsr-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sampler-ui-adjustment-controls-glide-container {
  margin-bottom: 8px;
  padding: 18px 0;
}

.sampler-ui-adjustment-controls-adsr-knobs {
  margin: 0 24px;
  display: grid;
  grid-template-columns: 40px 40px;
  grid-template-rows: auto auto;
  grid-column-gap: 7px;
  align-items: center;
  padding-top: 4px;
}

.sampler-ui-adjustment-controls-adsr-knobs > *:nth-child(n+3) {
  margin-top: 7px;
}

.sampler-ui-waveform-container {
  padding-bottom: 4px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.sampler-ui-waveform-full-sample {
  background-color: #9A999B;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.sampler-ui-waveform-canvas {
  opacity: 0.5;
}

.sampler-ui-waveform-canvas, .sampler-ui-waveform-svg, .sampler-ui-waveform-full-sample {
  vertical-align: bottom;
  height: 112px;
  width: 100%;
}

.sampler-ui-waveform-canvas, .sampler-ui-waveform-svg {
  position: absolute;
  pointer-events: none;
}

.sampler-ui-waveform-svg path {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-linecap: round;
  stroke-width: 2;
}

.sampler-ui-waveform-svg-paths-wrapper path.region-fade-path {
  fill: #a567dd;
  stroke: #a567dd;
}
.sampler-ui-waveform-svg-paths-wrapper path.region-loop-path {
  fill: #a42067;
  stroke: #a42067;
}
.sampler-ui-waveform-svg-paths-wrapper path.region-left-crossfade-path {
  fill: #a42067;
  stroke: #a42067;
}
.sampler-ui-waveform-svg-paths-wrapper path.region-right-crossfade-path {
  fill: #5d133a;
  stroke: #5d133a;
}
.sampler-ui-waveform-svg-paths-wrapper path.region-loop-edge-path {
  stroke: #adacb4;
}

.sampler-ui-bottom-buttons {
  margin-top: 8px;
  display: flex;
}
.sampler-ui-bottom-buttons .sampler-ui-delete {
  margin-left: auto;
  color: var(--text-base);
  border-color: var(--text-subdued);
  height: 28px;
  font-size: 13px;
}
.sampler-ui-bottom-buttons .sampler-ui-delete .ic-delete {
  font-size: 9px;
}

.sampler-waveform-background, .sampler-waveform-clip-region, .sampler-waveform-loop-region-handle {
  height: 112px;
  border-radius: 4px;
  position: absolute;
}

.sampler-waveform-loop-region-handle, .sampler-waveform-clip-region {
  cursor: grab;
}

.sampler-waveform-background {
  background-color: #6901c6;
  overflow: hidden;
}

.sampler-left-handle, .sampler-right-handle {
  position: absolute;
  height: 100%;
  cursor: col-resize;
  display: flex;
  align-items: flex-end;
  padding: 6px 4px 6px 4px;
}
.sampler-left-handle .offset-handle, .sampler-right-handle .offset-handle {
  margin-bottom: 20px;
}

.sampler-left-handle {
  justify-content: flex-start;
}

.sampler-right-handle {
  justify-content: flex-end;
}

.sampler-handle-icon {
  font-size: 12px;
  color: #fff;
}
.sampler-right-handle .sampler-handle-icon {
  transform: rotate(180deg);
}

.sampler-left-fade-handle,
.sampler-right-fade-handle {
  padding: 4px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s;
  cursor: ew-resize;
  margin-top: -4px;
}
.sampler-left-fade-handle:hover,
.sampler-right-fade-handle:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.sampler-left-fade-handle::before,
.sampler-right-fade-handle::before {
  display: block;
  content: "";
  border: 1px solid #b7b7b7;
  background-color: #ffffff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sampler-left-loop-handle,
.sampler-right-loop-handle {
  padding: 4px;
  cursor: ew-resize;
  margin-top: -4px;
  background-color: transparent;
  transition: background-color 0.3s;
}
.sampler-left-loop-handle:hover,
.sampler-right-loop-handle:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.sampler-left-loop-handle::before,
.sampler-right-loop-handle::before {
  display: block;
  content: "";
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.sampler-right-loop-handle {
  position: absolute;
  top: 0;
  margin-left: -14px;
}
.sampler-right-loop-handle::before {
  background-image: url("/studio/assets/images/studio/loop_point_right.png");
}

.sampler-loop-handle-arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid #D9D9D9;
}

.sampler-left-loop-handle {
  position: absolute;
  top: 0;
  left: 100px;
  margin-left: -14px;
}
.sampler-left-loop-handle::before {
  background-image: url("/studio/assets/images/studio/loop_point_left.png");
}

.sampler-right-fade-handle {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -8px;
}

.sampler-left-fade-handle {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -8px;
}

.sampler-crossfade-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: ew-resize;
  position: absolute;
  height: 100%;
  bottom: 0.5px;
  width: 0;
  border-left: 1px solid var(--background-base);
  border-right: 1px solid var(--background-base);
  transform: translateX(-1px);
}

.sampler-crossfade-handle-chamfer {
  background: var(--background-base);
  width: 5px;
  height: 5px;
  transform: translateY(3px) rotate(45deg);
  position: relative;
}

.sampler-crossfade-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background-elevated-base);
  color: var(--text-base);
  font-size: 11px;
  border-radius: 2px;
  border: 1px solid var(--background-base);
  padding: 1px;
}

.sampler-ui-fade-triangle-svg {
  border-radius: 4px;
  width: 100%;
}

.sampler-ui-waveform-loop-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-height: 25px;
}
.sampler-ui-waveform-loop-toggle-label {
  font-size: 13px;
  margin-left: 4px;
}
.sampler-ui-waveform-loop-toggle .sampler-ui-waveform-crossfade-wrapper {
  margin-left: 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  color: var(--text-subdued);
}

.sampler-create-instrument-container {
  margin-bottom: 50px;
  text-align: center;
}

.sampler-ui-create-instrument-container .sampler-create-instrument-heading {
  text-align: center;
  font-size: 18px;
}
.sampler-ui-create-instrument-container .heading-margin {
  margin-top: 100px;
  margin-bottom: 40px;
}
.sampler-ui-create-instrument-container .heading-error-margin {
  margin-top: 155px;
  margin-bottom: 16px;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-error-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #b4074b;
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  gap: 16px;
  max-width: 512px;
  white-space: normal;
  margin-bottom: 15px;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-error-banner .rotate {
  height: 30px;
  font-size: 22px;
  transform: rotate(180deg);
}
.sampler-ui-create-instrument-container .sampler-create-instrument-buttons-container {
  display: flex;
  gap: 12px;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-buttons-container .ic-file-import {
  font-size: 22px;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-buttons-container .ic-search {
  font-size: 22px;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button {
  height: 175px;
  width: 250px;
  border-radius: 8px;
  border-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button.button-import {
  background-color: var(--background-elevated-highlight);
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search {
  background-color: var(--background-base);
  color: var(--text-base);
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled {
  border: 3px var(--background-base) dashed;
  background-color: inherit;
  color: var(--background-base);
  font-size: 18px;
  white-space: normal;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging {
  background-color: #3b3546;
  color: var(--text-primary);
  border-color: var(--text-primary);
  transform: scale(1);
  animation: pulse 2s infinite;
}
.st-light-theme .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging, .synth84enginegui .container .control-container .control-area .button-wrapper button .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .sampler-ui-create-instrument-container .sampler-create-instrument-button.button-search.drag-enabled.dragging {
  background-color: #e2daeb;
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button .heading {
  font-size: 21px;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 4px;
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button .subheading {
  font-size: 13px;
  color: var(--text-subdued);
}
.sampler-ui-create-instrument-container .sampler-create-instrument-button .loop-tab-visible {
  margin: 0 20%;
}
.sampler-ui-create-instrument-container .open-saved-presets-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  visibility: visible;
  margin-top: 30px;
}
.sampler-ui-create-instrument-container .hide-open-presets-button {
  visibility: hidden;
}

.st-simple-select {
  --icon-size: 10px;
  position: relative;
  display: inline-flex;
  letter-spacing: 0.2px;
}

.st-simple-select--stretch {
  width: 100%;
}

.st-simple-select-input {
  width: 100%;
  appearance: none;
  border: none;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
  border-radius: 2px;
  color: var(--text-base);
  font-weight: 500;
}
.st-simple-select-input:focus {
  border: 0;
}

.st-simple-select-chevron {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
  pointer-events: none;
  color: var(--text-subdued);
  font-size: var(--icon-size);
}

.st-simple-select--subtle .st-simple-select-input {
  padding-right: calc(4px + var(--icon-size));
  background-color: transparent;
  text-align: right;
}

.st-simple-select--standard .st-simple-select-input {
  border: 1px solid var(--decorative-subdued);
  padding: 6px calc(12px + var(--icon-size)) 6px 8px;
  background: var(--background-elevated-base);
}
.st-simple-select--standard .st-simple-select-chevron {
  margin-right: 10px;
}

.st-simple-select--size-standard {
  font-size: 15px;
  line-height: 20px;
}

.st-simple-select--size-small {
  font-size: 13px;
  line-height: 17px;
}

.st-simple-select--size-xsmall {
  font-size: 11px;
  line-height: 15px;
}

.st-numeric-stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.st-numeric-stepper .btn {
  min-width: auto;
  padding: 0;
  background-color: var(--background-elevated-base);
  border-color: var(--decorative-subdued);
  color: var(--text-base);
}

.st-numeric-stepper-input-wrapper {
  padding: 0 10px;
}
.st-numeric-stepper-input-wrapper input {
  width: 60px;
  text-align: center;
  background-color: var(--background-elevated-base);
}

.new-feature-icon {
  position: relative;
  color: var(--essential-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  border-radius: 2px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.new-feature-icon:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.2;
  background-color: var(--essential-primary);
  border-radius: 2px;
}

.lc-project-icon {
  display: inline-block;
}

.project-title-label {
  display: inline-flex;
  max-width: 100%;
  flex: 4;
  overflow: hidden;
  margin: 0 20px;
}
@media (max-width: 1023px) {
  .project-title-label {
    display: none;
  }
}
.project-title-label .lbl {
  max-width: 100%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-base);
}
.project-title-label .lbl:hover .ic-edit {
  opacity: 1;
}
.project-title-label .lbl .txt {
  flex: 1;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.1px;
  font-family: var(--font-family);
  font-weight: 500;
  overflow: hidden;
}
.project-title-label .lbl .ic-edit {
  opacity: 0;
  font-size: 13px;
  margin-left: 5px;
  vertical-align: top;
  color: var(--text-base);
}
.project-title-label .project-title-label__edit {
  width: 100%;
}
.project-title-label .project-title-label__edit:focus {
  border-color: var(--essential-primary);
}
.project-title-label.no-left-margin {
  margin: 0 20px 0 0;
}

.fx-button {
  background-color: transparent;
  border: none;
  padding: 0;
  flex-grow: 1;
  max-width: 250px;
  display: flex;
  text-align: left;
  overflow: hidden;
}
.fx-button__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid var(--decorative-subdued);
  width: 100%;
  height: 50px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 4px;
  color: var(--text-base);
}
.fx-button__icon {
  font-size: 16px;
  line-height: 16px;
  margin-right: var(--space-tiny-1);
}
.fx-button__label {
  text-overflow: clip;
  overflow: hidden;
}
.fx-button__effects-count {
  display: inline-block;
  margin-left: var(--space-nano);
}
.fx-button__added-effects {
  text-overflow: ellipsis;
  overflow: hidden;
}
.fx-button__text, .fx-button__inner, .fx-button__added-effects {
  min-width: 0;
}
@media (max-width: 1150px) {
  .fx-button__inner {
    height: 40px;
  }
}
@media (max-width: 775px) {
  .fx-button__inner {
    height: 34px;
    border-radius: 17px;
    border: solid 1px var(--essential-subdued);
  }
  .fx-button__added-effects {
    display: none;
  }
}
@media (max-width: 775px) and (max-width: 577px) {
  .fx-button {
    max-width: 200px;
  }
}

.instrument-row-button-layout {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-grow: 1;
  max-width: 490px;
  margin-bottom: 8px;
  min-width: 0;
}
@media (max-width: 1150px) {
  .instrument-row-button-layout {
    flex-grow: 0;
    margin-bottom: 0;
    gap: 4px;
  }
}

.fxtoggle, .rounded-fxtoggle-wrapper {
  position: absolute;
}

.rounded-fxtoggle-wrapper {
  cursor: pointer;
  margin: 0;
}
.rounded-fxtoggle-wrapper .touch-area {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 50%;
}
.rounded-fxtoggle-wrapper .touch-area .fxtoggle-visual {
  height: 20px;
  width: 20px;
  color: var(--text-subdued);
  background-color: var(--background-tinted-highlight);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rounded-fxtoggle-wrapper input[type=checkbox] {
  opacity: 0;
  height: 0;
  width: 0;
}
.rounded-fxtoggle-wrapper input:checked ~ .touch-area > .fxtoggle-visual {
  background-color: var(--text-subdued);
  color: var(--background-base);
}
.rounded-fxtoggle-wrapper input[type=checkbox]:focus-visible + .touch-area > .fxtoggle-visual {
  outline: 5px auto -webkit-focus-ring-color;
}

.exit-studio-button {
  flex: 0 0 auto;
}
.exit-studio-button button {
  color: var(--text-base);
  min-width: initial;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 0;
  margin-left: 3px;
}
.exit-studio-button button:hover, .exit-studio-button button:active {
  border-color: transparent;
  background-color: transparent;
  color: var(--text-subdued);
}
.exit-studio-button button:hover .soundtrap-icon, .exit-studio-button button:active .soundtrap-icon {
  color: var(--text-subdued);
}
.exit-studio-button button:disabled {
  background-color: var(--background-base);
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.exit-studio-button .soundtrap-icon {
  margin: 4px 0 4px 0 !important;
}
.exit-studio-button span {
  line-height: 1.4;
}

.header-toolbar {
  display: flex;
}
.header-toolbar button,
.header-toolbar a {
  margin: 0 3px;
}
.header-toolbar .header-toolbar__desktop {
  display: flex;
}
@media (max-width: 1199px) {
  .header-toolbar .header-toolbar__desktop {
    display: none;
  }
}
.header-toolbar .header-toolbar__desktop .header-toolbar__export-button-cancel {
  margin: 0 0 0 5px;
  font-size: 1em;
}
.header-toolbar .header-toolbar__desktop .header-toolbar__export-button-chevron {
  margin: 0 0 0 5px;
  font-size: 0.7em;
}
.header-toolbar .header-toolbar__mobile {
  display: none;
}
@media (max-width: 1199px) {
  .header-toolbar .header-toolbar__mobile {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: hidden;
    row-gap: 20px;
    max-height: 34px;
  }
}
@media (min-width: 1023px) {
  .header-toolbar .header-toolbar__mobile .header-toolbar__undo-button {
    display: none;
  }
}
@media (min-width: 1023px) {
  .header-toolbar .header-toolbar__mobile .header-toolbar__redo-button {
    display: none;
  }
}
.header-toolbar .header-toolbar__upgrade-button .soundtrap-icon {
  margin-right: 5px;
}
@media (max-width: 1199px) {
  .header-toolbar .header-toolbar__upgrade-button .header-toolbar__export-preparing-button {
    display: flex;
  }
}
.header-toolbar .header-toolbar__upgrade-button-mobile {
  color: var(--essential-base);
}
@media (max-width: 534px) {
  .header-toolbar .header-toolbar__upgrade-button-mobile,
  .header-toolbar .header-toolbar__create-assignment-button-mobile,
  .header-toolbar .header-toolbar__share-button-mobile {
    display: none;
  }
}
.header-toolbar .header-toolbar__export-preparing-button,
.header-toolbar .header-toolbar__export-preparing-button-mobile {
  position: relative;
  overflow: visible;
}
.header-toolbar .header-toolbar__export-preparing-button *,
.header-toolbar .header-toolbar__export-preparing-button-mobile * {
  z-index: 3;
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.header-toolbar .header-toolbar__export-preparing-button-spinner,
.header-toolbar .header-toolbar__export-preparing-button-mobile-spinner {
  --border-size: 3px;
  --border-radius: 50px;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border-radius: var(--border-radius);
  overflow: hidden;
  z-index: 2;
}
.header-toolbar .header-toolbar__export-preparing-button-spinner::before,
.header-toolbar .header-toolbar__export-preparing-button-mobile-spinner::before {
  content: "";
  display: block;
  background: conic-gradient(var(--essential-primary) 0turn 0.125turn, transparent 0.125turn 0.25turn);
  position: absolute;
  width: 120%;
  padding-bottom: 120%;
  left: 50%;
  top: 50%;
  margin-left: -60%;
  margin-top: -60%;
  border-radius: 100%;
  z-index: 1;
  animation: spin 5s linear infinite;
}
.header-toolbar .header-toolbar__export-preparing-button-spinner::after,
.header-toolbar .header-toolbar__export-preparing-button-mobile-spinner::after {
  content: "";
  position: absolute;
  inset: var(--border-size);
  background: var(--background-elevated-base);
  z-index: 2;
  border-radius: var(--border-radius);
}
.header-toolbar .header-toolbar__export-preparing-button-mobile-spinner::before {
  width: 110%;
  height: 110%;
  margin-left: -55%;
  margin-top: -55%;
}

.main-menu {
  display: flex;
}
.main-menu .main-menu__desktop {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.main-menu .main-menu__desktop .main-menu__item {
  font-family: var(--font-family);
  font-weight: 500;
  padding: 15px 16px;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -0.1px;
  color: var(--text-base);
  flex-shrink: 0;
  border: none;
  background: none;
}
@media (max-width: 1023px) {
  .main-menu .main-menu__desktop .main-menu__item {
    padding: 15px 8px;
  }
}
.main-menu .main-menu__desktop .main-menu__item:hover, .main-menu .main-menu__desktop .main-menu__item.studio-focus-visible {
  background-color: var(--background-tinted-base);
  color: inherit;
}
@media (max-width: 1023px) {
  .main-menu .main-menu__desktop {
    display: none;
  }
}
.main-menu .main-menu__mobile {
  display: none;
}
@media (max-width: 1023px) {
  .main-menu .main-menu__mobile {
    display: flex;
  }
}
.main-menu .main-menu__mobile-edit-menu-button,
.main-menu .main-menu__mobile-profile-menu-button {
  margin: 0 3px;
}
.main-menu .main-menu__mobile-edit-menu-button.edit-menu-button-active .soundtrap-icon {
  color: var(--essential-primary);
}

.effects-editor-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.effects-editor-view__top {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-small);
}
.effects-editor-view__bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.floating-add-track {
  display: flex;
  font-size: 25px;
  background-color: var(--background-base);
  border: none;
  position: fixed;
  right: 16px;
  bottom: 32px;
  padding: var(--space-small-1);
  border-radius: 34px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  color: var(--text-base);
}

.playable-waveform-preview {
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  stroke-width: 2;
}
@keyframes rotate-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.playable-waveform-preview .ic-refresh {
  animation: rotate-spinner 2s infinite;
  transform-origin: center;
  animation-timing-function: linear;
}
.playable-waveform-preview .btn {
  font-size: 16px;
}
.playable-waveform-preview.waveform-inverted-theme {
  background: var(--background-base);
  color: var(--text-base);
}
.playable-waveform-preview.waveform-inverted-theme button.st-button.button_circular {
  background: var(--background-base);
  color: var(--text-base);
}
.playable-waveform-preview.waveform-base-theme {
  color: var(--text-base);
  background: var(--background-base);
  border: 1px solid var(--essential-subdued);
}
.playable-waveform-preview.waveform-base-theme button.st-button.button_circular {
  color: var(--text-base);
  background: var(--background-tinted-base);
}
.playable-waveform-preview button.st-button.button_circular {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin-right: 10px;
}
.playable-waveform-preview .waveform-click-area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.playable-waveform-preview .waveform-click-area .seek-handle {
  position: absolute;
  height: 100%;
  width: 0;
  top: 0;
  left: 0;
}
.playable-waveform-preview .preview-waveform {
  width: 100%;
  stroke: var(--decorative-subdued);
}
.playable-waveform-preview .played-stripes {
  stroke: #AA43FA;
}

.playable-waveform-preview.loaded .waveform-click-area {
  cursor: pointer;
}

.live-region-playable-waveform {
  top: 0;
  left: -2px;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.advanced-change-name-dialog_form {
  display: flex;
  align-items: center;
  justify-content: left;
  margin: 25px 0px;
  gap: 10px;
}
.advanced-change-name-dialog .footer {
  justify-content: right;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--decorative-subdued);
  padding: 25px 0px 0px;
}

.advanced-change-name-dialog.basicdialog .inner {
  text-align: left;
}

.de-esser-gui {
  height: 90%;
  width: 100%;
  margin-top: 30px;
  font-size: 11px;
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.de-esser-gui .meter {
  position: absolute;
  margin: auto;
  top: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  background: none;
}
.de-esser-gui .meter .mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--decorative-subdued);
}
.de-esser-gui .meter .mark.on {
  background: var(--essential-primary);
}
.de-esser-gui .visualization-area {
  position: relative;
  width: 100%;
  height: 106px;
  margin-top: 32px;
  border-bottom: solid 1px var(--decorative-subdued);
}
.de-esser-gui .visualization-area .band-container {
  position: relative;
  margin: auto;
}
.de-esser-gui .visualization-area .band-container .band {
  position: absolute;
  height: 100%;
  width: 30px;
  top: 0;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(17, 109, 49, 0.6) 0%, rgba(17, 109, 49, 0) 100%);
}
.de-esser-gui .visualization-area .band-container .band .band-foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #116D31;
}
.de-esser-gui .slider-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.de-esser-gui .slider-area .label-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.de-esser-gui .slider-area:hover .frequency-value, .de-esser-gui .slider-area:focus-within .frequency-value {
  opacity: 1;
}
.de-esser-gui .slider-area .frequency-label {
  margin: 0;
}
.de-esser-gui .slider-area .frequency-value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}

.st-slider-container {
  width: 100%;
  height: 100%;
}

.st-slider {
  --slider-bar-weight: 2px;
  --slider-progress: 25%;
  --slider-progress-color: var(--background-base);
  --slider-thumb-color: var(--background-base);
  --slider-thumb-ring-rgb: 99, 99, 99;
  --slider-thumb-size: 13px;
  appearance: none;
  width: 100%;
  height: var(--slider-bar-weight);
  padding: 8px 0;
  margin: 0;
  background: none;
}
.st-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: calc(-1 * (var(--slider-thumb-size) - var(--slider-bar-weight)) / 2);
  border: 1px solid var(--background-base);
  border-radius: 50%;
  background: var(--slider-thumb-color);
  box-shadow: 0 0 0 0 rgba(var(--slider-thumb-ring-rgb), 0.2);
  transition: box-shadow ease-in 0.1s;
}
.st-slider:disabled::-webkit-slider-thumb {
  cursor: default;
}
.st-slider::-moz-range-thumb {
  cursor: pointer;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: calc(-1 * (var(--slider-thumb-size) - var(--slider-bar-weight)) / 2);
  border: 1px solid var(--background-base);
  border-radius: 50%;
  background: var(--slider-thumb-color);
  box-shadow: 0 0 0 0 rgba(var(--slider-thumb-ring-rgb), 0.2);
  transition: box-shadow ease-in 0.1s;
}
.st-slider:disabled::-moz-range-thumb {
  cursor: default;
}
.st-slider:active::-webkit-slider-thumb, .st-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(var(--slider-thumb-ring-rgb), 0.2);
}
.st-slider::-webkit-slider-runnable-track {
  height: var(--slider-bar-weight);
  background: var(--decorative-subdued);
  border-radius: calc(var(--slider-bar-weight) / 2);
}
.st-slider::-moz-range-track {
  height: var(--slider-bar-weight);
  background: var(--decorative-subdued);
}
.st-slider.with-progress::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--slider-progress-color) var(--slider-progress), var(--decorative-subdued) var(--slider-progress));
}
.st-slider.with-progress::-moz-range-track {
  background: linear-gradient(to right, var(--slider-progress-color) var(--slider-progress), var(--decorative-subdued) var(--slider-progress));
}
.st-slider.st-slider--thick {
  --slider-bar-weight: 4px;
}
.st-slider.st-slider--extra-thick {
  --slider-thumb-size: 16px;
  --slider-bar-weight: 8px;
}
.st-slider.synth84-theme {
  position: relative;
  width: 110px;
  --slider-progress-color: #c3277a;
  height: var(--slider-bar-weight);
  padding: 8px 0;
}
.st-slider.synth84-theme::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 28px;
  width: 12px;
  border: 1px solid var(--essential-subdued);
  background: linear-gradient(90deg, var(--background-base) 0, var(--background-base) 40%, var(--text-base) 40%, var(--text-base) 60%, var(--background-base) 60%, var(--background-base) 100%);
  box-shadow: 0 1px 2px var(--default-box-shadow-color);
  border-radius: 2px;
  margin: -13px 0;
}
.st-slider.synth84-theme::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: var(--slider-bar-weight);
}
.st-slider.st-slider.synth84-theme::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  pointer-events: auto;
}
.st-slider.contrasting-theme {
  --slider-progress-color: var(--essential-subdued);
  --slider-thumb-color: var(--essential-base);
}
.st-slider:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.st-curved-slider-container {
  --curve-top-color: var(--decorative-subdued);
  --curve-bottom-color: var(--essential-primary);
  cursor: default;
}
.st-curved-slider-container .st-curved-slider {
  position: relative;
}
.st-curved-slider-container .st-curved-slider .st-curved-slider-svg {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  overflow: visible;
}
.st-curved-slider-container .st-curved-slider .thumb-visual {
  position: absolute;
  cursor: ns-resize;
  background: var(--essential-primary);
  border: 1px solid var(--background-base);
  border-radius: 50%;
  transition: box-shadow ease-in 0.1s;
}
.st-light-theme .st-curved-slider-container:hover .thumb-visual, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .st-curved-slider-container:hover .thumb-visual, .synth84enginegui .container .control-container .control-area .button-wrapper button .st-curved-slider-container:hover .thumb-visual, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .st-curved-slider-container:hover .thumb-visual {
  box-shadow: 0 0 0 4px rgba(67, 8, 119, 0.2);
}
.st-dark-theme .st-curved-slider-container:hover .thumb-visual, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-curved-slider-container:hover .thumb-visual, .sampler-crossfade-handle .st-curved-slider-container:hover .thumb-visual, .sampler-crossfade-handle-chamfer .st-curved-slider-container:hover .thumb-visual, .sampler-crossfade-icon .st-curved-slider-container:hover .thumb-visual {
  box-shadow: 0 0 0 4px rgba(155, 122, 231, 0.2);
}

.soundpackcreator-root {
  margin-top: 20px;
}

.soundpack-manager {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 400px;
  border: 1px solid var(--decorative-subdued);
  border-radius: 10px;
  padding: 10px;
}
.soundpack-manager h2 {
  font-size: 16px;
  margin-top: 10px;
  text-decoration: underline;
  color: var(--text-primary);
}
.soundpack-manager .input {
  width: 100%;
}
.soundpack-manager .section {
  margin: 15px 0px;
  width: 100%;
}
.soundpack-manager .search-results {
  margin-top: 20px;
}
.soundpack-manager .search-results_result-button {
  background: none;
  border: none;
}
.soundpack-manager .selected-soundpackname {
  color: var(--text-spotlight);
  margin-left: 5px;
}
.soundpack-manager .divider {
  display: block;
  border-top: 1px solid var(--decorative-subdued);
  height: 1px;
  width: 100%;
}
.soundpack-manager .form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chords-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-small);
  min-height: 0;
  flex-grow: 1;
}
.chords-panel h3 {
  margin: 0;
}
.chords-panel .chord-player {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--space-small);
  min-height: 0;
  justify-content: center;
  max-height: 208px;
}
.chords-panel .chord-area {
  display: flex;
  flex-direction: row;
  gap: var(--space-small);
  padding: var(--space-small);
  flex-grow: 1;
  max-width: 520px;
}
.chords-panel .chord-area:has(.chord-progression-section) {
  max-width: 832px;
}
.chords-panel .chord-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  flex-grow: 1;
}
.chords-panel .chord-progression-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  overflow-y: auto;
}
.chords-panel .chord-progression-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
  padding-right: var(--space-tiny-1);
}
body.pl-mobile.ff-handheld .chords-panel .chord-player-wrapper {
  flex: 1;
}
body.pl-mobile.ff-handheld .chords-panel .chord-player {
  flex: 1;
  flex-direction: column;
  max-height: 350px;
}
body.pl-mobile.ff-handheld .chords-panel .chord-area {
  max-width: unset;
  flex-direction: column;
}
body.pl-mobile.ff-handheld .chords-panel .chord-playing-styles-dropdown {
  margin-top: var(--space-tiny-1);
  display: flex;
  flex-direction: column;
}
body.pl-mobile.ff-handheld .chords-panel .chord-playing-styles-dropdown .chord-playing-styles-dropdown__heading {
  display: flex;
  gap: var(--space-tiny);
  margin-bottom: var(--space-tiny);
}
body.pl-mobile.ff-handheld .chords-panel .chord-playing-styles-dropdown .chord-playing-styles-dropdown__icon {
  fill: var(--text-base);
  width: 1em;
  display: flex;
  align-items: center;
}
body.pl-mobile.ff-handheld .chords-panel .chord-playing-styles {
  display: none;
}
body.pl-mobile.ff-handheld .chords-panel .chord-sets-dropdown {
  flex-direction: column;
  align-items: flex-start;
}
body.pl-mobile.ff-handheld .chords-panel .chord-sets-dropdown__heading {
  display: flex;
  gap: var(--space-tiny);
  margin-bottom: var(--space-tiny);
}
body.pl-mobile.ff-handheld .chords-panel .chord-sets-dropdown__title {
  display: inline;
}
body.pl-mobile.ff-handheld .chords-panel .st-dropdown-button-layout {
  padding: 0 5px 0 0;
}

.chords-2-uix-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex-grow: 1;
}

.chord-player-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  justify-content: center;
}

.chord-player__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-tiny);
  flex-grow: 1;
}

.chord-pad {
  color: var(--decorative-base);
  background-color: var(--background-base);
  border-radius: 4px;
  font-size: 21px;
  display: flex;
  position: relative;
}

.chord-pad__chord-button {
  border-radius: 4px;
  position: absolute;
  inset: 0;
  padding: 0;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--background-tinted-highlight);
  border: 1px solid var(--decorative-subdued);
  /* Transition only on mouse leave */
  transition: background-color 0.2s ease;
}
.chord-pad__chord-button span {
  position: absolute;
  z-index: 1;
}
.chord-pad__chord-button:hover {
  transition: none;
  background-color: var(--background-tinted-base);
}

.is-playing .chord-pad__chord-button:hover {
  transition: none;
  background-color: var(--background-highlight);
}

.chord-panel__midi-notes {
  color: var(--decorative-subdued);
  pointer-events: none;
  z-index: 0;
}

.chord-pad__midi-notes {
  opacity: 0;
  position: absolute;
  top: 7px;
  left: 0;
}

.is-playing .chord-pad__midi-notes {
  opacity: 1;
  animation: sweepLeft var(--chord-duration-ms) linear forwards;
}

@keyframes sweepLeft {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(-150%);
  }
}
.chord-pad__hotkey-button {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 16px;
  height: 14px;
  border-radius: 4px;
  --border-color: var(--essential-subdued);
  background-color: transparent;
  color: var(--text-subdued);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 0 var(--border-color);
  transition: all 0.2s ease;
  pointer-events: none;
}
.chord-pad__hotkey-button span {
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 1px;
  text-transform: uppercase;
}
.chord-pad__hotkey-button.active {
  transform: translateY(2px);
  box-shadow: 0 0 0 0 var(--essential-subdued);
}

.is-playing .chord-pad__hotkey-button {
  --border-color: var(--decorative-subdued);
}

.chord-pad__add-button {
  position: absolute;
  right: 0;
  bottom: 0;
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  /* The icon */
}
.chord-pad__add-button.studio-focus-visible {
  border-radius: 4px;
}
.chord-pad__add-button span {
  font-size: 12px;
  color: var(--text-base);
  padding: 5px;
  border-radius: 20px;
}
.chord-pad__add-button:hover span {
  background-color: var(--background-tinted-base);
}

.chord-progression-pad {
  position: relative;
  color: var(--decorative-base);
  background-color: var(--background-base);
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  overflow: hidden;
}

.is-playing .chord-progression-pad__chord-progression-button {
  color: var(--text-base);
  background-color: var(--background-highlight);
}

.chord-progression-pad__midi-notes {
  position: absolute;
  top: 4px;
  left: 0;
  opacity: 0;
}

.is-playing .chord-progression-pad__midi-notes {
  opacity: 1;
  animation: progressionSweepLeft var(--chord-progression-duration-ms) linear forwards;
}

@keyframes progressionSweepLeft {
  0% {
    transform: translateX(245px);
  }
  100% {
    transform: translateX(-100%);
  }
}
.chord-progression-pad__chord-progression-button {
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  padding: 0;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  background-color: var(--background-tinted-highlight);
  border: 1px solid var(--decorative-subdued);
  padding-right: 30px;
  /* Transition only on mouse leave */
  transition: background-color 0.2s ease;
}
.chord-progression-pad__chord-progression-button .chord-progression-pad__chord-progression-item {
  position: relative;
  z-index: 1;
  width: 61px;
}
.chord-progression-pad__chord-progression-button.studio-focus-visible {
  outline-offset: -2px;
}
.chord-progression-pad__chord-progression-button:hover {
  transition: none;
  background-color: var(--background-tinted-base);
}

.is-playing .chord-progression-pad__add-button {
  border-left: 1px solid var(--decorative-subdued);
}

.chord-progression-pad__add-button {
  position: absolute;
  top: 4px;
  right: 0;
  border: none;
  border-left: 1px solid var(--background-tinted-base);
  appearance: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  z-index: 1;
  /* The icon */
}
.chord-progression-pad__add-button.studio-focus-visible {
  border-radius: 4px;
  outline-offset: -2px;
}
.chord-progression-pad__add-button span {
  font-size: 12px;
  color: var(--text-base);
  padding: 5px;
  border-radius: 20px;
}
.chord-progression-pad__add-button:hover span {
  background-color: var(--background-tinted-base);
}

.chord-playing-styles {
  display: flex;
  gap: var(--space-tiny);
  flex-direction: column;
  padding: var(--space-small);
  padding-left: 0;
  margin: 0;
}
.chord-playing-styles .chord-playing-styles__scroll-wrap {
  padding: 0 var(--space-tiny-1) 0 var(--space-small);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.chord-playing-styles h3 {
  margin-bottom: var(--space-small);
  display: flex;
  gap: 8px;
  align-items: center;
}
.chord-playing-styles .chord-playing-styles__icon {
  fill: var(--text-base);
  width: 1em;
  display: flex;
  align-items: center;
}
.chord-playing-styles .chord-playing-styles__section-list {
  list-style: none;
  padding: 0 0 var(--space-small);
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
  margin: 0;
}
.chord-playing-styles .chord-playing-styles__section ul {
  overflow: unset;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: var(--space-tiny);
}
.chord-playing-styles .chord-playing-styles__section .chord-playing-styles__section-title {
  background-color: var(--background-base);
  padding-bottom: var(--space-tiny);
  position: sticky;
  top: 0;
  margin: 0;
  color: var(--text-subdued);
}
.chord-playing-styles .playing-style-button {
  width: 100%;
  text-align: left;
  padding: 6px var(--space-tiny-1);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-subdued);
  background: var(--background-base);
  border-radius: 4px;
  border: 1px solid var(--essential-subdued);
  /* Transition only on mouse leave */
  transition: background-color 0.2s ease;
}
.chord-playing-styles .playing-style-button:hover {
  transition: none;
  background: var(--background-highlight);
}
.chord-playing-styles .playing-style-button.studio-focus-visible {
  outline-offset: 1px;
}

.chord-playing-styles-dropdown {
  display: none;
  align-items: center;
  width: fit-content;
}
.chord-playing-styles-dropdown .st-dropdown-button {
  height: inherit;
  border: none;
  /* Increase clickable area without increasing the size */
  --padding: var(--space-tiny);
  padding: var(--padding) 0;
  margin: calc(-1 * var(--padding)) 0;
}
.chord-playing-styles-dropdown .st-dropdown-button.studio-focus-visible {
  outline-offset: 1px;
}

.chord-sets-dropdown {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: fit-content;
}
.chord-sets-dropdown .st-dropdown-value {
  /* Override default dropdown styles to align with st-label-standard */
  font-weight: 500;
}
.chord-sets-dropdown .chord-sets-dropdown__title {
  display: none;
}
.chord-sets-dropdown .chord-sets-dropdown__heading {
  display: flex;
  align-items: center;
}
.chord-sets-dropdown .chord-sets-dropdown__icon svg {
  fill: var(--text-base);
  width: 1em;
  display: flex;
  align-items: center;
}
.chord-sets-dropdown .st-dropdown-button {
  height: inherit;
  border: none;
  /* Increse clickable area without increasing the size */
  --padding: var(--space-tiny);
  padding: var(--padding) 0;
  margin: calc(-1 * var(--padding)) 0;
}
.chord-sets-dropdown .st-dropdown-button.studio-focus-visible {
  outline-offset: 1px;
}

/* Chord picker stories */
.single-chord-pad-story {
  display: grid;
  width: 120px;
  height: 60px;
}

.multiple-chord-pad-story {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(2, 60px);
}

.chord-pad__drag-element {
  color: var(--text-base);
  /* Make the background less transparent by stacking it on top of a solid color
     Drag ghost elemts automatically get lowered opacity.*/
  /* stylelint-disable */
  background: linear-gradient(to right, var(--background-tinted-base), var(--background-tinted-base)), linear-gradient(to right, var(--background-base), var(--background-base));
  /* stylelint-enable */
  border-radius: 4px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: var(--space-tiny) var(--space-small);
  z-index: -1;
  pointer-events: none;
}

.chord-progression-pad__drag-element {
  color: var(--text-base);
  /* Make the background less transparent by stacking it on top of a solid color
     Drag ghost elemts automatically get lowered opacity.*/
  /* stylelint-disable */
  background: linear-gradient(to right, var(--background-tinted-base), var(--background-tinted-base)), linear-gradient(to right, var(--background-base), var(--background-base));
  /* stylelint-enable */
  padding: var(--space-tiny);
  border-radius: 4px;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.chords-panel-box {
  border: 1px solid var(--decorative-subdued, #dedede);
  --shadow-color: 0deg 0% 0%;
  box-shadow: 0.4px 0.6px 0.7px hsl(var(--shadow-color)/0.12), 1.7px 2.3px 3px -1.5px hsl(var(--shadow-color)/0.1), 6.9px 9.5px 12.2px -3.1px hsl(var(--shadow-color)/0.05);
  border-radius: 4px;
}

.st-dark-theme .chords-panel-box, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .chords-panel-box, .sampler-crossfade-handle .chords-panel-box, .sampler-crossfade-handle-chamfer .chords-panel-box, .sampler-crossfade-icon .chords-panel-box {
  box-shadow: 0px 0px 0 1px rgba(0, 0, 0, 0.2), 0px 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0px 0.3px 0.3px hsl(var(--shadow-color)/0.21), 0px 1.6px 1.6px -1.7px hsl(var(--shadow-color)/0.17), -0.2px 7.1px 7px -3.4px hsl(var(--shadow-color)/0.14);
}

.doubler-gui__slider-area {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
}
.doubler-gui__value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}
.doubler-gui .st-label-small.toggle-region {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.doubler-gui .st-label-small.toggle-region .st-toggle[aria-checked=true] {
  --st-toggle-pill-background-color: var(--essential-primary);
}
.doubler-gui__label-wrapper:hover .doubler-gui__value, .doubler-gui__label-wrapper:focus-within .doubler-gui__value {
  opacity: 1;
}
.doubler-gui__label-group {
  display: flex;
  justify-content: space-between;
}
.doubler-gui__circle-container {
  margin-top: 45px;
  position: relative;
  height: 90px;
}
.doubler-gui .circle {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -40px;
}
.doubler-gui .circle path {
  fill: none;
  stroke: var(--decorative-subdued);
  stroke-width: 3;
}
.doubler-gui .st-label-small {
  line-height: 26px;
  margin: 0;
}
.doubler-gui button {
  padding-block: 1px;
  padding-inline: 6px;
}

.instant-sidechain-gui {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.instant-sidechain-gui__inner {
  margin-top: 40px;
  width: 100%;
  padding: var(--space-tiny-1) var(--space-small);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-nano);
  text-align: left;
}
.instant-sidechain-gui__label-value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}
.instant-sidechain-gui__label-row {
  display: flex;
  justify-content: space-between;
}
.instant-sidechain-gui__label {
  margin: 0;
}
.instant-sidechain-gui__label:focus-within .instant-sidechain-gui__label-value, .instant-sidechain-gui__label:hover .instant-sidechain-gui__label-value {
  opacity: 1;
}
.instant-sidechain-gui__curve-container {
  margin-top: var(--space-nano);
  flex-grow: 1;
  min-height: 0;
  position: relative;
}
.instant-sidechain-gui__curve-svg {
  max-height: 100%;
  display: block;
  margin: 0 auto;
  cursor: ew-resize;
}
.instant-sidechain-gui__curve-svg path {
  stroke: var(--decorative-subdued);
  stroke-width: 1;
}

.vocal-clarity-gui {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  --side-controls-margin: -3px;
}
.vocal-clarity-gui label {
  font-weight: normal;
  font-size: 11px;
}
.vocal-clarity-gui__inner {
  margin-top: 40px;
  width: 100%;
  padding: var(--space-tiny-1) var(--space-small);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--space-nano);
  text-align: left;
}
.vocal-clarity-gui__inner__knob1 {
  grid-area: k1;
}
.vocal-clarity-gui__inner__knob2 {
  grid-area: k2;
}
.vocal-clarity-gui__inner__knob3 {
  grid-area: k3;
}
.vocal-clarity-gui__main-controls-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vocal-clarity-gui__main-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.vocal-clarity-gui__left-control {
  margin-right: var(--side-controls-margin);
}
.vocal-clarity-gui__right-control {
  margin-left: var(--side-controls-margin);
}
.vocal-clarity-gui__control-labels {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}
.vocal-clarity-gui .vocal-clarity-visualization {
  stroke: var(--decorative-subdued);
  fill: none;
}
.vocal-clarity-gui__voice-type-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.vocal-clarity-gui__voice-type-wrapper .st-simple-select {
  width: 74px;
}

.noise-gate-gui {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.noise-gate-gui__inner {
  margin-top: 50px;
  width: 100%;
  padding: var(--space-tiny-1) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.noise-gate-gui__inner label {
  font-weight: normal;
  font-size: 11px;
}
.noise-gate-gui__inner .threshold-area {
  position: relative;
  width: 100%;
}
.noise-gate-gui__inner .threshold-area .threshold-background {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='155' height='76' fill='none'><path fill='%23DB5CE0' d='M0 57.233a1.5 1.5 0 0 1 3 0V76H0zM8 28.86a1.5 1.5 0 0 1 3 0V76H8zM16 35.953a1.5 1.5 0 0 1 3 0V76h-3zM40 43.047a1.5 1.5 0 1 1 3 0V76h-3zM88 36.967a1.5 1.5 0 1 1 3 0V76h-3zM32 26.833a1.5 1.5 0 0 1 3 0V76h-3zM96 32.913a1.5 1.5 0 0 1 3 0V76h-3zM128 32.913a1.5 1.5 0 0 1 3 0V76h-3zM56 12.647a1.5 1.5 0 1 1 3 0V76h-3zM112 12.647a1.5 1.5 0 0 1 3 0V76h-3zM64 7.58a1.5 1.5 0 0 1 3 0V76h-3zM80 7.58a1.5 1.5 0 0 1 3 0V76h-3zM72 1.5a1.5 1.5 0 0 1 3 0V76h-3zM48 17.713a1.5 1.5 0 0 1 3 0V76h-3zM152 48.113a1.5 1.5 0 0 1 3 0V76h-3zM136 17.713a1.5 1.5 0 0 1 3 0V76h-3zM104 17.713a1.5 1.5 0 0 1 3 0V76h-3zM120 17.713a1.5 1.5 0 0 1 3 0V76h-3zM144 22.78a1.5 1.5 0 0 1 3 0V76h-3zM24 46.087a1.5 1.5 0 1 1 3 0V76h-3z'/></svg>");
  background-repeat: no-repeat;
  background-position: center bottom;
  margin: auto;
}
.noise-gate-gui__inner .threshold-area .threshold-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.st-light-theme .noise-gate-gui__inner .threshold-area .threshold-gradient, .horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .noise-gate-gui__inner .threshold-area .threshold-gradient, .synth84enginegui .container .control-container .control-area .button-wrapper button .noise-gate-gui__inner .threshold-area .threshold-gradient, .synth84enginegui .container .control-container .control-area .button-wrapper .button-pressed .noise-gate-gui__inner .threshold-area .threshold-gradient {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgb(255, 255, 255));
}
.st-dark-theme .noise-gate-gui__inner .threshold-area .threshold-gradient, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .noise-gate-gui__inner .threshold-area .threshold-gradient, .sampler-crossfade-handle .noise-gate-gui__inner .threshold-area .threshold-gradient, .sampler-crossfade-handle-chamfer .noise-gate-gui__inner .threshold-area .threshold-gradient, .sampler-crossfade-icon .noise-gate-gui__inner .threshold-area .threshold-gradient {
  background: linear-gradient(to bottom, rgba(45, 44, 49, 0.9), rgb(45, 44, 49));
}
.noise-gate-gui__inner .knob-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 26px;
}
.noise-gate-gui__inner .knob-area .attack-control, .noise-gate-gui__inner .knob-area .release-control, .noise-gate-gui__inner .knob-area .hold-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.bitcrusher {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.bitcrusher__inner {
  margin-top: 50px;
  width: 100%;
  padding: var(--space-tiny-1) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bitcrusher__label-group {
  display: flex;
  justify-content: space-between;
}
.bitcrusher__label-wrapper:hover .bitcrusher__value, .bitcrusher__label-wrapper:focus-within .bitcrusher__value {
  opacity: 1;
}
.bitcrusher__slider-area {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
}
.bitcrusher__value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}
.bitcrusher__curve-container {
  margin-top: var(--space-nano);
  flex-grow: 1;
  min-height: 0;
  position: relative;
}
.bitcrusher__curve-svg {
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
.bitcrusher__curve-svg path {
  stroke: var(--decorative-subdued);
  stroke-width: 1.5;
}

.threshold-control {
  position: absolute;
  width: 100%;
  bottom: 60%;
  left: 0;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.threshold-control .threshold-drag-area {
  width: 100%;
  height: 30px;
  position: relative;
  cursor: ns-resize;
}
.threshold-control .threshold-bar {
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--essential-base);
}
.threshold-control .threshold-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--background-base);
  outline: 2px solid white;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.threshold-control .threshold-thumb span {
  right: unset;
}
.threshold-control .threshold-label, .threshold-control .threshold-value {
  position: absolute;
  font-weight: normal;
  margin: 0;
}
.threshold-control .threshold-label.on-top, .threshold-control .threshold-value.on-top {
  transform: translateY(-60%);
}
.threshold-control .threshold-label.on-bottom, .threshold-control .threshold-value.on-bottom {
  transform: translateY(60%);
}
.threshold-control .threshold-label {
  left: 8px;
}
.threshold-control .threshold-value {
  right: 8px;
}

.rotary-pro-gui {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  --side-controls-margin: -3px;
}
.rotary-pro-gui__label-value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}
.rotary-pro-gui__label-row {
  display: flex;
  justify-content: space-between;
}
.rotary-pro-gui__label {
  margin: 0;
}
.rotary-pro-gui__label:focus-within .rotary-pro-gui__label-value, .rotary-pro-gui__label:hover .rotary-pro-gui__label-value {
  opacity: 1;
}
.rotary-pro-gui__inner {
  margin-top: 40px;
  width: 100%;
  padding: 0 var(--space-small) var(--space-tiny-1);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--space-nano);
  text-align: left;
}
.rotary-pro-gui__visualization-container {
  height: 80px;
}
.rotary-pro-gui__main-controls-wrapper {
  padding-top: var(--space-nano);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rotary-pro-gui__main-controls {
  align-items: flex-start;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
}
.rotary-pro-gui__main-controls__knobs {
  padding-top: var(--space-nano);
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 20px;
  display: flex;
  flex-direction: row;
}

.subscription-spotlight {
  margin-top: var(--space-medium);
  display: flex;
  width: 100%;
}
.subscription-spotlight.spotlight-vertical {
  flex-direction: column;
  gap: var(--space-tiny-1);
  align-items: start;
  justify-content: start;
}
.subscription-spotlight.spotlight-horizontal {
  flex-direction: row;
  gap: var(--space-medium);
  align-items: center;
  justify-content: center;
}
.subscription-spotlight .spotlight-text {
  margin: 0;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  color: var(--essential-spotlight);
}
.subscription-spotlight .spotlight-link {
  font-size: 13px;
  font-weight: 500;
}

.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.filter__inner {
  margin-top: 40px;
  width: 100%;
  padding: var(--space-tiny-1) var(--space-small);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-nano);
  text-align: left;
}
.filter__main-controls {
  display: flex;
  justify-content: center;
  padding-top: 40px;
  gap: 20px;
}
.filter__low-cut-knob {
  transform: translateY(28px);
}

.monitoring-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.monitoring-button .monitoring-label {
  font-weight: normal;
  color: var(--text-base);
  margin: 0 4px 0 0;
}

.pitchshifter {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.pitchshifter__inner {
  width: 100%;
  margin-top: var(--space-large);
  padding: var(--space-tiny-1) var(--space-small);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: var(--space-tiny-1);
}
.pitchshifter__row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.pitchshifter__info-icon {
  font-size: 16px;
  position: absolute;
  bottom: var(--space-tiny-1);
  right: var(--space-tiny-1);
}

.reverb-pro-gui {
  display: flex;
  gap: var(--space-tiny-1);
  align-items: stretch;
  padding: var(--space-small);
  padding-top: var(--space-tiny);
}
.reverb-pro-gui__left-column, .reverb-pro-gui__right-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
}
.reverb-pro-gui__left-column {
  flex: 0.48;
}
.reverb-pro-gui__right-column {
  flex: 0.52;
}
.reverb-pro-gui__sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny-1);
  flex-grow: 1;
}
.reverb-pro-gui__knobs {
  display: flex;
  justify-content: space-between;
}
.reverb-pro-gui__knobs > * {
  min-width: 4em;
}
.reverb-pro-gui__visualisation {
  flex: 1;
  background-color: grey;
}
.reverb-pro-gui__container {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
.reverb-pro-gui__background-container {
  max-height: 100%;
  overflow: hidden;
  border-radius: 6px;
}
.reverb-pro-gui__background-image {
  width: 100%;
  height: 100%;
}
.reverb-pro-gui__square, .reverb-pro-gui__glow {
  position: absolute;
}
.reverb-pro-gui__square {
  will-change: transform;
}
.reverb-pro-gui__blob {
  position: absolute;
  min-height: 100%;
}
.reverb-pro-gui__blob1 {
  animation: blob1_rotation 60s linear infinite;
  will-change: transform;
}
.reverb-pro-gui__blob2 {
  animation: blob2_rotation 40s linear infinite backwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .reverb-pro-gui__blob {
    animation: none;
  }
}
@keyframes blob1_rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blob2_rotation {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.reverb-pro-gui-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 8px;
}
.reverb-pro-gui-preview .reverb-pro-image {
  width: 100%;
  aspect-ratio: 66/24;
}
.reverb-pro-gui-preview .reverb-pro-sliders {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.reverb-pro-gui-preview .reverb-pro-knobs {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.st-card-button {
  appearance: none;
  border: 0;
  padding: 0;
  background-color: transparent;
  text-align: left;
  display: block;
  white-space: normal;
}
.st-card-button:disabled {
  opacity: 0.5;
}
.st-card-button__inner {
  display: flex;
  gap: var(--space-tiny-1);
  border-radius: var(--space-tiny);
  border: 1px solid var(--decorative-subdued);
  padding: var(--space-tiny-1);
  align-items: flex-start;
  background-color: var(--background-elevated-base);
  transition: background-color 0.2s linear;
}
.st-card-button:hover .st-card-button__inner {
  background-color: var(--background-elevated-highlight);
}
.st-card-button__text-wrapper {
  flex: 1;
}
.st-card-button__icon-wrapper {
  position: relative;
  background-color: var(--background-base);
  border-radius: var(--space-tiny);
  padding: var(--space-tiny);
  width: 40px;
  height: 40px;
}
.st-card-button__icon-wrapper .svg-wrapper {
  display: block;
}
.st-card-button__icon {
  font-size: 24px;
  color: var(--text-base);
}
.st-card-button__mini-icon-wrapper {
  position: absolute;
  background-color: var(--background-base);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  right: -8px;
  top: -8px;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.st-card-button__mini-icon {
  font-size: 12px;
  color: var(--text-base);
}
.st-card-button__title {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-weight: 500;
  margin-bottom: var(--space-nano);
  display: flex;
  align-items: center;
  gap: var(--space-nano);
}
.st-card-button__title-text {
  flex: 1;
}
.st-card-button__arrow {
  font-size: var(--space-tiny-1);
  color: var(--text-base);
}
.st-card-button__description {
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.2px;
}

.st-card {
  appearance: none;
  border: 0;
  padding: 0;
  background-color: transparent;
  text-align: left;
  display: block;
  white-space: normal;
  margin-bottom: 12px;
}
.st-card__inner {
  display: flex;
  gap: var(--space-tiny-1);
  border-radius: var(--space-tiny);
  border: 1px solid var(--decorative-subdued);
  padding: var(--space-tiny-1);
  align-items: flex-start;
  background-color: var(--background-elevated-base);
}
.st-card__content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1;
  gap: var(--space-tiny-1);
  order: 2;
}
.st-card__icon-wrapper {
  position: relative;
  background-color: var(--background-base);
  border-radius: var(--space-tiny);
  padding: var(--space-tiny);
  width: 40px;
  height: 40px;
}
.st-card__icon-wrapper .svg-wrapper {
  display: block;
}
.st-card__icon {
  font-size: 24px;
  color: var(--text-base);
}
.st-card__mini-icon-wrapper {
  position: absolute;
  background-color: var(--background-base);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  right: -8px;
  top: -8px;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.st-card__mini-icon {
  font-size: 12px;
  color: var(--text-base);
}
.st-card__title {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-weight: 500;
  margin: 0;
  margin-bottom: var(--space-nano);
  display: flex;
  align-items: center;
  gap: var(--space-nano);
}
.st-card__description {
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.2px;
  margin: 0;
}
.st-card__cta-button {
  min-width: 70px;
}

.key-selector-menu button[aria-checked=true] {
  background-color: var(--background-base);
  color: var(--text-base);
  border: none;
}
.key-selector-menu button[aria-checked=false] {
  background-color: var(--background-base);
  color: var(--text-base);
  border: 1px solid var(--decorative-subdued);
}
.key-selector-menu__inner {
  padding: 6px 20px;
  min-width: 320px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  gap: 8px;
}
.key-selector-menu__mode-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.key-selector-menu__global-mode-row {
  margin-top: 5px;
}
.key-selector-menu__modes {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-inline-start: 0;
}
.key-selector-menu__modes .mode {
  margin-left: 4px;
  list-style-type: none;
}
.key-selector-menu__modes .mode .mode-radio {
  border-radius: 50px;
  padding: 4px 14px;
}
.key-selector-menu__clear {
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.key-selector-menu__clear .svg-wrapper {
  width: 16px;
  height: 16px;
}
.key-selector-menu__clear .svg-wrapper svg {
  fill: var(--text-base);
}
.key-selector-menu__apply {
  min-width: 75px;
}
.key-selector-menu__pitches {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-inline-start: 0;
  list-style-type: none;
}
.key-selector-menu__pitches .pitch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin: 4px;
  min-height: 32px;
  max-height: 32px;
  min-width: 32px;
  max-width: 32px;
}
.key-selector-menu__pitches .db {
  margin-left: 24px;
}
.key-selector-menu__pitches .fs {
  margin-left: 44px;
}

.export-menu-popup .inner {
  border-radius: var(--space-tiny-1);
  padding: 0;
}

.export-menu {
  padding: var(--space-medium);
  width: 340px;
  text-align: left;
}
.pl-mobile .export-menu {
  width: 100%;
  margin-top: var(--space-medium);
}
.export-menu__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-small);
  text-align: left;
  margin-bottom: var(--space-small-1);
}
.export-menu__title {
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  margin: 0;
}
.export-menu__export-type-toggle-container {
  align-self: center;
}
.export-menu__format {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-tiny-1);
}
.export-menu__format-header {
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  margin-bottom: var(--space-small);
}
.export-menu__format-options {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny-1);
}
.export-menu__mastering {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.export-menu__mastering-first-row {
  margin-bottom: 6px;
}
.export-menu__mastering-first-row .toggle-menu-item {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-base);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.export-menu__mastering-first-row .toggle-menu-item label {
  margin: 0;
}
.export-menu__mastering-heading {
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  color: var(--text-base);
}
.export-menu__mastering-second-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: var(--text-subdued);
  font-size: 13px;
  font-weight: 400;
}
.export-menu__mastering-description {
  color: var(--text-subdued);
  font-size: 13px;
  font-weight: 400;
}
.export-menu__mastering-description p {
  margin: 0;
}
.export-menu__submenu-header {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-nano);
  align-items: center;
  margin-bottom: var(--space-small-1);
}
.export-menu__submenu-title {
  order: 2;
}
.export-menu__submenu-return-button {
  transition: none;
  margin: -3px 0;
}
.export-menu__submenu-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-small);
}
.export-menu__submenu-content .st-tabs {
  margin: 0 auto;
}
.export-menu__warning {
  color: var(--essential-negative);
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.export-menu__warning-copy {
  margin-left: 10px;
}
.export-menu__submenu-apply-container {
  padding-top: var(--space-small);
}
.export-menu__submenu-apply-button {
  width: 100%;
  transition: none;
}
.export-menu__submenu-presets-radiogroup-heading {
  font-size: 13px;
  padding: 0;
  margin: 0;
  margin-bottom: var(--space-tiny);
  font-weight: 500;
  border: none;
  color: var(--text-base);
}
.export-menu__submenu-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-tiny);
  list-style: none;
  padding: 0;
  margin: 0;
}
.export-menu__submenu-preset {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  align-items: center;
}
.export-menu__submenu-preset .mastering-preset-image {
  margin: 0 auto;
}
.export-menu__submenu-preset:has(input[type=radio]:checked) .mastering-preset-image {
  --mastering-preset-border: var(--background-base);
  box-shadow: 0 0 0 1px var(--background-base), 0 0 0 3px var(--essential-primary);
}
.export-menu__submenu-preset-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-nano);
  cursor: pointer;
  margin: 0;
}
.export-menu__submenu-preset-label-text {
  order: 1;
}
.export-menu__submenu-preset-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--space-tiny);
  appearance: none;
  background: transparent;
  margin: 0 !important;
}

.export-mastering-summary {
  border-radius: var(--space-tiny-1);
  padding: var(--space-tiny-1);
  border: 1px solid var(--decorative-subdued);
  background: radial-gradient(100% 468.9% at 0% 100%, rgba(70, 98, 255, 0.16) 0%, rgba(161, 66, 255, 0.03) 100%);
}
.export-mastering-summary .new-ribbon {
  position: relative;
  top: 0;
  left: 0;
}
.export-mastering-summary .st-toggle {
  padding: 0;
}
.export-mastering-summary__heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-tiny-1);
}
.export-mastering-summary__heading {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-base);
  margin: 0;
  display: flex;
  gap: var(--space-tiny);
}
.export-mastering-summary__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.2s linear;
}
.export-mastering-summary.export-mastering-summary--disabled .export-mastering-summary__row {
  opacity: 0.4;
}
.export-mastering-summary__preset {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-tiny);
}
.export-mastering-summary__preset-name {
  margin: 0;
}
.export-mastering-summary__preset-info {
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  color: var(--text-base);
}
.export-mastering-summary__edit-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: flex-end;
  align-items: center;
  gap: var(--space-nano);
  border: none;
  background-color: var(--background-tinted-base);
  color: var(--text-base);
  border-radius: 99px;
  font-size: 13px;
  height: 24px;
  padding: 0 var(--space-tiny) 0 var(--space-tiny-1);
  transition: background-color 0.1s linear;
}
.export-mastering-summary__edit-button:hover {
  background-color: var(--background-tinted-highlight);
}
.export-mastering-summary__edit-button .soundtrap-icon {
  font-size: 10px;
  margin: 0;
}
.export-mastering-summary__edit-button .soundtrap-icon:last-child {
  margin-left: var(--space-nano);
}
.export-mastering-summary__edit-button[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.mastering-preset-image {
  --mastering-preset-border: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--space-tiny);
  background: linear-gradient(#131313, #131313) padding-box, var(--mastering-preset-border) border-box;
  border: 1px solid transparent;
}
.mastering-preset-image > img {
  border-radius: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

.project-preview-player {
  display: flex;
  align-items: center;
  gap: var(--space-nano);
}
.project-preview-player__play-button {
  font-size: 16px;
  background-color: var(--background-tinted-base);
  border: none;
  color: var(--text-base);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.1s linear;
}
.project-preview-player__play-button:hover {
  background-color: var(--background-tinted-highlight);
}
.project-preview-player__seekbar {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-tiny);
  flex: 1;
  padding-bottom: var(--space-nano);
}
.project-preview-player__seekbar-time {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  margin-top: -2px;
}

.download-card {
  position: relative;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--decorative-subdued);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: var(--space-tiny-1);
}
.download-card:hover {
  background-color: var(--background-elevated-highlight);
}
.download-card.--disabled {
  background-color: transparent;
}
.download-card__description-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.download-card__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  line-height: var(--space-small-1);
}
.download-card__paywall-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
  background-color: var(--background-elevated-base);
  color: var(--text-subdued);
  border-radius: 50%;
  width: var(--space-small-1);
  height: var(--space-small-1);
  text-align: center;
}
.download-card__paywall-icon .soundtrap-icon {
  font-size: var(--space-tiny-1);
}
.download-card__download-type {
  font-size: 15px;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
.download-card__best-quality {
  color: var(--text-base);
  background-color: var(--background-base);
  padding: 0 4px;
  font-size: 11px;
  border-radius: 4px;
}
.download-card__description {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 13px;
  color: var(--text-subdued);
  margin: 0;
}
.download-card__download-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.download-card__download-container .button_GP_L_inv {
  background-color: var(--background-base);
}
.download-card__download-container svg {
  fill: var(--text-base);
}
.download-card__download-container .--disabled {
  opacity: 0.5;
}
.download-card__button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-indent: -9999px;
  background-color: transparent;
  border: none;
  appearance: none;
}
.download-card__button[aria-disabled=true] {
  cursor: default;
}

.audio-classifier-results {
  max-height: 400px;
  overflow-y: auto;
}

.audio-classifier-results__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-classifier-results__item {
  padding: 8px 0;
}

.audio-classifier-results__timestamp-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-classifier-results__timestamp,
.audio-classifier-results__score-text {
  color: var(--text-subdued);
}

.audio-classifier-results__scores {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audio-classifier-results__score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.audio-classifier-results__score-bar {
  flex: 1;
  background: var(--primary-color);
  height: 20px;
  position: relative;
}

#loop-tab-soundtrap-originals-banner-uix-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#loop-tab-soundtrap-originals-banner-uix-root:has(.loop-tab-soundpacks-expanded) + .selectorbuttons {
  display: none;
}

.top-section:has(.loop-tab-soundpacks-expanded):not(:has(.loop-tab-detail-view)) ~ .results {
  display: none;
}

.loop-tab-soundpacks,
.loop-tab-soundpack-container,
.loop-tab-soundpack-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.looptab-originals {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-nano) var(--space-nano) var(--space-nano) 0;
}
.looptab-originals.loop-tab-soundpacks-expanded {
  padding-bottom: var(--space-tiny-1);
}
.looptab-originals h3 {
  margin: var(--space-tiny) 0;
}
.looptab-originals .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-nano);
}
.looptab-originals .header .looptab-originals-show-all-button {
  appearance: none;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  padding: var(--space-tiny) 0;
  gap: var(--space-nano);
}
.looptab-originals .header .looptab-originals-show-all-button .soundtrap-icon {
  margin-top: 1px;
}
.looptab-originals .header .looptab-originals-show-all-button:hover {
  color: var(--text-subdued);
}
.looptab-originals .looptab-originals-try-search-loop-button {
  appearance: none;
  background: transparent;
  border: none;
  padding: var(--space-tiny) 0;
  color: var(--text-primary);
}
.looptab-originals .looptab-originals-try-search-loop-button .soundtrap-icon {
  display: none;
}
.looptab-originals .sound-packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-tiny);
  row-gap: var(--space-small);
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: var(--space-nano);
  flex: 1 1 auto;
  margin-right: -15px;
}
.looptab-originals .sound-pack {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-nano);
  min-width: 0;
  background: transparent;
  border: none;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.looptab-originals .sound-pack .info {
  min-width: 0;
}
.looptab-originals .sound-pack .info .st-body-standard {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.looptab-originals .sound-pack .info .st-label-standard {
  color: var(--text-subdued);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.soundpack-tag-button-uix-root {
  display: none;
}

@media screen and (min-height: 645px) {
  .loop-tab-soundpacks-collapsed .sound-packs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-height: 645px) {
  .looptab-originals:not(.loop-tab-soundpacks-expanded) {
    display: none;
  }
  .soundpack-tag-button-uix-root {
    display: inline-block;
  }
  .top-section:has(.loop-tab-soundpacks-expanded) .soundpack-tag-button-uix-root {
    display: none;
  }
}
.loop-tab-soundpack-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-nano);
  padding: 0 0 var(--space-tiny);
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__artwork {
  flex: 0 0 140px;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  min-width: 0;
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__back-button {
  appearance: none;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  padding: var(--space-tiny) 0;
  gap: var(--space-nano);
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__back-button .soundtrap-icon {
  margin-top: 1px;
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__back-button:hover {
  color: var(--text-subdued);
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__content {
  display: grid;
  gap: var(--space-tiny-1);
  align-items: flex-start;
  grid-template-columns: 1fr 1.6fr;
}
.loop-tab-soundpack-details .loop-tab-soundpack-details__description {
  margin: 0;
}
@media screen and (max-height: 768px) {
  .loop-tab-soundpack-details .loop-tab-soundpack-details__content {
    display: grid;
    grid-template-columns: 0.5fr 1.6fr;
  }
  .loop-tab-soundpack-details .loop-tab-soundpack-details__description {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.soundpack-artwork {
  flex: 1;
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--background-tinted-base);
}
.soundpack-artwork:hover img {
  opacity: 0.75;
  transition: none;
}
.soundpack-artwork .play-button {
  opacity: 0;
  position: absolute;
  top: calc(50% - 18px);
  left: calc(50% - 18px);
  transform-origin: center;
  scale: 0.8;
  background-color: #ffffff;
  color: #2d2d2d;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.soundpack-artwork .play-button .ic-pause {
  margin-left: 0.5px;
}
.soundpack-artwork .play-button .ic-play {
  margin-left: 3px;
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.soundpack-artwork .play-button.loading {
  --border-size: 3px;
  --border-radius: 50px;
  border-radius: var(--border-radius);
  overflow: hidden;
  z-index: 2;
}
.soundpack-artwork .play-button.loading::before {
  content: "";
  display: block;
  background: conic-gradient(var(--essential-primary) 0turn 0.25turn, transparent 0.125turn 0.25turn);
  position: absolute;
  width: 120%;
  padding-bottom: 120%;
  left: 50%;
  top: 50%;
  margin-left: -60%;
  margin-top: -60%;
  border-radius: 100%;
  z-index: 1;
  animation: spin 1s linear infinite;
}
.soundpack-artwork .play-button.loading::after {
  content: "";
  position: absolute;
  inset: var(--border-size);
  background: #ffffff;
  z-index: 2;
  border-radius: var(--border-radius);
}
.soundpack-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  min-width: 0;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.studio-focus-visible .soundpack-artwork .play-button,
.soundpack-artwork:hover .play-button,
.soundpack-artwork.is-playing .play-button,
.soundpack-artwork .play-button.studio-focus-visible {
  opacity: 1;
  scale: 1;
  transition: opacity 0.1s ease, transform 0.2s ease, scale 0.4s ease;
}

.limiter-gui {
  margin-top: var(--space-large-2);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.limiter-gui__track {
  height: 176px;
  width: var(--space-nano);
  overflow: hidden;
  background-color: var(--decorative-subdued);
  border-radius: var(--space-nano);
}
.limiter-gui__meter {
  will-change: transform;
  height: 176px;
  width: var(--space-nano);
  border-radius: var(--space-nano);
  background-color: var(--essential-primary);
}
.limiter-gui__knobs {
  display: flex;
  flex-direction: column;
}
.limiter-gui__small-knob-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-small-1);
}

.transform-controls {
  border-radius: 12px;
  padding: var(--space-small);
  background: var(--background-elevated-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  overflow-y: auto;
}
.transform-controls .st-dialog-modal {
  box-shadow: none;
  border: none;
  filter: drop-shadow(0 0 1px var(--decorative-subdued)) drop-shadow(0 1px 4px var(--default-box-shadow-color));
}

.transform-controls__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding: var(--space-small);
  position: relative;
}
.transform-controls__inner svg {
  fill: var(--text-base);
  height: 16px;
  width: 16px;
}
.transform-controls__inner::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--background-elevated-base);
}

.transform-controls__header {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
}
.transform-controls__header .st-title-standard {
  margin-bottom: 2px;
}

.transform-controls__header-icon {
  height: 32px;
}

.transform-controls__close-button {
  padding: 0;
  border: none;
  appearance: none;
  background: transparent;
  color: var(--text-base);
  position: absolute;
  right: var(--space-tiny-1);
  top: var(--space-tiny-1);
}

.transform-controls__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-small-1);
}

.transform-controls__apply-button-wrapper {
  display: flex;
  justify-content: center;
}
.transform-controls__apply-button-wrapper button {
  min-width: inherit;
}

.arpeggiator-transform-controls__pattern {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
  flex-grow: 1;
}

.arpeggiator-transform-controls__pattern-buttons {
  display: flex;
  flex-direction: row;
  gap: var(--space-nano);
}
.arpeggiator-transform-controls__pattern-buttons button {
  padding: 0;
  border: none;
  appearance: none;
  background: transparent;
}
.arpeggiator-transform-controls__pattern-buttons button.selected-pattern rect {
  fill: var(--background-tinted-base);
}
.arpeggiator-transform-controls__pattern-buttons button svg {
  width: 32px;
  height: 32px;
}
.arpeggiator-transform-controls__pattern-buttons button svg rect {
  fill: var(--background-elevated-base);
  stroke: var(--decorative-subdued);
}
.arpeggiator-transform-controls__pattern-buttons button svg path {
  fill: var(--essential-base);
}

.arpeggiator-transform-controls__content {
  gap: var(--space-small);
}
.arpeggiator-transform-controls__content .transform-controls__apply-button-wrapper {
  margin-top: var(--space-tiny);
}

.arpeggiator-transform-controls__amount-label-group {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  margin-bottom: var(--space-tiny);
}

.arpeggiator-transform-controls__amount-value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}

.arpeggiator-transform-controls__amount-wrapper:hover .arpeggiator-transform-controls__amount-value,
.arpeggiator-transform-controls__amount-wrapper:focus-within .arpeggiator-transform-controls__amount-value {
  opacity: 1;
}

.humanize-transform-controls__intensity-wrapper {
  display: flex;
  flex-direction: column;
}

.humanize-transform-controls__intensity-label-group {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  margin-bottom: var(--space-tiny);
}

.change-rhythm-transform-controls__section ul {
  overflow: unset;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: var(--space-tiny);
  margin: 0;
}
.change-rhythm-transform-controls__section:not(:last-child) ul {
  margin-bottom: var(--space-tiny);
}
.change-rhythm-transform-controls__section .change-rhythm-transform-controls__section-title {
  background-color: var(--background-elevated-base);
  padding-bottom: var(--space-tiny);
  position: sticky;
  top: 0;
  margin: 0;
  color: var(--text-subdued);
}

.change-rhythm-transform-controls__rhythms-container {
  max-height: 170px;
  margin-right: calc(var(--space-nano) * -1);
  padding-right: var(--space-tiny);
  overflow-y: auto;
}

.change-rhythm-button {
  width: 100%;
  text-align: left;
  padding: 6px var(--space-tiny-1);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-subdued);
  background: var(--background-base);
  border-radius: 4px;
  border: 1px solid var(--essential-subdued);
  /* Transition only on mouse leave */
  transition: background-color 0.2s ease;
}
.change-rhythm-button:hover {
  transition: none;
  background: var(--background-highlight);
}
.change-rhythm-button.studio-focus-visible {
  outline-offset: 1px;
}

.strum-transform-controls__speed-label-group {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  margin-bottom: var(--space-tiny);
}

.change-length-transform-controls__length-wrapper {
  display: flex;
  flex-direction: column;
}

.change-length-transform-controls__length-label-group {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  margin-bottom: var(--space-tiny);
}

.change-length-transform-controls__length-value {
  opacity: 0;
  transition: ease-in-out 0.2s;
}

.change-length-transform-controls__length-wrapper:hover .change-length-transform-controls__length-value,
.change-length-transform-controls__length-wrapper:focus-within .change-length-transform-controls__length-value {
  opacity: 1;
}

.harmonizer-menu-item {
  position: relative;
}
.harmonizer-menu-item .new-ribbon {
  position: absolute;
  right: 32px;
  top: 12px;
}

.harmonizer-menu-paywalled-item {
  position: relative;
}
.harmonizer-menu-paywalled-item .paywall-icon {
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--background-elevated-highlight);
  position: absolute;
  right: 32px;
  top: 12px;
}
.harmonizer-menu-paywalled-item .paywall-icon svg {
  fill: var(--text-subdued);
  width: 10px;
  height: 10px;
}

.piano-roll-inspector {
  display: none;
}

.piano-roll-inspector-enabled .piano-roll-inspector {
  width: 240px;
  background-color: var(--background-elevated-base);
  border-left: 1px solid var(--decorative-subdued);
  height: 100%;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  position: relative;
}
.piano-roll-inspector-enabled .piano-roll-inspector__empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--space-tiny);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-small);
  background-color: var(--background-elevated-base);
  color: var(--text-subdued);
  z-index: 10;
  text-align: center;
  text-wrap-style: balance;
  text-wrap-mode: wrap;
}
.piano-roll-inspector-enabled .piano-roll-inspector-inner {
  width: 100%;
  padding: var(--space-small);
}
.piano-roll-inspector-enabled .piano-roll-inspector-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
}
.piano-roll-inspector-enabled .piano-roll-inspector__header {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
}
.piano-roll-inspector-enabled .piano-roll-inspector__non-chords-title {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
}
.piano-roll-inspector-enabled .piano-roll-inspector__chord-transforms {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
  margin-left: calc(-1 * var(--space-tiny));
  border-radius: 4px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__chord-transforms.has-applicable-transformers:hover {
  background-color: var(--background-elevated-highlight);
}
.piano-roll-inspector-enabled .piano-roll-inspector__chord-transforms__button {
  display: flex;
  align-items: center;
  border: none;
  appearance: none;
  background: none;
  padding: var(--space-nano) var(--space-nano) var(--space-nano) var(--space-tiny);
  gap: var(--space-nano);
}
.piano-roll-inspector-enabled .piano-roll-inspector__chord-transforms__button .soundtrap-icon {
  display: inline-flex;
  align-items: center;
  margin-top: 1px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__chord-transforms__button .soundtrap-icon.ic-music {
  margin-top: 1.5px;
  margin-right: 2px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__chord-transforms__button .soundtrap-icon.ic-chevron-double svg {
  width: 0.8em;
  height: 0.8em;
}
.piano-roll-inspector-enabled .piano-roll-inspector__velocity-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-nano);
  padding-right: var(--space-large);
}
.piano-roll-inspector-enabled .piano-roll-inspector__velocity-label-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-nano);
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-button-group {
  display: flex;
  gap: var(--space-nano);
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-button-group .mango-button-regular-M, .piano-roll-inspector-enabled .piano-roll-inspector__pitch-button-group .mango-icon-button-regular-M {
  min-width: inherit;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-button-group .mango-button-regular-M .soundtrap-icon, .piano-roll-inspector-enabled .piano-roll-inspector__pitch-button-group .mango-icon-button-regular-M .soundtrap-icon {
  margin: 2px -4px 0 3px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-label-group {
  display: flex;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-transpose {
  display: flex;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-transpose button {
  margin-top: 0 !important;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-transpose button.transpose-up {
  padding: var(--space-nano) var(--space-tiny) var(--space-nano) var(--space-tiny);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-transpose button.transpose-up .soundtrap-icon {
  transform: translate(-1.5px, -1px);
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-transpose button.transpose-down {
  padding: var(--space-nano) var(--space-tiny-1) var(--space-nano) var(--space-nano);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-transpose button.transpose-down .soundtrap-icon {
  transform: translate(-1px, -0.5px);
}
.piano-roll-inspector-enabled .piano-roll-inspector__pitch-cleanup {
  overflow: hidden;
}
.piano-roll-inspector-enabled .piano-roll-inspector__tempo-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-tiny);
  margin-bottom: var(--space-nano);
}
.piano-roll-inspector-enabled .piano-roll-inspector__tempo-label-group {
  display: flex;
}
.piano-roll-inspector-enabled .piano-roll-inspector__tempo-button-group {
  display: flex;
  gap: var(--space-nano);
  margin-bottom: var(--space-tiny);
}
.piano-roll-inspector-enabled .piano-roll-inspector__tempo-button-group .mango-button-regular-M, .piano-roll-inspector-enabled .piano-roll-inspector__tempo-button-group .mango-icon-button-regular-M {
  min-width: inherit;
}
.piano-roll-inspector-enabled .piano-roll-inspector__tempo-button-group .mango-button-regular-M .soundtrap-icon, .piano-roll-inspector-enabled .piano-roll-inspector__tempo-button-group .mango-icon-button-regular-M .soundtrap-icon {
  margin: 2px -4px 0 3px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-header {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-header .st-title-standard {
  margin-bottom: 1px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list {
  display: flex;
  flex-direction: column;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-tiny);
  border: none;
  background-color: transparent;
  appearance: none;
  border-radius: 8px;
  padding: 0;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  position: relative;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item:not(.disabled) {
  cursor: pointer;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  border-radius: 8px;
  z-index: 0;
  transition: background-color 0.1s ease-in-out;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item:not(.disabled):not(.selected):hover:after {
  background-color: var(--background-elevated-highlight);
  transition: none;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item.selected:after {
  background-color: var(--background-tinted-base);
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item.disabled {
  opacity: 0.5;
  filter: grayscale(1);
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item .st-tooltip2-wrapper {
  margin-top: 3px;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item > span {
  position: relative;
  z-index: 1;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item:last-child {
  border-bottom: none;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item:first-child {
  border-top: none;
}
.piano-roll-inspector-enabled .piano-roll-inspector__midi-tools-list-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-dialog.st-dialog-micro.pianoroll-inspector-note-transform-dialog-wrapper .st-dialog-modal {
  width: 200px;
}

.beatruler {
  pointer-events: none;
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: 19px;
  border-bottom: 1px solid #c8c8c8;
}
.beatruler .axiscanvas {
  vertical-align: top;
}

.piano-roll-grid-controls-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: var(--background-elevated-base);
}
.piano-roll-grid-controls-container .piano-roll-grid-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  padding: 3px 10px;
}
.piano-roll-grid-controls-container .piano-roll-grid-controls .snap-to-grid-icon {
  transform: scale(1.28);
}
.piano-roll-grid-controls-container .piano-roll-grid-controls .catch-playhead-icon {
  transform: scale(2);
}

.st-premium-badge {
  display: flex;
  padding: 3px;
  justify-content: center;
  align-items: center;
  color: var(--text-subdued);
  background: var(--background-elevated-base);
  border-radius: 99px;
  border: 1px solid transparent;
}

.shadoweddialog {
  border-radius: 4px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px var(--decorative-subdued);
  background: var(--background-elevated-base);
}
.shadoweddialog.shadoweddialog-noborder {
  border: none;
}
.shadoweddialog.shadoweddialog-newstyle {
  border-radius: 8px;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px var(--decorative-subdued);
}
.shadoweddialog.shadoweddialog-newstyle.fullscreen {
  min-width: 100vw;
  min-height: 100vh;
  border-radius: 0;
}

.basicdialog {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 100;
}
.basicdialog .dialogbackdrop {
  z-index: 100;
}
.basicdialog .inner {
  will-change: transform;
  position: absolute;
  text-align: center;
  width: 600px;
  z-index: 101;
  padding: 40px 80px 60px;
  box-sizing: border-box;
}
.basicdialog h5 {
  text-transform: uppercase;
  word-wrap: break-word;
}
.basicdialog .genericmessage {
  text-align: center;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 19px;
  word-wrap: break-word;
}
.basicdialog .genericmessage p {
  margin-bottom: 20px;
}
.basicdialog .genericmessage p:last-child {
  margin-bottom: 0;
}
.basicdialog .genericmessage {
  overflow-y: auto;
  max-height: 200px;
}
@media (max-height: 500px) {
  .basicdialog .genericmessage {
    max-height: 105px;
  }
}
.basicdialog .buttons {
  margin-bottom: -10px;
}
.basicdialog .buttons a, .basicdialog .buttons button {
  margin-bottom: 10px;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  min-width: 100px;
}
.pl-computer .basicdialog .buttons a:hover, .pl-computer .basicdialog .buttons button:hover {
  text-decoration: none;
}

.dim-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.basicdialog-responsive .inner {
  max-width: 93vw;
  max-height: 93vh;
}
body.ff-handheld.layout-portrait .basicdialog-responsive:not(.handheld-portrait-keep-padding) .inner {
  padding-left: 20px;
  padding-right: 20px;
}
body.ff-handheld.layout-landscape .basicdialog-responsive:not(.handheld-landscape-keep-padding) .inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

body.pl-mobile.ff-handheld .basicdialog.handheld-fullscreen .inner {
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border: none;
}

body.pl-mobile:not(.ff-handheld) .basicdialog.tablet-fullscreen .inner {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border: none;
}

body.pl-mobile .basicdialog.mobile-fullscreen .inner {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border: none;
}

.plaindialog .inner {
  padding-bottom: 60px;
}

.new-dialog .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  background-color: var(--background-elevated-base);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  border: 0;
  text-align: center;
  padding: 60px;
}
.new-dialog .title {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 50px 0;
}
.new-dialog h3,
.new-dialog h5 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 25px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  color: var(--text-base);
  text-transform: none;
  margin-bottom: 20px;
}
.new-dialog .genericmessage {
  margin-bottom: 40px;
}
.new-dialog .closer {
  border: 0;
  position: absolute;
  right: 0;
  font-size: 16px;
  line-height: 75%;
  color: var(--text-base);
  background: transparent;
  padding: 20px;
  cursor: pointer;
  transition: color 0.03s;
}
.new-dialog button.flatbutton {
  align-self: center;
}

.new-dialog-large .inner {
  width: 620px;
  padding: 0;
}
.new-dialog-large .mobile-closer {
  display: none;
}
.new-dialog-large .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.new-dialog-large .title-icon {
  border-radius: 50%;
  height: 44px;
  width: 44px;
  background-size: 44px 44px;
  background-repeat: no-repeat;
  margin: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.new-dialog-large .title-icon span {
  font-size: 18px;
}
.new-dialog-large h3 {
  font-size: 18px;
  font-family: var(--font-family);
  font-weight: 500;
  margin: 0;
}
.new-dialog-large .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 60px;
  font-size: 15px;
}
.new-dialog-large .body h5 {
  font-size: 15px;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 500;
  margin: 0 0 10px;
}
.new-dialog-large .body .copy {
  color: var(--text-base);
  white-space: pre-line;
  margin: 0 0 40px;
}
.new-dialog-large .body .sub-copy {
  color: var(--text-base);
  white-space: pre-line;
  margin: 0 0 40px;
}
.new-dialog-large .body strong {
  font-family: var(--font-family);
  font-weight: 500;
}
.new-dialog-large button.okb {
  align-self: center;
}

.new-dialog-purple .closer {
  color: var(--text-base);
}
.new-dialog-purple .title {
  background-color: var(--background-base);
}
.new-dialog-purple .title .title-icon {
  background-color: var(--text-base);
}
.new-dialog-purple .title .title-icon span {
  color: var(--text-base);
}
.new-dialog-purple .title h3 {
  color: var(--text-base);
}

body.ff-handheld .new-dialog-large .inner {
  background-color: var(--background-elevated-base);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}
body.ff-handheld .new-dialog-large .desktop-closer {
  display: none;
}
body.ff-handheld .new-dialog-large .mobile-closer {
  display: block;
  top: 1px;
  left: 0;
  right: initial;
  color: var(--text-base);
}
body.ff-handheld .new-dialog-large .title {
  background-color: var(--background-base);
  padding: 20px 0 20px 90px;
  text-align: left;
  border-bottom: 1px solid var(--decorative-subdued);
  justify-content: flex-start;
}
body.ff-handheld .new-dialog-large .title .title-icon {
  display: none;
}
body.ff-handheld .new-dialog-large .title h3 {
  color: var(--text-base);
}

.radio-dialog.new-dialog .inner {
  padding: 0;
  border-radius: 10px;
  width: 480px;
  height: 326px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--background-elevated-base);
  border: 0;
  text-align: center;
}
.radio-dialog.new-dialog .inner .closer {
  color: var(--text-base);
}
.radio-dialog.new-dialog .inner .dialog-title {
  margin: 64px 64px 40px;
  color: var(--text-base);
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
}
.radio-dialog.new-dialog .radio-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 64px 0 64px;
  color: var(--text-base);
}
.radio-dialog.new-dialog .radio-container .input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 18px;
}
.radio-dialog.new-dialog .radio-container .input-group:last-of-type {
  margin-bottom: 0;
}
.radio-dialog.new-dialog .radio-container .input-group label {
  font-family: var(--font-family);
  font-weight: 400;
  cursor: pointer;
  font-size: 15px;
  margin: 0;
}
.radio-dialog.new-dialog .radio-container .input-group input:checked + label {
  font-weight: 500;
}
.radio-dialog.new-dialog .radio-container .input-group input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-subdued);
  border-radius: 9px;
  cursor: pointer;
  color: var(--essential-primary);
  text-align: center;
  vertical-align: middle;
  margin: 0;
  transition: background-color 0.1s;
  margin: 0 10px 0 0;
}
.radio-dialog.new-dialog .radio-container .input-group input:hover {
  background-color: var(--background-elevated-base);
}
.radio-dialog.new-dialog .radio-container .input-group input[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: inherit;
}
.radio-dialog.new-dialog .radio-container .input-group input:checked {
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-primary);
}
.radio-dialog.new-dialog .radio-container .input-group input:checked:after {
  content: "";
  position: absolute;
  background-color: var(--essential-primary);
  border: 1px solid var(--essential-primary);
  width: 10px;
  height: 10px;
  border-radius: 6px;
  margin: 2px 0 0 -5px;
}
.radio-dialog.new-dialog .footer {
  height: 80px;
  width: 100%;
  border-top: 1px solid var(--decorative-subdued);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 5px;
}
.radio-dialog.new-dialog .footer button {
  margin: 20px 20px 20px 0;
}

.dialogbackdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  background-color: #000000;
}

.import-sampled-instrument-dialog .inner {
  width: auto;
  border-radius: 4px;
  border: 1px solid #d2d2d2;
  padding: 0 60px;
}
.import-sampled-instrument-dialog .dialog-title {
  margin-top: 40px;
  margin-bottom: 30px;
}
.import-sampled-instrument-dialog .buttons {
  margin-top: 40px;
  margin-bottom: 40px;
}
.import-sampled-instrument-dialog input[type=text] {
  background-color: var(--background-elevated-base);
  border: 1px solid var(--decorative-subdued);
  border-radius: 4px;
  padding: 2px 7px;
}
.import-sampled-instrument-dialog label {
  font-weight: normal;
}
.import-sampled-instrument-dialog .name-input {
  width: 274px;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings {
  border-radius: 4px;
  background: var(--decorative-subdued);
  padding: 10px 20px;
  margin: 10px;
  display: inline-block;
  text-align: left;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings h5 {
  text-align: center;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings label {
  width: 180px;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings > div {
  margin-bottom: 3px;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings input[type=text] {
  width: 40px;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings input[type=text]:disabled {
  opacity: 0.3;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings input[type=checkbox] {
  border-color: #999999;
  color: #999999;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings .text-center {
  text-align: center;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings .size-info {
  color: var(--text-positive);
  font-family: var(--font-family);
  font-weight: 700;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings.warning {
  background-color: #f5f5f5;
}
.import-sampled-instrument-dialog .import-sampled-instrument-settings.warning .size-info {
  color: #f2425d;
}
.import-sampled-instrument-dialog .presets {
  padding-top: 10px;
}
.import-sampled-instrument-dialog .presets span {
  padding: 0 5px;
}

.key-zone-dialog .inner {
  width: initial;
}

.track-mismatch-dialog .inner {
  background-color: var(--background-base);
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1019607843);
  display: block;
  flex-grow: 1;
  will-change: transform;
}
.track-mismatch-dialog .inner .closer {
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 17px;
  color: var(--text-subdued);
}
body.ff-handheld .track-mismatch-dialog .inner__dialog-title {
  margin-top: 10px;
}
.track-mismatch-dialog .inner .track-type-icon {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  line-height: 37px;
  display: inline-block;
}
.track-mismatch-dialog .inner .track-type-icon .soundtrap-icon {
  font-size: 22px;
  line-height: 32px;
}
.track-mismatch-dialog .inner .para {
  max-width: 440px;
  margin: 20px auto 0 auto;
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.43;
  letter-spacing: normal;
  text-align: center;
}
.track-mismatch-dialog .inner .buttons {
  margin-top: 40px;
}
body.ff-handheld .track-mismatch-dialog .inner .buttons {
  margin-top: 20px;
  margin-bottom: 20px;
}

.save-preset-dialog .inner {
  padding: 0;
  border-radius: 10px;
  width: 480px;
  height: 370px;
}
.save-preset-dialog .inner .closer {
  color: var(--text-base);
}
.save-preset-dialog .inner .save-preset-dialog-title {
  margin: 64px 0 40px;
  color: var(--text-base);
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
}
.save-preset-dialog .inner .body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.save-preset-dialog .inner .body .save-preset-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 320px;
}
.save-preset-dialog .inner .body .save-preset-container .preset-name-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.save-preset-dialog .inner .body .save-preset-container .preset-name-container label {
  font-size: 13px;
  color: var(--text-base);
}
.save-preset-dialog .inner .body .save-preset-container .preset-name-container input {
  font-size: 15px;
  height: 40px;
  width: 100%;
  display: block;
  padding: 6px 12px;
  color: var(--text-base);
  background-color: var(--background-elevated-base);
  background-image: none;
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
}
.save-preset-dialog .inner .body .save-preset-container .preset-name-container input:focus {
  border-color: var(--essential-primary);
}
.save-preset-dialog .inner .body .save-preset-container .preset-name-container input.invalid {
  background: url("/studio/assets/images/icons/ic-error-s-red.png") 97% 50% no-repeat #ffffff;
  border: 1px solid var(--essential-negative);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .save-preset-dialog .inner .body .save-preset-container .preset-name-container input.invalid {
    background: url("/studio/assets/images/icons/ic-error-s-red@2x.png") 97% 50% no-repeat;
    background-size: 16px;
  }
}
.save-preset-dialog .inner .body .save-preset-container .preset-name-container input.invalid + .invalid-text {
  opacity: 1;
  transition: height 0.15s, margin 0.15s, opacity 0.15s;
}
.save-preset-dialog .inner .body .save-preset-container .invalid-text {
  margin: 6px 0 0;
  width: 100%;
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: var(--text-negative);
  font-size: 13px;
  opacity: 0;
  transition: height 0.15s, margin 0.15s, opacity 0.15s;
}
.save-preset-dialog .inner .body .save-preset-container .path {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  margin-top: 6px;
}
.save-preset-dialog .inner .body .save-preset-container .path .category-label {
  color: var(--text-subdued);
  margin-right: 4px;
}
.save-preset-dialog .inner .body .save-preset-container .path .edit-path {
  text-decoration: underline;
}
.save-preset-dialog .inner .body .save-preset-container .path .divider {
  margin-left: 5px;
}
.save-preset-dialog .inner .body .save-preset-container .path .path-component {
  color: var(--text-base);
  margin: 0 5px 0 0;
}
.save-preset-dialog .inner .body .save-preset-container .path .path-component:last-of-type:after {
  content: "";
}
.save-preset-dialog .inner .body .subscription-spotlight {
  margin-top: var(--space-medium-2);
  margin-bottom: var(--space-large-1);
  padding: var(--space-small);
  display: flex;
  flex-direction: column;
  background-color: var(--background-highlight);
  border-radius: 4px;
}
.save-preset-dialog .inner .body .footer {
  height: 80px;
  width: 100%;
  border-top: 1px solid var(--decorative-subdued);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 5px;
}
.save-preset-dialog .inner .body .footer button {
  margin: 20px 20px 20px 0;
}
.save-preset-dialog.has-spotlight .inner {
  height: 498px;
}

.select-category-dialog .title {
  padding: 40px 0;
}
.select-category-dialog h3 {
  color: var(--text-base);
  margin: 0;
}
.select-category-dialog .inner {
  width: 520px;
  padding: 0;
  height: 672px;
}
.select-category-dialog .body {
  width: 100%;
  display: flex;
  flex-direction: row;
  border-top: 1px solid var(--decorative-subdued);
  background-color: var(--background-elevated-base);
  flex: 1;
  min-height: 0;
}
.select-category-dialog .body .topcategorypane {
  flex: 1;
  border-right: 1px solid var(--background-tinted-base);
  overflow-y: auto;
  max-height: 100%;
}
.select-category-dialog .body .topcategorypane .presetselectortopcategory, .select-category-dialog .body .topcategorypane .presetselectorsubcategory, .select-category-dialog .body .topcategorypane .presetselectorpresetitem {
  min-height: 60px;
}
.select-category-dialog .body .subcategorypane {
  flex: 1;
  overflow-y: auto;
  max-height: 100%;
}
.select-category-dialog .body .select-category-sub-category {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  margin: 0;
  height: 44px;
  border-bottom: 1px solid var(--decorative-subdued);
  padding: 0 20px 0 20px;
  background-color: var(--background-elevated-base);
  cursor: pointer;
}
.select-category-dialog .body .select-category-sub-category input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-subdued);
  border-radius: 9px;
  cursor: pointer;
  color: var(--essential-primary);
  text-align: center;
  vertical-align: middle;
  margin: 0;
  transition: background-color 0.1s;
  position: relative;
}
.select-category-dialog .body .select-category-sub-category input:hover {
  background-color: var(--background-elevated-base);
}
.select-category-dialog .body .select-category-sub-category input[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: inherit;
}
.select-category-dialog .body .select-category-sub-category input:checked {
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-primary);
}
.select-category-dialog .body .select-category-sub-category input:checked:after {
  content: "";
  position: absolute;
  background-color: var(--essential-primary);
  border: 1px solid var(--essential-primary);
  width: 10px;
  height: 10px;
  border-radius: 6px;
  margin: 2px 0 0 -5px;
}
.select-category-dialog .body .select-category-sub-category span {
  margin: 0 0 0 8px;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
}
.select-category-dialog .body .select-category-sub-category input:checked:after {
  content: none;
}
.select-category-dialog .body .select-category-sub-category input:checked + .indicator {
  position: relative;
}
.select-category-dialog .body .select-category-sub-category input:checked + .indicator:after {
  content: "";
  position: absolute;
  background-color: var(--essential-primary);
  border: 1px solid var(--essential-primary);
  height: 10px;
  width: 10px;
  border-radius: 6px;
  left: -13px;
  top: -5px;
  box-sizing: border-box;
}
.select-category-dialog .body .select-category-sub-category input:checked ~ span {
  color: var(--text-primary);
  font-family: var(--font-family);
  font-weight: 500;
}
.select-category-dialog .footer {
  width: 100%;
  padding: 23px 0;
  border-top: 1px solid var(--decorative-subdued);
  position: relative;
  top: -1px;
}
.select-category-dialog .footer .new-button {
  margin: 0 10px;
}

body.ff-handheld .select-category-dialog .inner {
  background-color: var(--background-elevated-base);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}
body.ff-handheld .select-category-dialog .title {
  background-color: var(--background-elevated-base);
  padding: 20px 0;
}
body.ff-handheld .select-category-dialog .title h3 {
  color: var(--text-base);
}
body.ff-handheld .select-category-dialog .body {
  flex: 1;
}

.create-preview-no-content .title-icon span {
  font-size: 21px;
}

.mididialog .device-row {
  margin-top: 10px;
  flex-grow: 1;
}
.mididialog .label-s {
  color: var(--text-base);
  margin-right: 5px;
}
.mididialog .image {
  display: block;
  max-width: 100%;
}
.mididialog .image-xkey-keyboard {
  margin: 75px auto 33px auto;
}
.mididialog .statusline {
  margin-top: 13px;
}
.mididialog .statusline .statusmsg {
  font-size: 11px;
}
.mididialog .statusline .statusmsg.ok {
  color: var(--text-positive);
}
.mididialog .statusline .statusmsg.error {
  color: var(--text-negative);
}
.mididialog .statusline .extra-info {
  margin-top: 16px;
  margin-bottom: 0px;
}
.mididialog .statusline ol {
  padding-left: 20px;
}
.mididialog .statusline .ic-warning-sign {
  color: var(--text-negative);
  vertical-align: middle;
  padding-right: 9px;
}
.mididialog .st-dropdown {
  height: 40px;
}

.mididialog2 > .st-dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: var(--space-huge);
}
.mididialog2 > .st-dialog-body h2, .mididialog2 > .st-dialog-body h3 {
  margin: 0;
}
.mididialog2 > .st-dialog-body .device-selection-area {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: relative;
}
.mididialog2 > .st-dialog-body .device-selection-area .midi-piano-image img {
  width: 84px;
  height: 84px;
}
.mididialog2 > .st-dialog-body .device-selection-area .status-icon {
  position: absolute;
  top: -13px;
  left: -8px;
  background: var(--background-base);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mididialog2 > .st-dialog-body .device-selection-area .status-icon .svg-wrapper {
  fill: var(--text-base);
  width: 16px;
  height: 16px;
}
.mididialog2 > .st-dialog-body .device-selection-area .device-label {
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
}
.mididialog2 > .st-dialog-body .device-selection-area .device-dropdown-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.mididialog2 > .st-dialog-body .device-selection-area .device-dropdown-area .st-dropdown > button {
  background: none;
  border-color: var(--decorative-subdued);
  height: 40px;
}
.mididialog2 > .st-dialog-body .status-area {
  color: var(--text-base);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.mididialog2 > .st-dialog-body .status-area .status-area-background {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: var(--background-base);
}
.mididialog2 > .st-dialog-body .status-area .status-area-content {
  margin: 16px;
}
.mididialog2 > .st-dialog-body .status-area .status-message {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 500;
}
.mididialog2 > .st-dialog-body .status-area .status-description {
  color: var(--text-base);
  font-weight: 400;
}
.mididialog2 > .st-dialog-body .status-area:not(.ok) .status-message {
  color: var(--text-negative);
}
.mididialog2 > .st-dialog-body .status-area.ok .status-message {
  color: var(--text-positive);
}

.microsoft-data-sharing-dialog {
  font-size: 15px;
}
.microsoft-data-sharing-dialog .microsoft-data-sharing-dialog__privacy-link {
  font-weight: 500;
  margin-bottom: 10px;
}
.microsoft-data-sharing-dialog .microsoft-data-sharing-dialog__privacy-link .soundtrap-icon {
  margin-right: 8px;
}

.videodialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.videodialog .inner {
  position: absolute;
  text-align: center;
  padding: 5px 80px 40px 80px;
  width: initial;
  display: flex;
  flex-direction: column;
}
.videodialog .inner.notransition {
  transition: none;
}
.videodialog .inner .dialog-title {
  min-height: 24px;
}
.videodialog .inner .frameholder {
  width: 640px;
  height: 360px;
  margin: 0 auto;
  position: relative;
}
.videodialog .inner .frameholder #videovimeoplayer {
  width: 100%;
  height: 100%;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.videodialog .inner .frameholder .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.videodialog .inner .frameholder .overlay .eq {
  position: absolute;
  bottom: 55px;
  right: 8px;
  width: 68px;
  height: 63px;
  background: url("/studio/assets/images/studio/anim_equalizer.gif");
}
.videodialog .inner .frameholder iframe {
  width: 100%;
  height: 100%;
}
.videodialog .inner .scroller {
  position: relative;
  margin: 55px auto 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.videodialog .inner .scroller .prev,
.videodialog .inner .scroller .next {
  height: 100px;
}
.videodialog .inner .scroller .itemsouter {
  overflow: hidden;
  width: 540px;
}
.videodialog .inner .scroller .itemsouter .items {
  white-space: nowrap;
  transition: margin-left 0.2s ease-out;
}
.videodialog .inner .scroller .itemsouter .items .item {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 180px;
  border: none;
  background: transparent;
  padding: 0;
}
.videodialog .inner .scroller .itemsouter .items .item .thumb {
  pointer-events: none;
  width: 170px;
  margin-left: 5px;
  margin-right: 5px;
  height: 96px;
  background-color: var(--background-elevated-base);
}
.videodialog .inner .scroller .itemsouter .items .item .title {
  pointer-events: none;
  margin-top: 5px;
  font-size: 9px;
  color: var(--text-base);
  font-family: var(--font-family);
  font-weight: 500;
  white-space: normal;
  text-transform: uppercase;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner {
  padding: 0;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .dialog-title {
  margin: 10px auto;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .frameholder {
  height: 48vh;
  width: 85.3333333333vh;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller {
  border-top: 1px solid var(--decorative-subdued);
  padding-top: 10px;
  margin: 10px 0 0;
  background-color: var(--background-elevated-base);
  flex: 1;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller .prev,
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller .next {
  display: none;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller .itemsouter {
  width: 100%;
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller .itemsouter .items {
  margin: 0 5px;
}
@media (max-height: 374px) {
  body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller .itemsouter .item .thumb {
    width: 110px;
    height: 60px;
    margin-left: 35px;
    margin-right: 35px;
  }
}
body.pl-mobile.ff-handheld.layout-landscape .videodialog .inner .scroller .itemsouter .item.selected .title {
  color: var(--text-primary);
  font-weight: 700;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner {
  padding: 0;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .frameholder {
  width: 92vw;
  height: 51.75vh;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .dialog-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80vw;
  overflow: hidden;
  margin: 20px auto;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller {
  border-top: 1px solid var(--decorative-subdued);
  background-color: var(--background-elevated-base);
  overflow-y: scroll;
  flex: 1;
  margin: 4vw 0 0 0;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .prev,
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .next {
  display: none;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter {
  width: 100%;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter .items {
  display: flex;
  flex-direction: column;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter .items .item {
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--decorative-subdued);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 4vw;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter .items .item .thumb {
  width: 113px;
  margin-left: 0px;
  margin-right: 20px;
  height: 71px;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter .items .item .title {
  font-size: 13px;
  margin-top: 0;
  align-self: center;
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter .items .item.selected {
  background-color: var(--background-elevated-highlight);
}
body.pl-mobile.ff-handheld.layout-portrait .videodialog .inner .scroller .itemsouter .items .item.selected .title {
  color: var(--text-primary);
  font-weight: 700;
}

.create-from-template-dialog-2 .inner {
  min-width: 620px;
  max-width: 620px;
  width: 620px;
  display: flex;
  flex-direction: column;
  text-align: initial;
  padding-top: 40px;
  padding-left: 80px;
  padding-bottom: 31px;
  padding-right: 80px;
}
.create-from-template-dialog-2 .inner > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.create-from-template-dialog-2 .inner > div .body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
}
.create-from-template-dialog-2 .inner > div .body .create-from-template-dialog-2-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: stretch;
  width: 100%;
}
.create-from-template-dialog-2 .inner .dialog-title-big {
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  margin-top: 0px;
}
.create-from-template-dialog-2 .inner .dialog-title {
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  margin-top: 40px;
}
.create-from-template-dialog-2 .inner .teachers-only {
  font-style: italic;
}
.create-from-template-dialog-2 .inner .basic-tab-bar {
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 38px;
}
.create-from-template-dialog-2 .inner .tab-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.create-from-template-dialog-2 .inner .lesson-plan-category-type {
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
}
.create-from-template-dialog-2 .inner .lesson-plan-category {
  text-align: left;
}
.create-from-template-dialog-2 .inner .lesson-plan-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.create-from-template-dialog-2 .inner .lesson-plan-item {
  position: relative;
  width: 200px;
  margin: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.create-from-template-dialog-2 .inner .lesson-plan-item > img {
  margin-bottom: -10px;
}
.create-from-template-dialog-2 .inner .lesson-plan-item > p {
  text-align: center;
}
.create-from-template-dialog-2 .inner .lesson-plan-item .overlay-icon {
  position: absolute;
  top: 84px;
  left: 87px;
  color: #3c3c3c;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.9);
  width: 30px;
  height: 30px;
  padding-top: 7px;
  text-align: center;
  border-radius: 50%;
}
.create-from-template-dialog-2 .inner .content-demos,
.create-from-template-dialog-2 .inner .content-templates {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
}
.create-from-template-dialog-2 .inner .content-templates.extra-bottom-padding {
  padding-bottom: 40px;
  gap: 15px;
}
.create-from-template-dialog-2 .inner .content-demos {
  margin-left: -33px;
  margin-right: -33px;
  margin-bottom: -14px;
  list-style-type: none;
  padding: 0;
  max-width: 700px;
}
.create-from-template-dialog-2 .inner .content-demos .project-template-type-demo {
  margin-bottom: 27px;
}
.create-from-template-dialog-2 .inner button.project-template {
  background: none;
  padding: 0;
}
.create-from-template-dialog-2 .inner .project-template {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--decorative-subdued);
  overflow: hidden;
}
.create-from-template-dialog-2 .inner .project-template:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template > * {
  z-index: 100;
}
.create-from-template-dialog-2 .inner .project-template .project-template-icon {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: opacity 0.3s;
  padding-bottom: 1px;
  width: 100%;
  flex: 1;
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: -1px;
}
.create-from-template-dialog-2 .inner .project-template .new-icon {
  background-size: 50%;
  background-color: var(--background-base);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.create-from-template-dialog-2 .inner .project-template .project-template-icon.musicstudio {
  -webkit-mask-image: url("/studio/assets/images/studio/projectdialog/Musicstudio.svg");
  mask-image: url("/studio/assets/images/studio/projectdialog/Musicstudio.svg");
}
.create-from-template-dialog-2 .inner .project-template .project-template-icon.sketchpad {
  -webkit-mask-image: url("/studio/assets/images/studio/projectdialog/Sketchpad.svg");
  mask-image: url("/studio/assets/images/studio/projectdialog/Sketchpad.svg");
}
.create-from-template-dialog-2 .inner .project-template .project-template-icon.podcaststudio {
  -webkit-mask-image: url("/studio/assets/images/studio/projectdialog/Podcaststudio.svg");
  mask-image: url("/studio/assets/images/studio/projectdialog/Podcaststudio.svg");
}
body.pl-computer .create-from-template-dialog-2 .inner .project-template:hover .project-template-icon {
  transition: opacity 0.03s;
  opacity: 0.4;
}
.create-from-template-dialog-2 .inner .project-template.selected .project-template-icon {
  opacity: 1;
}
.create-from-template-dialog-2 .inner .project-template .project-template-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-elevated-base);
  color: var(--text-base);
  min-height: 54px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-demo {
  min-width: 160px;
  width: 160px;
  height: 160px;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-demo .project-template-icon {
  background-color: var(--background-elevated-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template {
  min-width: 220px;
  width: 220px;
  height: 180px;
  border-radius: 8px;
  border-width: 0px;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template .project-template-icon {
  justify-content: center;
  font-size: 48px;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template .project-template-name {
  font-weight: 700;
  font-size: 18px;
  min-height: 64px;
  color: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template .project-template-name .template-name-wrapper {
  margin-bottom: 2px;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template .project-template-name .template-description-wrapper {
  font-size: 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1rem;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast .project-template-icon {
  color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-podcast .project-template-name {
  background-color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music .project-template-icon {
  color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-music .project-template-name {
  background-color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad .project-template-icon {
  color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.project-template-kind-sketchpad .project-template-name {
  background-color: var(--background-base);
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.rtc-project .project-template-icon {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-base);
  color: var(--text-base);
  background-image: none !important;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.rtc-project .project-template-icon::before {
  content: "🖖👽🖖";
  font-size: 28px;
}
.create-from-template-dialog-2 .inner .project-template.project-template-type-template.rtc-project .project-template-name {
  background: var(--green-l2);
}
.create-from-template-dialog-2 .inner .project-template .project-template-ribbon {
  position: absolute;
  right: -2px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  background-color: #5a00aa;
  padding-bottom: 1px;
  height: 24px;
  padding-left: 10px;
  padding-right: 7px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  text-transform: uppercase;
}
.create-from-template-dialog-2 .inner .project-template .tooltip {
  top: 155px;
  left: -31px;
  font-family: var(--font-family);
  font-weight: 400;
  pointer-events: none;
  opacity: 1;
  text-align: center;
  z-index: 1000;
  color: var(--text-base);
}
.create-from-template-dialog-2 .inner .project-template .tooltip .tooltip-arrow {
  top: -2px;
  left: 50%;
  margin-left: -7px;
  border-width: 0 7px 7px;
  border-bottom-color: var(--background-elevated-base);
}
.create-from-template-dialog-2 .inner .project-template .tooltip .tooltip-inner {
  width: 220px;
  max-width: 220px;
  background-color: var(--background-elevated-base);
  line-height: 18px;
  padding: 10px;
  white-space: normal;
  font-size: 13px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
.create-from-template-dialog-2 .inner .project-template .tooltip .tooltip-inner strong {
  font-weight: 500;
}
.create-from-template-dialog-2 .inner .project-template.dimmed .project-templateicon {
  opacity: 0.1 !important;
}
.create-from-template-dialog-2 .inner .project-template.blank .project-template-ribbon {
  display: none;
}
.create-from-template-dialog-2 .inner .project-template.blank .project-template-icon {
  background-image: url("/studio/assets/images/studio/templates/blank_v2.svg");
  background-size: 34px;
}
.create-from-template-dialog-2 .inner .beta-opt-in {
  flex-grow: 0;
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 16px;
  border: 1px solid var(--decorative-subdued);
}
.create-from-template-dialog-2 .inner .beta-opt-in .opt-in-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 20px;
  font-weight: 500;
  white-space: pre-wrap;
}
.create-from-template-dialog-2 .inner .beta-opt-in .opt-in-title .rtc-beta-flag {
  margin: 2px 0 0 8px;
  font-weight: normal;
}
.create-from-template-dialog-2 .inner .beta-opt-in .opt-in-checkbox-wrapper {
  cursor: pointer;
  display: flex;
}
.create-from-template-dialog-2 .inner .beta-opt-in .opt-in-checkbox-wrapper .opt-in-message {
  width: 360px;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  font-weight: normal;
}
.create-from-template-dialog-2 .inner .beta-opt-in .opt-in-checkbox-wrapper .opt-in-checkbox {
  margin-left: auto;
}
.create-from-template-dialog-2 .inner .st-carousel {
  margin-left: -45px;
  margin-right: -45px;
}
.create-from-template-dialog-2 .inner .st-carousel .st-carousel-item .project-template.project-template-type-demo {
  margin: 0;
  min-width: 110px;
  max-width: 110px;
  width: 110px;
  min-height: 110px;
  max-height: 110px;
  height: 110px;
}
.create-from-template-dialog-2 .inner .st-carousel .st-carousel-item .project-template.project-template-type-demo .project-template-name {
  min-height: 38px;
}

.openprojectdialog .inner {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: var(--background-elevated-base);
}
body:not(.ff-handheld) .openprojectdialog .inner {
  height: 500px;
}
.openprojectdialog .inner .st-dialog-title {
  text-align: left;
  padding: 0 var(--space-huge);
}
.openprojectdialog .inner .projectcontainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid var(--decorative-subdued);
  background-color: var(--background-elevated-base);
}
.openprojectdialog .inner .projectcontainer .projects {
  display: flex;
  flex-direction: column;
}
.openprojectdialog .inner .projectcontainer .projects .project {
  cursor: pointer;
  padding: var(--space-small-1) var(--space-huge);
  border-bottom: 1px solid var(--decorative-subdued);
  text-align: left;
  flex-shrink: 0;
  color: var(--text-base);
}
.openprojectdialog .inner .projectcontainer .projects .project:hover {
  background-color: var(--background-elevated-highlight);
}
.openprojectdialog .inner .projectcontainer .projects .project.selected {
  background-color: var(--background-tinted-press);
  color: var(--text-base);
  font-weight: 500;
}
.openprojectdialog .inner .projectcontainer .no-projects {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
.openprojectdialog .inner .projectcontainer .loading {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
body.ff-handheld.layout-landscape .openprojectdialog .inner {
  padding-bottom: 10px !important;
}
body.ff-handheld.layout-landscape .openprojectdialog .inner .dialog-title {
  padding-top: 40px;
  padding-bottom: 20px;
}
body.ff-handheld.layout-landscape .openprojectdialog .inner .projectcontainer {
  margin-bottom: 10px;
}

.openprojectdialogwithpreview .inner {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: var(--background-elevated-base);
}
body:not(.ff-handheld) .openprojectdialogwithpreview .inner {
  height: 630px;
}
.openprojectdialogwithpreview .inner .open-projects-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.openprojectdialogwithpreview .inner .open-projects-header .dialog-title-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.openprojectdialogwithpreview .inner .open-projects-header .dialog-title-container .st-dialog-title {
  text-align: left;
  padding: 0 var(--space-huge);
}
.openprojectdialogwithpreview .inner .open-projects-header .dialog-title-container .filter-toggle-container {
  margin-left: var(--space-huge);
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-tiny);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.openprojectdialogwithpreview .inner .open-projects-header .dialog-title-container .filter-toggle-container .filter-toggle-label {
  margin-left: var(--space-tiny);
}
.openprojectdialogwithpreview .inner .open-projects-header .dialog-title-container .filter-toggle-container .filter-toggle-label.disabled {
  color: var(--text-subdued);
}
.openprojectdialogwithpreview .inner .open-projects-header input {
  color: var(--text-subdued);
  padding-left: 34px;
  border: 1px solid var(--decorative-subdued);
  background-color: var(--background-base);
}
.openprojectdialogwithpreview .inner .open-projects-header button[disabled],
.openprojectdialogwithpreview .inner .open-projects-header input[disabled] {
  cursor: wait;
}
.openprojectdialogwithpreview .inner .open-projects-header .project-search-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-right: var(--space-large);
  margin-bottom: var(--space-tiny);
}
.openprojectdialogwithpreview .inner .projects-header {
  background-color: var(--background-elevated-base);
  border-top: 2px solid var(--decorative-subdued);
  color: var(--essential-subdued);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: 500;
}
.openprojectdialogwithpreview .inner .projects-header .project-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: var(--space-tiny) 0;
  height: 100%;
  flex: 1;
}
.openprojectdialogwithpreview .inner .projects-header .last-modified {
  padding: var(--space-tiny) 0 var(--space-tiny) 0;
  text-align: center;
  height: 100%;
  width: 160px;
}
.openprojectdialogwithpreview .inner .projectcontainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid var(--decorative-subdued);
  background-color: var(--background-elevated-base);
}
.openprojectdialogwithpreview .inner .projectcontainer .projects {
  display: flex;
  flex-direction: column;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row {
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row:hover {
  background-color: var(--background-elevated-highlight);
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row.selected {
  background-color: var(--background-tinted-press);
  color: var(--text-base);
  font-weight: 500;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row .list-item {
  cursor: pointer;
  border-bottom: 1px solid var(--decorative-subdued);
  flex-shrink: 0;
  color: var(--text-base);
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row .project {
  padding: var(--space-tiny-1) var(--space-medium-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row .project .project-title-text {
  padding-left: var(--space-tiny);
  margin-bottom: var(--space-tiny);
  text-overflow: ellipsis;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row .project-attributes {
  height: 100%;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row .project-attributes .last-modified {
  height: 100%;
  width: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project-row .waveform-base-theme {
  border: none;
}
.openprojectdialogwithpreview .inner .projectcontainer .projects .project {
  cursor: pointer;
  padding: var(--space-small-1) var(--space-huge);
  border-bottom: 1px solid var(--decorative-subdued);
  text-align: left;
  flex-shrink: 0;
  color: var(--text-base);
}
.openprojectdialogwithpreview .inner .projectcontainer .fallback-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
.openprojectdialogwithpreview .inner .st-dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.openprojectdialogwithpreview .inner .st-dialog-footer .pagination-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.openprojectdialogwithpreview .inner .st-dialog-footer .pagination-container .page-info {
  width: 180px;
}
.openprojectdialogwithpreview .inner .st-dialog-footer .pagination-container button {
  margin: 10px;
  padding: 0;
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.openprojectdialogwithpreview .inner .st-dialog-footer .pagination-container button[disabled] {
  cursor: default;
  color: var(--text-subdued);
}
.openprojectdialogwithpreview .inner .st-dialog-footer .pagination-container .page-button {
  color: var(--text-base);
  max-width: 5px;
  max-height: 5px;
}
.openprojectdialogwithpreview .inner .st-dialog-footer .fatfingerbutton {
  margin-left: 5px;
  margin-right: 5px;
}
body.ff-handheld.layout-landscape .openprojectdialogwithpreview .inner {
  padding-bottom: 10px !important;
}
body.ff-handheld.layout-landscape .openprojectdialogwithpreview .inner .dialog-title {
  padding-top: 40px;
  padding-bottom: 20px;
}
body.ff-handheld.layout-landscape .openprojectdialogwithpreview .inner .projectcontainer {
  margin-bottom: 10px;
}

.addtrackdialog .inner {
  will-change: transform;
  width: 780px;
  height: 628px;
  padding: 7px 0;
  border-radius: 8px;
  position: relative;
}
.pl-mobile.ff-handheld .addtrackdialog .inner {
  padding: 0;
}
.addtrackdialog .inner .trackselectoricon {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.3s;
  color: var(--text-base);
  opacity: 1;
}
.addtrackdialog .inner.dimmed .trackselectoricon {
  opacity: 0.1 !important;
}
.addtrackdialog .inner .track-selector {
  width: 100%;
  height: 100%;
}
.addtrackdialog .inner .track-selector .selection .title {
  font-size: 25px;
  font-weight: bold;
  color: var(--text-base);
  text-align: left;
  padding: 0 60px;
  height: 28px;
  margin: 40px 0 0 0;
}
.pl-mobile.ff-handheld .addtrackdialog .inner .track-selector .selection .title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 72px;
  margin: 0;
  padding: 0 0 16px;
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  padding: 0 60px;
}
.pl-mobile.ff-handheld .addtrackdialog .inner .track-selector .selection .trackselectorcontainer {
  height: calc(100vh - 56px - 72px);
  padding: 0 40px;
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors {
  transform: translate3d(0, 0, 0);
  margin: 32px auto auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors li {
  position: relative;
  flex: 1 0 21%;
  display: flex;
  justify-content: center;
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors.animateswipe {
  transition: transform 0.3s ease-out;
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector {
  position: relative;
  min-width: 160px;
  width: 160px;
  -webkit-appearance: none;
  background: none;
  border: none;
  height: 208px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.pl-mobile.pl-mobile.ff-handheld .addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector {
  width: 132px;
  min-width: 132px;
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector .trackselectorbutton {
  position: relative;
  width: 124px;
  height: 124px;
  min-width: 124px;
  min-height: 124px;
  border-radius: 12px;
  background-color: var(--background-tinted-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.pl-computer .addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector .trackselectorbutton:hover {
  background-color: transparent;
}
body.pl-computer .addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector .trackselectorbutton:before {
  border-radius: 12px;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
}
body.pl-computer .addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector .trackselectorbutton:hover:before {
  background-color: var(--essential-primary);
  opacity: 0.2;
}
body.pl-computer .addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector:hover .trackselectorlabel {
  color: var(--text-base);
}
.addtrackdialog .inner .track-selector .selection .trackselectorcontainer .trackselectors .trackselector .trackselectorlabel {
  margin: 14px 0;
  font-size: 15px;
  color: var(--text-subdued);
}
.addtrackdialog .inner .track-selector .other-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  height: 56px;
  margin-bottom: 40px;
  padding: 0 50px;
  margin-left: 28px;
}
.pl-mobile.pl-mobile.ff-handheld .addtrackdialog .inner .track-selector .other-options {
  border-top: 1px solid var(--decorative-subdued);
  margin-left: 0;
}
.addtrackdialog .inner .track-selector .other-options .import-file-icon {
  margin-right: 8px;
  font-size: 0.91em;
}
.addtrackdialog .inner .track-selector .other-options .import-file span {
  margin-bottom: 2px;
}
.addtrackdialog .inner .track-selector .other-options .loops .loops-icon {
  margin-right: 8px;
}
.addtrackdialog .inner .track-selector .other-options .loops span {
  margin-bottom: 2px;
}
.addtrackdialog .inner .track-selector .other-options .sampler {
  overflow: visible;
}
.addtrackdialog .inner .track-selector .other-options .sampler .new-ribbon {
  font-size: 11px;
  letter-spacing: 0.01em;
  right: 2px;
  width: 39px;
  height: 18px;
  font-weight: 500;
  top: -10px;
}
.addtrackdialog .inner .track-selector .other-options .drummer {
  overflow: visible;
}
.addtrackdialog .inner .track-selector .other-options .drummer .new-ribbon {
  right: 2px;
  top: -10px;
}
.addtrackdialog .inner .track-selector .other-options .desaturated {
  transform: translate3d(0, 0, 0);
  filter: saturate(0%);
  opacity: 0.65;
}
.addtrackdialog .inner .drum-selector {
  width: 100%;
  height: 100%;
}
.addtrackdialog .inner .drum-selector .header-area {
  text-align: left;
  padding: 0 60px;
  height: 28px;
  margin: 40px 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: none;
  border: none;
  margin-bottom: 114px;
  position: absolute;
}
.pl-mobile.ff-handheld .addtrackdialog .inner .drum-selector .header-area {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 72px;
  margin: 0;
  padding: 0 0 16px;
}
.addtrackdialog .inner .drum-selector .header-area .soundtrap-icon {
  transform: scale(1.3);
}
.addtrackdialog .inner .drum-selector .header-area .title {
  font-size: 25px;
  font-weight: bold;
  color: var(--text-base);
  font-weight: normal;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.addtrackdialog .inner .drum-selector .drums-selector-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0;
  list-style-type: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addtrackdialog .inner .drum-selector .drums-selector-options .drum-option {
  border-radius: 8px;
  width: 300px;
  height: 230px;
  background: var(--background-tinted-base);
}
.addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: var(--text-base);
  background: none;
  border: none;
  padding: 40px;
  width: 100%;
  height: 100%;
  position: relative;
}
body.pl-computer .addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button:hover {
  background-color: transparent;
}
body.pl-computer .addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button:before {
  border-radius: 12px;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  position: absolute;
}
body.pl-computer .addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button:hover:before {
  background-color: var(--essential-primary);
  opacity: 0.2;
}
body.pl-computer .addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button:before {
  border-radius: 8px;
}
.addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button .drummer-section-title {
  display: flex;
  align-items: center;
}
.addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button .trackselectoricon {
  margin: 0;
}
.addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button .new-ribbon {
  position: initial;
  display: inline-block;
  margin-left: 7px;
  margin-top: 5px;
}
.addtrackdialog .inner .drum-selector .drums-selector-options .drum-option button h3 {
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
}
.addtrackdialog .select-drums-content {
  position: relative;
}

.add-track-dialog-with-tiles {
  overflow-y: scroll;
}
.add-track-dialog-with-tiles .inner {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  padding: 0;
}

.add-track-tiles-title {
  font-size: 25px;
  font-weight: bold;
  color: var(--text-base);
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 40px;
}
.layout-landscape .add-track-tiles-title {
  margin-top: 24px;
}

.add-track-tiles-subtitle {
  color: var(--text-base);
  font-size: 15px;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 16px;
}

.add-track-tiles-container {
  display: flex;
  transform: translate3d(0, 0, 0);
  margin: 40px auto auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  gap: 3vw;
  padding-left: 3vw;
}
.layout-landscape .add-track-tiles-container {
  gap: 2vw;
  padding-left: 10vw;
  margin: 20px auto auto;
}

.track-selector-tile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 23vw;
  width: 45vw;
  background-size: 45vw;
  border: none;
  background-color: transparent;
}
.track-selector-tile:active {
  opacity: 0.8;
}
.layout-landscape .track-selector-tile {
  height: 9.25vw;
  width: 18.5vw;
  background-size: 18.5vw;
}
.track-selector-tile .track-selector-tile__label {
  color: #ffffff;
  margin: 0;
  font-size: 4.5vw;
  width: 32vw;
  text-align: left;
  padding-left: 16px;
}
.layout-landscape .track-selector-tile .track-selector-tile__label {
  width: 16vw;
  font-size: 2.25vw;
}
.track-selector-tile.voiceandmicrophones {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Voice.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.loops {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Loops.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.drumkits {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Drums.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.pianoandkeyboards {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Piano.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.bassand808 {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Bass808.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.importaudio {
  background-image: url("/studio/assets/images/studio/addtrackdialog/ImportAudio.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.guitar {
  background-image: url("/studio/assets/images/studio/addtrackdialog/GuitarBass.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.strings {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Strings.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.guitarbassamp {
  background-image: url("/studio/assets/images/studio/addtrackdialog/GuitarAmps.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.brass {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Brass.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.sampler {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Sampler.svg");
  background-repeat: no-repeat;
}
.track-selector-tile.synthesizer {
  background-image: url("/studio/assets/images/studio/addtrackdialog/Synths.svg");
  background-repeat: no-repeat;
}

.vocalTunerDialog .st-dialog-title, .vocalTunerDialog .st-dialog-title > h2, .vocalTunerDialog h3 {
  margin-bottom: 24px;
}
.vocalTunerDialog .scale-controls-area {
  width: 100%;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.vocalTunerDialog .scale-controls-area .dropdown-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.vocalTunerDialog .scale-controls-area .dropdown-controls .root-control-area, .vocalTunerDialog .scale-controls-area .dropdown-controls .scale-control-area {
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  width: 100%;
  color: var(--text-base);
  margin-bottom: 20px;
}
.vocalTunerDialog .scale-controls-area .dropdown-controls .root-control-area .st-dropdown, .vocalTunerDialog .scale-controls-area .dropdown-controls .scale-control-area .st-dropdown {
  margin-top: 4px;
  width: 100%;
}
.vocalTunerDialog .scale-controls-area .dropdown-controls .root-control-area .st-dropdown button, .vocalTunerDialog .scale-controls-area .dropdown-controls .scale-control-area .st-dropdown button {
  background: none;
  border-color: var(--decorative-subdued);
}
.vocalTunerDialog .scale-controls-area .dropdown-controls .root-control-area .st-dropdown button .st-dropdown-value, .vocalTunerDialog .scale-controls-area .dropdown-controls .scale-control-area .st-dropdown button .st-dropdown-value {
  color: var(--text-subdued);
}
.vocalTunerDialog .scale-controls-area .keysection {
  --keyboard-border-radius: 10px;
  --white-key-border-radius: 4px;
  --black-key-border-radius: 8px;
  --key-border: 1px;
  position: relative;
  align-self: center;
  background-color: var(--white-key-border);
  width: 100%;
  height: 90px;
  border-radius: var(--keyboard-border-radius);
  background-size: 100% 100%;
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey {
  position: absolute;
  top: 0;
  width: 14.2857142857%;
  height: 100%;
  background-color: var(--white-key);
  border-radius: 0 0 var(--white-key-border-radius) var(--white-key-border-radius);
  border: var(--key-border) solid var(--white-key-border);
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key0 {
  left: 0;
  border-radius: var(--keyboard-border-radius) 0 var(--white-key-border-radius) var(--keyboard-border-radius);
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key2 {
  left: 14.2857142857%;
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key4 {
  left: 28.5714285714%;
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key5 {
  left: 42.8571428571%;
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key7 {
  left: 57.1428571429%;
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key9 {
  left: 71.4285714286%;
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey.key11 {
  left: 85.7142857143%;
  border-radius: 0 var(--keyboard-border-radius) var(--keyboard-border-radius) var(--white-key-border-radius);
}
.vocalTunerDialog .scale-controls-area .keysection .whitekey .dot {
  bottom: 10px;
  background: var(--white-key-highlight);
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey {
  position: absolute;
  top: 0;
  margin-left: 3.3%;
  margin-right: 3.3%;
  width: 8%;
  height: 50%;
  background: var(--black-key);
  border: none;
  border-radius: 0 0 var(--black-key-border-radius) var(--black-key-border-radius);
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey.key1 {
  left: 7.1428571429%;
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey.key3 {
  left: 21.4285714286%;
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey.key6 {
  left: 50%;
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey.key8 {
  left: 64.2857142857%;
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey.key10 {
  left: 78.5714285714%;
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: var(--key-border);
  bottom: 35%;
  border-radius: 0 0 4px 4px;
  background: rgba(95, 95, 95, 0.71);
}
.vocalTunerDialog .scale-controls-area .keysection .blackkey .dot {
  top: 24px;
  background: var(--black-key-highlight);
}
.vocalTunerDialog .scale-controls-area .keysection .dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.vocalTunerDialog .amount-title {
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 12px;
}
.vocalTunerDialog .strength-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vocalTunerDialog .strength-buttons.pitchpotion {
  justify-content: space-between;
}
.vocalTunerDialog .strength-buttons button {
  margin-right: 0;
  margin-bottom: 4px;
  padding: 0 14px;
  min-width: 0;
}
.vocalTunerDialog .playable-waveform-preview {
  margin: 16px 0;
}
.vocalTunerDialog .preview-toggle-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.vocalTunerDialog .preview-toggle-area label {
  font-weight: normal;
  margin-bottom: 0;
}
.vocalTunerDialog .preview-toggle-area button {
  padding: 0;
}
.vocalTunerDialog .st-dialog-footer.st-vocal-tuner-dialog-footer {
  margin: 40px -55px 0 -55px;
  padding: 28px 28px 0 28px;
}
.vocalTunerDialog .st-vocal-tuner-dialog-footer .algorithm-toggle {
  font-weight: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: auto;
}
.vocalTunerDialog .st-vocal-tuner-dialog-footer .algorithm-toggle-label {
  background: #a98cea;
  color: #000000;
  padding: 0.1rem var(--space-nano);
  font-size: 10px;
  border-radius: 2px;
}
.vocalTunerDialog .subscription-spotlight {
  margin-top: var(--space-small);
  margin-bottom: var(--space-small);
  padding: var(--space-small);
  display: flex;
  flex-direction: column;
  background-color: var(--background-highlight);
  border-radius: 4px;
}

.noisereductiondialog {
  display: flex;
  flex-direction: column;
  width: auto;
  align-items: flex-start;
}
.noisereductiondialog .buttons {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: flex-end;
  justify-content: center;
  margin-top: 20px;
}
.noisereductiondialog .premium-badge {
  border-radius: 4px;
  color: #FFF;
  background: #5B0BA1;
  text-transform: uppercase;
  padding: 2px 8px;
}
.noisereductiondialog .description {
  margin-bottom: 32px;
}
.noisereductiondialog .strength-title {
  color: var(--text-base);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.noisereductiondialog .strength-buttons {
  margin: 16px 0;
}
.noisereductiondialog .strength-buttons button {
  margin-right: 8px;
  padding: 0 12px;
  min-width: 0;
}
.noisereductiondialog .preview-toggle-area {
  margin-top: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.noisereductiondialog .preview-toggle-area label {
  font-weight: normal;
  margin-bottom: 0;
}
.noisereductiondialog .preview-toggle-area button {
  padding: 0;
}

.subscription-spotlight {
  margin-top: var(--space-small);
  margin-bottom: var(--space-small);
  padding: var(--space-small);
  display: flex;
  flex-direction: column;
  background-color: var(--background-highlight);
  border-radius: 4px;
}

.image-header-dialog {
  background: rgba(0, 0, 0, 0.3);
  z-index: 200;
}
.image-header-dialog .inner {
  padding: 0px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.image-header-dialog .inner .body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image-header-dialog .inner .body .header-background {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.image-header-dialog .inner .body .header-background .header-artwork {
  background-size: cover;
  width: 100%;
  aspect-ratio: 2.3;
}
.image-header-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
}
.image-header-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
  padding: var(--space-huge);
}
@media (max-width: 768px) {
  .image-header-dialog .inner .body .body-wrapper .title-and-description {
    padding: var(--space-large);
  }
}
.image-header-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
  max-width: 20ch;
}
.image-header-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: var(--space-small);
  line-height: 20px;
  color: var(--text-subdued);
}
.image-header-dialog .inner .footer {
  gap: var(--space-small);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--space-small-1) var(--space-medium);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--decorative-subdued);
}
.image-header-dialog .inner .footer .btn {
  height: var(--space-large);
  padding: 0 var(--space-small-1);
  font-size: 15px;
}

.low-latency-mode-dialog__spinner {
  margin-top: var(--space-small);
  color: var(--text-primary);
}

.remove-paid-effect-warning-dialog {
  background: rgba(0, 0, 0, 0.3);
}
.remove-paid-effect-warning-dialog .inner {
  padding: 0px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.remove-paid-effect-warning-dialog .inner .body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.remove-paid-effect-warning-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
}
.remove-paid-effect-warning-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
  padding: var(--space-huge);
}
@media (max-width: 768px) {
  .remove-paid-effect-warning-dialog .inner .body .body-wrapper .title-and-description {
    padding: var(--space-large);
  }
}
.remove-paid-effect-warning-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
  max-width: 20ch;
}
.remove-paid-effect-warning-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: var(--space-small);
  line-height: 20px;
  color: var(--text-subdued);
}
.remove-paid-effect-warning-dialog .inner .footer {
  gap: var(--space-small);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--space-small-1) var(--space-medium);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--decorative-subdued);
}
.remove-paid-effect-warning-dialog .inner .footer .btn {
  height: var(--space-large);
  padding: 0 var(--space-small-1);
  font-size: 15px;
}
.remove-paid-effect-warning-dialog .upgrade-icon-container {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
}
.remove-paid-effect-warning-dialog .upgrade-icon-container .upgrade-icon-wrapper {
  font-size: 40px;
  background: var(--background-elevated-highlight);
  display: flex;
  border-radius: 100%;
  padding: 30px;
  justify-content: center;
  color: var(--text-subdued);
}

.audiopreviewdialog .preview-spot {
  margin-bottom: 30px;
}
.audiopreviewdialog .preview-spot .preview button {
  min-width: 100px;
}
body.pl-mobile.ff-handheld .audiopreviewdialog .inner {
  display: flex;
  flex-direction: column;
}
body.pl-mobile.ff-handheld .audiopreviewdialog .inner .preview-spot {
  flex: 1;
}
body.pl-mobile.ff-handheld.layout-landscape .audiopreviewdialog .buttons {
  margin-bottom: 10px;
}

.dnd-sampler-save-preset-dialog {
  flex: 1;
  padding: var(--space-large-2) var(--space-large-2) var(--space-large-2);
}

.mergetracksdialog p {
  margin-bottom: 0;
}
.mergetracksdialog .list {
  display: block;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 90%;
  margin: 40px auto 40px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--decorative-subdued);
  border-radius: 4px;
}
.mergetracksdialog .list .item {
  cursor: pointer;
  display: block;
  padding: 3px 5px;
  text-align: left;
}
.mergetracksdialog .list .item input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--decorative-base);
  border-radius: 3px;
  cursor: pointer;
  color: var(--background-elevated-base);
  text-align: center;
  vertical-align: middle;
  margin: 0;
  transition: background-color 0.1s;
  margin-right: 10px;
}
.mergetracksdialog .list .item input:hover {
  background-color: var(--background-tinted-base);
}
.mergetracksdialog .list .item input[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: inherit;
}
.mergetracksdialog .list .item input:checked {
  background-color: var(--background-tinted-base);
}
.mergetracksdialog .list .item input:checked:after {
  font-family: "soundtrap-icons";
  font-size: 12px;
  content: "\e053";
  top: 50%;
  margin-top: -6px;
}
.mergetracksdialog .list .item input:hover {
  border-color: var(--essential-primary);
}
.mergetracksdialog .list .item input:checked {
  border-color: var(--essential-primary);
  background-color: var(--essential-primary);
}
.mergetracksdialog .list .item span {
  vertical-align: top;
  margin-top: 1px;
  pointer-events: none;
}
.pl-mobile .mergetracksdialog .list .item {
  padding: 11px;
}
body.pl-mobile.ff-handheld .mergetracksdialog .inner {
  display: flex;
  flex-direction: column;
}
body.pl-mobile.ff-handheld .mergetracksdialog .inner .list {
  max-height: initial;
  flex: 1;
  margin: 2px auto 20px;
}
body.pl-mobile.ff-handheld.layout-landscape .mergetracksdialog .inner {
  padding-top: 0 !important;
}

.fileimportdialog input {
  /* Hide file input and replace it with custom one for styling. opacity: 0 to keep it accessible to screen readers. */
  opacity: 0;
  width: 100%;
  position: absolute;
  margin: auto;
  cursor: pointer;
}
.fileimportdialog input::file-selector-button {
  cursor: pointer;
}
.fileimportdialog label:focus-within {
  outline: 2px solid var(--focus);
}

.tempodialog p {
  margin-top: 35px;
  margin-bottom: 40px;
}
.tempodialog p input {
  width: 50px;
}
body.pl-mobile.ff-handheld .tempodialog .inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px !important;
  justify-content: space-between;
}
body.pl-mobile.ff-handheld .tempodialog .inner .dialog-title {
  margin-bottom: 0;
}
body.pl-mobile.ff-handheld .tempodialog .inner p {
  margin: 30px 0 0 0;
  flex: 1;
}

.tempo-controls-menu .inner {
  width: 230px;
  cursor: initial;
  background: var(--background-elevated-base);
}
.tempo-controls-menu .description {
  color: var(--text-base);
  font-size: 11px;
  margin: 5px 40px;
  display: block;
}
.tempo-controls-menu .set-button {
  margin-bottom: 15px;
}
.tempo-controls-menu .title {
  color: var(--text-base);
  font-size: 18px;
  margin-bottom: 15px;
}

.tempo-controls-menu-input {
  padding: 15px 0;
}

.editeffectsdialog {
  z-index: 99;
}
.editeffectsdialog .inner {
  width: auto;
  padding: 0 0 10px 0 !important;
  background-color: var(--background-elevated-base);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.editeffectsdialog .effectspanel {
  margin: 30px auto 10px;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}
.editeffectsdialog .quickcontrols {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: var(--space-large-1);
  z-index: 10;
}
.editeffectsdialog .quickcontrols .quickcontrolfxbase {
  margin: 0 var(--space-tiny);
}

.editquickcontrolsdialog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.editquickcontrolsdialog .name-input input {
  width: 100%;
}

.slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.slot {
  display: grid;
  grid-template-columns: minmax(30px, auto) 1fr;
  align-items: center;
  gap: 8px;
}

.hide-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 8px;
}

.preroll {
  position: absolute;
  padding: 12px 12px 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  text-align: center;
}
.preroll .preroll-title {
  display: none;
}
.preroll .starts-in {
  font-size: 18px;
}
.preroll .dots .dot {
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--essential-negative);
  margin: 5px;
  transition: transform 0.4s;
}
.preroll .dots .dot.future {
  opacity: 0.3;
}
.preroll .dots .dot.active {
  transform: scale(1.6);
}
.preroll .dots .dot.display-line-instead {
  transform: scaleY(0.1);
  border-radius: 5px;
  transition: transform 0s;
}

.add-loop-dialog .inner,
.edit-loop-dialog .inner {
  padding: 0 0 40px 0;
  width: 600px;
  max-height: 800px;
  height: 100vh;
  overflow: scroll;
  border-radius: 4px;
}
.add-loop-dialog .inner .closer,
.edit-loop-dialog .inner .closer {
  top: 8px;
  right: 8px;
}
.add-loop-dialog .inner .header,
.edit-loop-dialog .inner .header {
  background-color: var(--background-base);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-bottom: 40px;
}
.add-loop-dialog .inner .header h5,
.edit-loop-dialog .inner .header h5 {
  line-height: 48px;
  text-transform: none;
  margin: 0;
  padding-top: 46px;
  padding-bottom: 46px;
  color: var(--text-base);
  font-size: 18px;
  font-weight: 400;
}
.add-loop-dialog .inner .header h5 .soundtrap-icon,
.edit-loop-dialog .inner .header h5 .soundtrap-icon {
  font-size: 22px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  line-height: 48px;
  background-color: var(--essential-primary);
  margin-right: 10px;
  vertical-align: top;
}
.add-loop-dialog .input-row,
.edit-loop-dialog .input-row {
  width: 400px;
  margin: 0 auto 20px;
  text-align: left;
}
.add-loop-dialog .input-row label,
.edit-loop-dialog .input-row label {
  display: block;
  font-size: 13px;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--text-base);
  vertical-align: top;
  margin-top: 2px;
}
.add-loop-dialog .input-row label.for-input-text,
.edit-loop-dialog .input-row label.for-input-text {
  margin-top: 8px;
}
.add-loop-dialog .input-row input[type=text],
.add-loop-dialog .input-row .key-input,
.edit-loop-dialog .input-row input[type=text],
.edit-loop-dialog .input-row .key-input {
  border: 1px solid var(--decorative-subdued);
  border-radius: 4px;
  background-color: var(--background-elevated-base);
  width: 100%;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  color: var(--text-base);
  box-sizing: border-box;
}
.add-loop-dialog .input-row .key-input,
.edit-loop-dialog .input-row .key-input {
  padding: 0px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
}
.add-loop-dialog .input-row .key-input .value,
.edit-loop-dialog .input-row .key-input .value {
  padding: 6px;
  flex: 1;
}
.add-loop-dialog .input-row .key-input .soundtrap-icon,
.edit-loop-dialog .input-row .key-input .soundtrap-icon {
  border-left: 1px solid var(--decorative-subdued);
  color: var(--text-base);
  padding: 0 10px;
  font-size: 14px;
  line-height: 32px;
  top: initial;
}
.add-loop-dialog .input-row.oneshot-row,
.edit-loop-dialog .input-row.oneshot-row {
  margin-top: 35px;
}
.add-loop-dialog .input-row.oneshot-row .soundtrap-icon,
.edit-loop-dialog .input-row.oneshot-row .soundtrap-icon {
  margin-left: 6px;
  color: var(--decorative-subdued);
  vertical-align: top;
  font-size: 15px;
  margin-top: 1px;
  display: inline-block;
}
.add-loop-dialog .input-row.create-sampled-instrument-for-sampler-row,
.edit-loop-dialog .input-row.create-sampled-instrument-for-sampler-row {
  margin-top: 35px;
}
.add-loop-dialog .input-row input[type=checkbox],
.edit-loop-dialog .input-row input[type=checkbox] {
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
  margin-right: 5px;
}
.add-loop-dialog .input-row input[type=checkbox]:checked,
.edit-loop-dialog .input-row input[type=checkbox]:checked {
  border-color: var(--decorative-subdued);
  background-color: var(--background-base);
  color: var(--text-base);
}
.add-loop-dialog .input-row .tag-checkboxes,
.edit-loop-dialog .input-row .tag-checkboxes {
  display: inline-block;
  margin-bottom: -10px;
}
.add-loop-dialog .input-row .tag-checkbox,
.edit-loop-dialog .input-row .tag-checkbox {
  display: inline-block;
  margin-bottom: 10px;
  width: 132px;
  font-size: 13px;
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--text-base);
}
.add-loop-dialog .input-row .tag-checkbox span,
.edit-loop-dialog .input-row .tag-checkbox span {
  margin-left: 5px;
  vertical-align: top;
  margin-top: 1px;
  display: inline-block;
}
.add-loop-dialog .explanation,
.edit-loop-dialog .explanation {
  margin-top: 10px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-base);
}
.add-loop-dialog .explanation .soundtrap-icon,
.edit-loop-dialog .explanation .soundtrap-icon {
  vertical-align: baseline;
  color: var(--decorative-subdued);
  margin-right: 10px;
}
.add-loop-dialog .flatbutton,
.edit-loop-dialog .flatbutton {
  border-radius: 19px;
  min-width: 100px;
  margin: 0 3px;
  font-weight: 400;
}
body.ff-handheld .add-loop-dialog .inner,
body.ff-handheld .edit-loop-dialog .inner {
  padding-bottom: 20px;
  width: 300px;
}
body.ff-handheld .add-loop-dialog .inner .header,
body.ff-handheld .edit-loop-dialog .inner .header {
  margin-bottom: 10px;
}
body.ff-handheld .add-loop-dialog .inner .header h5,
body.ff-handheld .edit-loop-dialog .inner .header h5 {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 40px;
}
body.ff-handheld .add-loop-dialog .inner .input-row,
body.ff-handheld .edit-loop-dialog .inner .input-row {
  width: 260px;
}
.add-loop-dialog .soundpack-area .loops-to-add,
.edit-loop-dialog .soundpack-area .loops-to-add {
  max-height: 150px;
  overflow-y: scroll;
}
.add-loop-dialog .soundpack-area .soundpack-error,
.edit-loop-dialog .soundpack-area .soundpack-error {
  color: #b4074b;
}

.addeffectdialog .inner {
  will-change: transform;
  width: 1000px;
  text-align: center;
  padding: 5px 10px;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps {
  border-top: 1px solid var(--decorative-subdued);
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
  background-color: var(--background-elevated-base);
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: center;
  text-align: left;
  border-bottom: 1px solid var(--decorative-subdued);
  padding: 10px;
  margin: 0;
  border-left: 9px solid var(--decorative-subdued);
  background-color: var(--background-elevated-base);
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp .stomp-wrapper {
  padding-left: 2px;
  width: 46px;
  height: 68px;
  padding-top: 6px;
  z-index: 1;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp .stomp-wrapper .stomp {
  transform: scale(0.25, 0.25);
  transform-origin: 0 0 0;
  margin: 0;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp .name-label2 {
  display: block;
  flex: 1;
  margin-left: 10px;
  line-height: 69px;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp .preview {
  margin: 0 10px 0 0;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp .paid-effect-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
body.pl-mobile.ff-handheld .addeffectdialog .inner .stomps .ministomp .paid-effect-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--essential-primary);
}
.addeffectdialog .inner .stomps {
  margin: 25px 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.addeffectdialog .ministomp, .effects-picker .ministomp {
  display: flex;
  flex-direction: column;
  margin: 0 13px 20px;
}
.addeffectdialog .ministomp .knob, .effects-picker .ministomp .knob {
  border: 2px solid var(--essential-subdued);
}
.addeffectdialog .ministomp .dropdown.param-type, .effects-picker .ministomp .dropdown.param-type {
  display: none;
}
.addeffectdialog .ministomp .miniknob .knobfg, .addeffectdialog .ministomp .smallknob .knobfg, .effects-picker .ministomp .miniknob .knobfg, .effects-picker .ministomp .smallknob .knobfg {
  width: 2px;
  top: 3px;
}
.addeffectdialog .ministomp .miniknob .knob, .addeffectdialog .ministomp .smallknob .knob, .effects-picker .ministomp .miniknob .knob, .effects-picker .ministomp .smallknob .knob {
  border-width: 2px;
}
.addeffectdialog .ministomp .mediumknob .knobfg, .effects-picker .ministomp .mediumknob .knobfg {
  width: 3px;
  top: 3px;
}
.addeffectdialog .ministomp .mediumknob .knob, .effects-picker .ministomp .mediumknob .knob {
  border-width: 3px;
}
.addeffectdialog .ministomp .bigknob .knobfg, .effects-picker .ministomp .bigknob .knobfg {
  width: 4px;
  top: 5px;
}
.addeffectdialog .ministomp .bigknob .knob, .effects-picker .ministomp .bigknob .knob {
  border-width: 4px;
}
.addeffectdialog .ministomp .fatvslider .track, .effects-picker .ministomp .fatvslider .track {
  background-color: var(--background-tinted-base);
}
.addeffectdialog .ministomp .name-label2, .effects-picker .ministomp .name-label2 {
  color: var(--text-base);
  display: none;
}
.addeffectdialog .ministomp .stomp-wrapper, .effects-picker .ministomp .stomp-wrapper {
  cursor: pointer;
  width: 91px;
  height: 131px;
  padding-left: 3px;
  padding-top: 10px;
  z-index: 1;
  /* reset button styling */
  border: none;
  background: none;
}
.pl-mobile .addeffectdialog .ministomp .stomp-wrapper, .pl-mobile .effects-picker .ministomp .stomp-wrapper {
  transition: opacity 150ms;
}
.pl-mobile .addeffectdialog .ministomp .stomp-wrapper:active, .pl-mobile .effects-picker .ministomp .stomp-wrapper:active {
  opacity: 0.1;
  transition: opacity 0ms;
}
body.pl-computer .addeffectdialog .ministomp .stomp-wrapper, body.pl-computer .effects-picker .ministomp .stomp-wrapper {
  transition: opacity 0.3s;
}
body.pl-computer .addeffectdialog .ministomp .stomp-wrapper:hover, body.pl-computer .effects-picker .ministomp .stomp-wrapper:hover {
  transition: opacity 0.03s;
  opacity: 0.6;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp, .effects-picker .ministomp .stomp-wrapper .stomp {
  pointer-events: none;
  transform: scale(0.5, 0.5);
  transform-origin: 0 0 0;
  border: 1px solid var(--decorative-subdued);
  border-radius: 8px;
  box-shadow: 0 4px 6px var(--default-box-shadow-color);
  margin: 0;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .fx-uix__header, .effects-picker .ministomp .stomp-wrapper .stomp .fx-uix__header {
  visibility: hidden;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .name-ribbon, .effects-picker .ministomp .stomp-wrapper .stomp .name-ribbon {
  font-size: 19px;
  font-weight: 500;
  height: 62px;
  top: -21px;
  padding: 2px;
  line-height: 1.1em;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .name-ribbon .draggable-icon, .effects-picker .ministomp .stomp-wrapper .stomp .name-ribbon .draggable-icon {
  display: none;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .name-ribbon .lifecycle-tag, .effects-picker .ministomp .stomp-wrapper .stomp .name-ribbon .lifecycle-tag {
  width: 60px;
  height: 24px;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -6px;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .power-on, .effects-picker .ministomp .stomp-wrapper .stomp .power-on {
  display: none;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .closer, .effects-picker .ministomp .stomp-wrapper .stomp .closer {
  display: none;
}
.addeffectdialog .ministomp .stomp-wrapper .stomp .mediumknob .knobfg,
.addeffectdialog .ministomp .stomp-wrapper .stomp .smallknob .knobfg,
.addeffectdialog .ministomp .stomp-wrapper .stomp .miniknob .knobfg,
.addeffectdialog .ministomp .stomp-wrapper .stomp .bigknob .knobfg, .effects-picker .ministomp .stomp-wrapper .stomp .mediumknob .knobfg,
.effects-picker .ministomp .stomp-wrapper .stomp .smallknob .knobfg,
.effects-picker .ministomp .stomp-wrapper .stomp .miniknob .knobfg,
.effects-picker .ministomp .stomp-wrapper .stomp .bigknob .knobfg {
  border-color: var(--essential-subdued);
}
.addeffectdialog .ministomp .preview, .effects-picker .ministomp .preview {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addeffectdialog .disabledstomp, .effects-picker .disabledstomp {
  -webkit-filter: grayscale(1) brightness(0.6) contrast(0.8);
}

.unexpected-error-dialog .inner {
  display: flex;
  flex-direction: column;
}
.unexpected-error-dialog .inner .message {
  margin-bottom: 20px;
}
.unexpected-error-dialog .inner .error-details {
  width: 100%;
  text-align: left;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  padding: 5px;
  margin-bottom: 30px;
  height: 26px;
}
body:not(.ff-handheld) .unexpected-error-dialog .inner .error-details {
  transition: all 300ms;
}
body:not(.ff-handheld) .unexpected-error-dialog .inner .error-details:focus {
  height: 170px;
}
body.ff-handheld .unexpected-error-dialog .inner .flex-filler {
  flex: 1;
}
body.ff-handheld .unexpected-error-dialog .inner .error-details {
  height: 30vh;
  pointer-events: none;
}

.modalprogressbar,
.st-modal-progress-bar {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 100;
}
.modalprogressbar .inner,
.st-modal-progress-bar .inner {
  max-width: 93vw;
  max-height: 93vh;
}
body.ff-handheld.layout-portrait .modalprogressbar:not(.handheld-portrait-keep-padding) .inner,
body.ff-handheld.layout-portrait .st-modal-progress-bar:not(.handheld-portrait-keep-padding) .inner {
  padding-left: 20px;
  padding-right: 20px;
}
body.ff-handheld.layout-landscape .modalprogressbar:not(.handheld-landscape-keep-padding) .inner,
body.ff-handheld.layout-landscape .st-modal-progress-bar:not(.handheld-landscape-keep-padding) .inner {
  padding-top: 20px;
  padding-bottom: 20px;
}
.modalprogressbar .dialogbackdrop,
.st-modal-progress-bar .dialogbackdrop {
  opacity: 0;
}
.modalprogressbar .inner,
.st-modal-progress-bar .inner {
  will-change: transform;
  box-sizing: border-box;
  position: absolute;
  text-align: center;
  color: var(--text-base);
  width: 600px;
  z-index: 101;
  padding: 40px 80px 60px;
}
@media (max-width: 640px) {
  .modalprogressbar .inner,
  .st-modal-progress-bar .inner {
    padding: 20px;
  }
}
@media (max-height: 640px) {
  .modalprogressbar .inner,
  .st-modal-progress-bar .inner {
    padding: 20px;
  }
}
.modalprogressbar .inner .lbl,
.st-modal-progress-bar .inner .lbl {
  margin-top: 20px;
  margin-bottom: 20px;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family);
  color: var(--text-base);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.modalprogressbar .inner .st-progress-bar,
.modalprogressbar .inner .bar,
.st-modal-progress-bar .inner .st-progress-bar,
.st-modal-progress-bar .inner .bar {
  position: relative;
  margin: 40px auto 70px;
  height: 2px;
  width: 100%;
  background-color: var(--background-elevated-highlight);
}
.modalprogressbar .inner .st-progress-bar .percent,
.modalprogressbar .inner .bar .percent,
.st-modal-progress-bar .inner .st-progress-bar .percent,
.st-modal-progress-bar .inner .bar .percent {
  position: absolute;
  width: 100%;
  top: 8px;
  text-align: center;
}
.modalprogressbar .inner .st-progress-bar .fill,
.modalprogressbar .inner .bar .fill,
.st-modal-progress-bar .inner .st-progress-bar .fill,
.st-modal-progress-bar .inner .bar .fill {
  height: 100%;
  background-color: var(--essential-primary);
  width: 0%;
  will-change: transform;
}
.modalprogressbar .inner .st-progress-bar .fill.fake-fill,
.modalprogressbar .inner .bar .fill.fake-fill,
.st-modal-progress-bar .inner .st-progress-bar .fill.fake-fill,
.st-modal-progress-bar .inner .bar .fill.fake-fill {
  width: 100% !important;
  transform-origin: left center;
  animation: scale 10s infinite cubic-bezier(0.5, 0, 0, 1);
}
@keyframes scale {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.soundsetupwizard {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 100;
}
.soundsetupwizard h5 {
  margin-bottom: 25px;
}
.soundsetupwizard h6 {
  font-size: 15px;
  max-width: 400px;
  margin: 0 auto;
  line-height: 20px;
}
.soundsetupwizard .bullets {
  margin-top: 30px;
  display: inline-block;
}
.soundsetupwizard .bullets .bullet {
  display: flex;
  flex-direction: row;
}
.soundsetupwizard .bullets .bullet .circled {
  flex-shrink: 0;
  border-radius: 40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: var(--background-base);
  color: var(--text-base);
  text-align: center;
  vertical-align: middle;
  margin: 5px 10px 5px 0;
}
.soundsetupwizard .bullets .bullet .explanation {
  align-self: center;
  font-size: 15px;
  line-height: 19px;
  color: var(--text-base);
  text-align: left;
}
.soundsetupwizard .inner {
  position: absolute;
  width: 760px;
  height: 428px;
  text-align: center;
  z-index: 101;
  padding: 10px 20px 15px 20px;
  box-sizing: border-box;
}
.soundsetupwizard .prevskip {
  position: absolute;
  width: 100%;
  padding: 0 20px 20px 20px;
  font-size: 16px;
  left: 0;
  bottom: 0px;
  box-sizing: border-box;
}
.soundsetupwizard .prevskip .prev {
  float: left;
  text-align: left;
  margin: 0;
  padding: 0;
}
.soundsetupwizard .prevskip .skip {
  float: right;
  text-align: right;
  margin: 0;
  padding: 0;
}
.soundsetupwizard .fineprint {
  font-size: 11px;
  line-height: 1.5em;
  color: var(--text-subdued);
}
.soundsetupwizard .devicestep {
  height: 100%;
}
.soundsetupwizard .devicestep .devicestep-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.soundsetupwizard .devicestep .devicestep-container .devicebuttons {
  flex: 2;
  overflow-y: auto;
  margin-bottom: 40px;
}
.soundsetupwizard .devicestep .deviceimage {
  width: 386px;
  height: 272px;
  margin-left: 185px;
  background: url("/studio/assets/images/chooseinstrument/device_popup.png") no-repeat;
}
.soundsetupwizard .devicebutton {
  display: block;
  margin-top: 10px;
}
.soundsetupwizard .devicebutton button {
  width: 200px;
  max-width: 50vw;
  line-height: 1.25;
  padding: var(--space-small-1) 0;
}
.soundsetupwizard .devicebutton .bar {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px 22px 6px 22px;
  width: 200px;
  max-width: 22vw;
  height: 4px;
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
  overflow: hidden;
}
.soundsetupwizard .devicebutton .bar > div {
  will-change: transform;
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 200px;
  background-color: var(--essential-primary);
}
.soundsetupwizard .devicebutton.selected .bar {
  border: 1px solid var(--decorative-subdued);
}
.soundsetupwizard .calibrationstep .vumeter {
  position: relative;
  width: 256px;
  height: 160px;
  background: #ffffff url("/studio/assets/images/chooseinstrument/db_meter_bg.png") 0 0 no-repeat no-repeat;
  background-size: contain;
  overflow: hidden;
  margin: 40px auto;
}
.soundsetupwizard .calibrationstep .vumeter .needle {
  will-change: transform;
  position: absolute;
  top: 17%;
  left: 50%;
  margin-left: -2px;
  background-color: #333333;
  width: 3px;
  height: 167%;
}
.soundsetupwizard .calibrationstep .vumeter .bracket {
  position: absolute;
  bottom: -19px;
  left: 50%;
  margin-left: -15px;
  background-color: #333333;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
.soundsetupwizard .calibrationstep .keepplaying {
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.soundsetupwizard .calibrationstep .keepplaying.alternate {
  color: #c8c8c8;
}
.soundsetupwizard ul {
  max-width: 340px;
  text-align: left;
  margin: 0 auto;
  line-height: 1.5em;
}
body.pl-mobile .soundsetupwizard ul {
  line-height: 3em;
}

.sectionaldialog2 {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 100;
}
.sectionaldialog2 .dialogbackdrop {
  z-index: 100;
}
.sectionaldialog2 .inner {
  will-change: transform;
  position: absolute;
  text-align: center;
  width: 600px;
  z-index: 101;
  padding: 40px 80px 60px;
  box-sizing: border-box;
}
.sectionaldialog2 h5 {
  text-transform: uppercase;
  word-wrap: break-word;
}
.sectionaldialog2 .genericmessage {
  text-align: center;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 19px;
  word-wrap: break-word;
}
.sectionaldialog2 .genericmessage p {
  margin-bottom: 20px;
}
.sectionaldialog2 .genericmessage p:last-child {
  margin-bottom: 0;
}
.sectionaldialog2 .genericmessage {
  overflow-y: auto;
  max-height: 200px;
}
@media (max-height: 500px) {
  .sectionaldialog2 .genericmessage {
    max-height: 105px;
  }
}
.sectionaldialog2 .buttons {
  margin-bottom: -10px;
}
.sectionaldialog2 .buttons a, .sectionaldialog2 .buttons button {
  margin-bottom: 10px;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  min-width: 100px;
}
.pl-computer .sectionaldialog2 .buttons a:hover, .pl-computer .sectionaldialog2 .buttons button:hover {
  text-decoration: none;
}
.sectionaldialog2 .inner {
  padding: 0;
  width: 600px;
  height: 590px;
  display: flex;
  flex-direction: column;
}
.sectionaldialog2 .inner .dialogheader {
  border-radius: 5px 5px 0 0;
  background-color: #5a00aa;
  color: #ffffff;
  display: flex;
  width: 100%;
  height: 30%;
}
.sectionaldialog2 .inner .dialogbody {
  background-color: #ffffff;
  width: 100%;
  height: 45%;
}
.sectionaldialog2 .inner .dialogfooter {
  border-radius: 0 0 5px 5px;
  background-color: #e6e9ec;
  width: 100%;
  height: 25%;
}
.sectionaldialog2 .inner .flexfiller {
  flex: 1;
  -webkit-flex: 1;
}
.sectionaldialog2 .shadoweddialog {
  background-color: transparent;
  border-radius: 5px;
}
.sectionaldialog2.sectionaldialog2-fullscreen .inner {
  width: 100vw;
  height: 100vh;
}
.sectionaldialog2.sectionaldialog2-fullscreen .inner .dialogheader {
  border-radius: 0;
}
.sectionaldialog2.sectionaldialog2-fullscreen .inner .dialogbody {
  height: 50%;
}
.sectionaldialog2.sectionaldialog2-fullscreen .inner .dialogfooter {
  border-radius: 0;
  height: 20%;
}

.collaborationstarteddialog .inner .dialogheader  {
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-tiny);
}
.collaborationstarteddialog .inner .dialogheader  .inviteinfo {
  text-align: left;
}
.collaborationstarteddialog .inner .dialogheader  .inviteinfo h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.2em;
}
.collaborationstarteddialog .inner .dialogheader  .inviteinfo p {
  color: white;
  margin-bottom: 10px;
}
.collaborationstarteddialog .inner .dialogheader  .profileicon {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background-color: #ffffff;
  margin-right: 30px;
}
.collaborationstarteddialog .inner .dialogheader  .profileicon img {
  width: 116px;
  height: 116px;
  margin-top: 2px;
  border-radius: 58px;
}
@media (max-height: 400px) {
  .collaborationstarteddialog .inner .dialogheader  .profileicon {
    transform: scale(0.8);
  }
}
.collaborationstarteddialog .inner .dialogbody  {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.collaborationstarteddialog .inner .dialogbody  .messagebox {
  overflow-y: auto;
  word-break: break-all;
  margin-top: 10px;
}
.collaborationstarteddialog .inner .dialogbody  .messagebox .message {
  font-weight: bold;
  margin-bottom: 0;
}
.collaborationstarteddialog .inner .dialogbody  .messagebox .usermessage {
  margin: 10px 12% 0;
}
.collaborationstarteddialog .inner .dialogbody  .fatfingerbutton {
  margin-bottom: 20px;
}
.collaborationstarteddialog .inner .dialogfooter  .bold {
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: bold;
}
.collaborationstarteddialog .inner .dialogfooter  .buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.collaborationstarteddialog .inner .dialogfooter  .buttons .fatfingerbutton .flatbutton .buttontext {
  margin-right: 10px;
}
@media (max-height: 600px) and (orientation: portrait) {
  .collaborationstarteddialog .inner .dialogfooter  .buttons {
    flex-direction: column;
  }
}
@media (max-height: 600px) {
  .pl-mobile .collaborationstarteddialog .inner .dialogfooter  {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pl-mobile .collaborationstarteddialog .inner .dialogfooter  .bold {
    display: none;
  }
}
.collaborationstarteddialog .shadoweddialog {
  background-color: transparent;
  border-radius: 5px;
}
.collaborationstarteddialog.sectionaldialog2-fullscreen .inner .dialogfooter .bold {
  font-size: 13px;
}
@media (max-height: 600px) {
  .collaborationstarteddialog.sectionaldialog2-fullscreen .inner .dialogfooter .fatfingerbutton {
    padding: 0;
  }
}

.tuner-dialog .tuner-meter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tuner-dialog .tuner-meter__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--background-elevated-base), transparent 30%, transparent 70%, var(--background-elevated-base));
  pointer-events: none;
}
.tuner-dialog .tuner-meter__line {
  position: absolute;
}
.tuner-dialog .tuner-meter__needle, .tuner-dialog .tuner-meter__needle-gradient {
  will-change: transition;
}
.tuner-dialog .tuner-meter__needle.smooth-transition, .tuner-dialog .tuner-meter__needle-gradient.smooth-transition {
  transition: transform 0.3s;
}
.tuner-dialog .tuner-meter__needle-gradient {
  opacity: 0.3;
}
.tuner-dialog__content {
  display: flex;
  flex-direction: column;
}
.tuner-dialog__content .high, .tuner-dialog__content .low {
  color: var(--essential-spotlight);
}
.tuner-dialog__content .perfect {
  color: var(--essential-positive);
}
.tuner-dialog__status {
  font-size: 18px;
}
.tuner-dialog__pitch {
  font-size: var(--space-huge);
}
.tuner-dialog__no-pitch {
  color: var(--decorative-subdued);
}
.tuner-dialog__octave {
  margin-left: 2px;
  font-size: 18px;
}

.presetselectordialog .dialogcontent {
  position: absolute;
  width: 720px;
  padding: 0;
  border-radius: 4px;
  will-change: transform;
  z-index: 101;
}
.presetselectordialog .dialogcontent h3 {
  margin: 0;
  margin-block-start: 0;
}
.presetselectordialog .dialogcontent .open-search,
.presetselectordialog .dialogcontent .close-search {
  display: none;
}
.presetselectordialog .dialogcontent .closer {
  border: 0;
  background-color: transparent;
  position: absolute;
  right: 0;
  font-size: 16px;
  line-height: 75%;
  color: var(--essential-subdued);
  padding: 20px;
  cursor: pointer;
  transition: color 0.03s;
}
.presetselectordialog .dialogcontent .closer:active {
  color: var(--essential-base);
}
.presetselectordialog .dialogcontent .closer:hover {
  color: var(--essential-base);
}
.presetselectordialog .dialogcontent .preset-container-title {
  margin: 33px 40px;
  text-align: left;
}
.presetselectordialog .dialogcontent .title-l {
  color: var(--text-base);
}
.presetselectordialog .dialogcontent .shadow {
  position: absolute;
  width: 100%;
  height: 89px;
  top: 0;
  box-shadow: 0 2px 2px 0 var(--background-tinted-highlight);
  z-index: 1;
  pointer-events: none;
}
.presetselectordialog .dialogcontent .preset-container-title-offset {
  margin-bottom: 22px;
}
.presetselectordialog .dialogcontent .shadow-offset {
  height: 107px;
}
.presetselectordialog .dialogcontent .new-preset-announcement {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  padding: 0;
  border: none;
  background-color: transparent;
}
.presetselectordialog .dialogcontent .new-preset-announcement-badge {
  background-color: var(--background-base);
  position: relative;
  height: 18px;
  padding: 0 7px;
  color: white;
  border-radius: 2px;
  text-transform: uppercase;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  margin-right: 6px;
}
.presetselectordialog .dialogcontent .new-preset-announcement-text-container {
  display: flex;
  flex-direction: row;
}
.presetselectordialog .dialogcontent .new-preset-announcement-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--decorative-subdued);
  text-decoration: underline;
  margin-right: 4px;
  padding: 0;
  border: none;
  background-color: transparent;
}
.presetselectordialog .dialogcontent .presetselectorcontainer {
  display: flex;
  flex-direction: row;
  flex: 1;
  border-top: 1px var(--decorative-subdued) solid;
}
.presetselectordialog .dialogcontent .presetselectorcontainer.show-sampler-top-category .presetselectorpane {
  height: 580px;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .search-result-preset-list {
  padding: 0;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane {
  height: 522px;
  box-sizing: border-box;
  background-color: var(--background-elevated-base);
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.topcategorypane {
  width: 230px;
  border-bottom-left-radius: 4px;
  overflow: auto;
  border-right: solid 1px var(--background-tinted-base);
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.topcategorypane .presetselectorpanescroller {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.subcategorypane {
  width: 230px;
  overflow: auto;
  padding-bottom: 5px;
  border-right: solid 1px var(--background-tinted-base);
  padding: 0;
  margin-bottom: 0;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.presetpane {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  border-bottom-right-radius: 4px;
  position: relative;
  padding: 0;
  margin-bottom: 0;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.presetpane .presetheader .presetheadercontent {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 44px;
  font-size: 13px;
  padding-left: 20px;
  background-color: var(--background-tinted-base);
  box-sizing: border-box;
  color: var(--text-base);
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.presetpane .presetheader .presetheadercontent .presetheadertext {
  font-family: var(--font-family);
  font-weight: 500;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.presetpane .presetheader .presetheadercontent .presetcount {
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--text-subdued);
  margin-left: 10px;
}
.presetselectordialog .dialogcontent .presetselectorcontainer .presetselectorpane.presetpane .presetheader .presetheadercontent .spacer {
  flex: 1;
}

.ff-handheld .presetselectordialog .dialogcontent .presetselectorcontainer {
  overflow-y: scroll;
}

.ff-handheld .presetselectordialog .dialogcontent h2 {
  padding: 0;
}
.ff-handheld .presetselectordialog .dialogcontent .open-search,
.ff-handheld .presetselectordialog .dialogcontent .close-search {
  font-size: 18px;
  color: var(--essential-base);
  border: 0;
  padding: 0;
  background: transparent;
}
.ff-handheld .presetselectordialog .dialogcontent .open-search {
  transform: scale(1);
  opacity: 1;
  right: 54px;
  left: auto;
  top: 20px;
}
.ff-handheld .presetselectordialog .dialogcontent .close-search {
  transform: scale(0) translateX(-100%);
  opacity: 0;
  right: auto;
  left: 10px;
  top: 18px;
}
.ff-handheld .presetselectordialog .dialogcontent .open-search,
.ff-handheld .presetselectordialog .dialogcontent .close-search {
  display: block;
  font-size: 18px;
  position: absolute;
  z-index: 3;
  width: 20px;
  transition: 400ms all cubic-bezier(0.1, 0.7, 0.1, 1);
}
.ff-handheld .presetselectordialog .dialogcontent .presetselectorcontainer,
.ff-handheld .presetselectordialog .dialogcontent .closer,
.ff-handheld .presetselectordialog .dialogcontent .title-l {
  transition: 400ms all cubic-bezier(0.1, 0.7, 0.1, 1);
}
.ff-handheld .presetselectordialog .dialogcontent.searching .open-search {
  transform: scale(0) translateX(100%);
  opacity: 0;
}
.ff-handheld .presetselectordialog .dialogcontent.searching .close-search {
  transform: scale(1);
  opacity: 1;
}
.ff-handheld .presetselectordialog .dialogcontent.searching .presetselectorcontainer,
.ff-handheld .presetselectordialog .dialogcontent.searching .closer,
.ff-handheld .presetselectordialog .dialogcontent.searching .title-l {
  transform: translateX(-100%);
}

.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .open-search {
  top: 23px;
}
.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .close-search {
  top: 22px;
}
.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .preset-container-title {
  margin: 0;
  display: flex;
  align-items: center;
}
.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .preset-container-title h2 {
  padding: 0 20px;
}
.ff-handheld.layout-landscape .presetselectordialog .dialogcontent .preset-container-title .new-preset-announcement {
  margin: 1rem;
}

.updategradedialog .inner p {
  margin: 30px auto;
}
body.pl-mobile.ff-handheld .updategradedialog .inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px !important;
  justify-content: space-between;
}
body.pl-mobile.ff-handheld .updategradedialog .inner .dialog-title {
  margin-bottom: 0;
}
body.pl-mobile.ff-handheld .updategradedialog .inner p {
  margin: 30px 0 0 0;
  flex: 1;
}

.timerestoredialog .inner {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.timerestoredialog .history-wrapper {
  flex: 1 1 auto;
  overflow-y: auto;
  border-top: 1px solid var(--decorative-subdued);
}
.timerestoredialog table.history {
  width: 100%;
  border-bottom: 1px solid var(--decorative-subdued);
}
.timerestoredialog table.history thead.history_header {
  position: sticky;
  top: 0;
  background: var(--background-elevated-base);
  z-index: 99;
  border-bottom: 1px solid var(--decorative-subdued);
}
.timerestoredialog table.history thead.history_header.sr-only {
  position: absolute;
}
.timerestoredialog table.history thead.history_header th.history_col {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 10px 10px 0;
}
.timerestoredialog table.history thead.history_header th.history_col.version {
  padding-left: var(--space-small);
}
.timerestoredialog table.history tbody.history_items {
  font-size: 13px;
  line-height: 17px;
  min-height: 100px;
  max-height: 300px;
  overflow: auto;
}
.timerestoredialog table.history tbody.history_items tr.history_row {
  border-bottom: 1px solid var(--decorative-subdued);
}
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col {
  white-space: nowrap;
  text-align: left;
  padding: 10px 10px 10px 0;
}
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col .savedby-avatar {
  width: 25px;
  display: inline-block;
  border-radius: 100%;
  margin-right: 5px;
}
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col .history_item_date_main,
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col .history_item_date_additional {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col .history_item_date_additional {
  font-size: 11px;
  color: var(--text-subdued);
}
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col .savedby-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timerestoredialog table.history tbody.history_items tr.history_row td.history_col.version {
  padding-left: var(--space-small);
}
.timerestoredialog .dialog-title {
  padding-bottom: 40px;
  padding-top: 50px;
  padding-left: 60px;
  text-align: left;
  margin: 0;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
}
.timerestoredialog .message {
  margin: 0;
  padding: 20px;
  font-size: 13px;
  line-height: 17px;
}

@media screen and (1920px) {
  .timerestoredialog .history-wrapper {
    max-height: 60vh;
  }
  .timerestoredialog table.history thead.history_header th.history_col.version, .timerestoredialog table.history tbody.history_items tr.history_row td.history_col.version {
    padding-left: var(--space-large);
  }
}
.freesounddisclaimerdialog .inner {
  width: 530px;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 50px;
  padding-right: 50px;
}
.freesounddisclaimerdialog .title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -0.4px;
  text-align: center;
  margin-bottom: 7px;
}
.freesounddisclaimerdialog .body {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.1px;
  text-align: center;
  margin-bottom: 33px;
}
.freesounddisclaimerdialog .body p {
  white-space: pre-line;
}
.freesounddisclaimerdialog .footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.freesounddisclaimerdialog .footer .dontshowagain {
  margin-top: 20px;
  display: block;
  font-weight: 400;
}
.freesounddisclaimerdialog .footer .dontshowagain input {
  margin-right: 5px;
}

.volume-check .inner {
  padding: 60px;
  width: 480px;
  border-radius: 8px;
  box-shadow: 0 1px 8px 0 var(--default-box-shadow-color);
  border: solid 1px var(--decorative-subdued);
}
.volume-check .header {
  margin-top: 0;
  margin-bottom: 16px;
}
.volume-check .dialog-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
}
.volume-check .dialog-title .soundtrap-icon {
  font-size: 20px;
  margin-right: 10px;
}
.volume-check .volume-check-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.volume-check .volume-check-step.calibration button[disabled] {
  color: var(--text-subdued);
}
.volume-check .volume-check-step .info {
  height: 80px;
  min-height: 80px;
  max-height: 80px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
}
.volume-check .volume-check-step .info .link {
  margin-left: 4px;
  text-decoration: underline;
}
.volume-check .volume-check-step .info .link:hover {
  color: var(--text-primary);
}
.volume-check .volume-check-step .vu-meter {
  margin-top: 40px;
  margin-bottom: 40px;
}
.volume-check .volume-check-step .reset-link {
  font-weight: 500;
  background-color: transparent;
  border: none;
  color: var(--text-primary);
  padding: 1px 6px;
}
.volume-check .volume-check-step .reset-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.volume-check .volume-check-step .status-badge {
  z-index: 100;
  margin-top: 25px;
}
.volume-check .volume-check-step .keepplaying {
  font-weight: 500;
  color: var(--essential-primary);
}

.transcript-trim-region-dialog .inner {
  padding: 10px;
  width: auto;
}
.transcript-trim-region-dialog .inner .wave-container {
  position: relative;
  border-radius: 2px;
  background-color: #f5f5f5;
  padding-top: 11px;
  padding-bottom: 11px;
}
.transcript-trim-region-dialog .inner canvas {
  pointer-events: none;
  opacity: 0.3;
}
.transcript-trim-region-dialog .inner .playhead {
  will-change: transform;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  padding-bottom: 10px;
}
.transcript-trim-region-dialog .inner .playhead .head {
  position: absolute;
  top: 0;
  left: -5px;
  width: 12px;
  height: 18px;
}
.transcript-trim-region-dialog .inner .playhead .body {
  width: 2px;
  height: 100%;
  background-color: #5a00aa;
}
.transcript-trim-region-dialog .inner .region-segment {
  position: absolute;
  top: 11px;
  width: 130px;
  background-color: var(--background-base);
}
.transcript-trim-region-dialog .inner .region-segment .trim-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: 10px;
  cursor: pointer;
}
.transcript-trim-region-dialog .inner .region-segment.region-segment-end {
  left: 0;
  border-radius: 0 10px 10px 0;
}
.transcript-trim-region-dialog .inner .region-segment.region-segment-end .trim-handle {
  right: 5px;
  background: url("/studio/assets/images/studio/rh_end.png") no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .transcript-trim-region-dialog .inner .region-segment.region-segment-end .trim-handle {
    background-image: url("/studio/assets/images/studio/rh_end_2x.png");
    background-size: 14px;
  }
}
.transcript-trim-region-dialog .inner .region-segment.region-segment-start {
  right: 0;
  border-radius: 10px 0 0 10px;
}
.transcript-trim-region-dialog .inner .region-segment.region-segment-start .trim-handle {
  left: 5px;
  background: url("/studio/assets/images/studio/rh_start.png") no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .transcript-trim-region-dialog .inner .region-segment.region-segment-start .trim-handle {
    background-image: url("/studio/assets/images/studio/rh_start_2x.png");
    background-size: 14px;
  }
}

.remoterecwarningdialog .inner {
  width: 460px;
  padding-bottom: 60px;
  padding-left: 75px;
  padding-right: 75px;
  border-radius: 8px;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #e6e6e6;
}
.remoterecwarningdialog .inner .mtr-video {
  margin-top: 43px;
  margin-bottom: 30px;
  width: 102%;
}
.remoterecwarningdialog .inner .message {
  margin-top: 25px;
}
.remoterecwarningdialog .inner button {
  margin: 0 5px;
}

.generate-vocals-dialog .inner {
  padding: 0 0 40px;
  width: auto;
}
.generate-vocals-dialog .dialog-title {
  margin-top: 40px;
  font-size: 25px;
  letter-spacing: -0.3px;
}
.generate-vocals-dialog .top-section {
  padding-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.generate-vocals-dialog .mid-section {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: row;
}
.generate-vocals-dialog .message-input {
  resize: none;
  margin-top: 20px;
  margin-left: 40px;
  margin-right: 40px;
  height: 160px;
  width: 460px;
}
.generate-vocals-dialog .generate-vocals-voice-selector {
  width: 200px;
}
.generate-vocals-dialog .generate-vocals-transpose-selector {
  width: 200px;
}
.generate-vocals-dialog .buttons {
  margin-top: 40px;
}

.setup-voice-tracks-dialog .inner {
  width: 740px;
  height: 417px;
  padding-left: 83px;
  padding-right: 83px;
  will-change: transform;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 1px 8px 0 var(--default-box-shadow-color);
  border: solid 1px var(--decorative-subdued);
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body {
  margin-bottom: 40px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-row .st-dropdown-button {
  background: none;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-left-column {
  min-width: 34px;
  width: 34px;
  max-width: 34px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-middle-column {
  margin-left: 10px;
  margin-right: 10px;
  flex: 1;
  min-width: 160px;
  max-width: 160px;
  width: 160px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-right-column {
  flex: 1;
  min-width: 160px;
  max-width: 160px;
  width: 160px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-label {
  color: var(--text-base);
  text-align: left;
  margin-bottom: 5px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-face {
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-device-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-device-list.readonly {
  border: 1px solid transparent;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-device-list .input-selector {
  margin-left: 7px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-device-list .input-selector .input-selector-device-name {
  text-align: left;
  font-size: 15px;
  font-weight: normal;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .voice-track-chooser-device-list .input-selector .ic-chevron-double {
  font-size: 15px;
}
.setup-voice-tracks-dialog .setup-voice-tracks-dialog-body .voice-track-chooser .input-selector {
  width: 160px;
}

.copy-text-dialog .header {
  padding-bottom: 35px;
}
.copy-text-dialog .message {
  font-size: 15px;
  line-height: 1.33;
  margin-bottom: 10px;
  margin-top: 20px;
  text-align: left;
}
.copy-text-dialog .secondary-message {
  color: var(--text-base);
  line-height: 1.31;
  margin-bottom: 40px;
  text-align: left;
}

.cost-analysis-dialog .inner {
  width: auto;
}
.cost-analysis-dialog .inner .title {
  margin-top: 40px;
  font-size: 25px;
  letter-spacing: -0.3px;
}
.cost-analysis-dialog .body {
  margin-top: 40px;
  margin-bottom: 40px;
}
.cost-analysis-dialog .track-cost {
  margin-bottom: 3px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: center;
}
.cost-analysis-dialog .track-cost .track-name {
  font-size: 13px;
  width: 150px;
  align-self: center;
  margin-right: 5px;
  text-align: right;
  white-space: pre;
}
.cost-analysis-dialog .track-cost .costs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.cost-analysis-dialog .track-cost .costs .cost {
  margin-right: 3px;
  font-size: 11px;
  white-space: pre;
  height: 40px;
  border-radius: 3px;
  text-align: center;
  min-width: 2px;
  padding-top: 4px;
}
.cost-analysis-dialog .track-cost .costs .cost.instrument {
  background-color: rgba(200, 115, 227, 0.5647058824);
}
.cost-analysis-dialog .track-cost .costs .cost.fx {
  background-color: rgba(139, 115, 227, 0.5647058824);
}

.call-accept-dialog .inner {
  width: 378px;
  padding-left: 60px;
  padding-right: 60px;
}
.call-accept-dialog .inner .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.call-accept-dialog .inner .body .call-accept-dialog-profile {
  margin-top: 10px;
  margin-bottom: 30px;
  width: 182px;
  height: 182px;
  min-width: 182px;
  min-height: 182px;
  max-width: 182px;
  max-height: 182px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.call-accept-dialog .inner .body .call-accept-dialog-profile .call-accept-dialog-profile-pulse {
  position: absolute;
  width: 0%;
  height: 0%;
  opacity: 0;
  background-color: #aa8cf0;
  border-radius: 50%;
  animation-name: call-accept-pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.call-accept-dialog .inner .body .call-accept-dialog-profile .call-accept-dialog-profile-pulse.call-accept-dialog-profile-pulse-1 {
  animation-delay: 0ms;
}
.call-accept-dialog .inner .body .call-accept-dialog-profile .call-accept-dialog-profile-pulse.call-accept-dialog-profile-pulse-2 {
  animation-delay: 400ms;
}
.call-accept-dialog .inner .body .call-accept-dialog-profile .call-accept-dialog-profile-pulse.call-accept-dialog-profile-pulse-3 {
  animation-delay: 800ms;
}
.call-accept-dialog .inner .body .call-accept-dialog-profile .st-profile-icon {
  z-index: 1;
}
.call-accept-dialog .inner .body .call-accept-dialog-guest-access {
  margin-bottom: 40px;
}
.call-accept-dialog .footer .btn {
  font-size: 15px;
}
.call-accept-dialog .footer .btn .soundtrap-icon {
  line-height: inherit;
  margin-right: 7px;
  display: inline-block;
  position: relative;
  top: 1px;
  vertical-align: top;
}
.call-accept-dialog .footer .call-accept-dialog-accept-call {
  background-color: #43ba6b;
  margin-left: 8px;
}
.call-accept-dialog .footer .call-accept-dialog-accept-call:hover {
  background-color: rgba(67, 186, 107, 0.6);
}
.call-accept-dialog .footer .call-accept-dialog-accept-call .soundtrap-icon {
  font-size: 14px;
}
.call-accept-dialog .footer .call-accept-dialog-decline-call {
  background-color: #d9114c;
  margin-right: 8px;
}
.call-accept-dialog .footer .call-accept-dialog-decline-call:hover {
  background-color: rgba(217, 17, 76, 0.6);
}
.call-accept-dialog .footer .call-accept-dialog-decline-call .soundtrap-icon {
  font-size: 16px;
}

@keyframes call-accept-pulse {
  0% {
    width: 0%;
    height: 0%;
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  35% {
    opacity: 0.5;
  }
  50% {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
  }
}
.headphone-prompt-dialog .dialog-title-big {
  font-weight: bold;
}
.headphone-prompt-dialog .ic-headphones {
  font-size: 60px;
  line-height: 60px;
  color: #9b9b9b;
  margin: 35px;
}
.headphone-prompt-dialog .description {
  margin-bottom: 42px;
}
.headphone-prompt-dialog .checkbox-area {
  margin-bottom: 20px;
}
.headphone-prompt-dialog .st-checkbox .st-checkbox-label {
  vertical-align: middle;
  font-weight: normal;
  font-size: 15px;
}

.swingquantizedialog .inner {
  padding: 10px 20px 40px;
  width: 400px;
}
.swingquantizedialog .swing-strength-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: space-around;
  position: relative;
}
.swingquantizedialog .swing-strength-knob-container {
  position: absolute;
  top: 10px;
}
.swingquantizedialog .min-swing,
.swingquantizedialog .max-swing {
  font-size: 14px;
  position: absolute;
}
.swingquantizedialog .min-swing {
  bottom: 35px;
  left: 125px;
}
.swingquantizedialog .max-swing {
  bottom: 35px;
  right: 120px;
}
.swingquantizedialog .swing-strength-knob {
  margin: 0 auto;
}

.soundtrap-original-dialog .inner {
  padding: 0px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.soundtrap-original-dialog .inner .body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.soundtrap-original-dialog .inner .body .header-background {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}
.soundtrap-original-dialog .inner .body .header-background .header-artwork {
  background-size: cover;
  width: 100%;
}
.soundtrap-original-dialog .inner .body .header-background .header-artwork .header-artwork-sizer {
  padding-top: 38.5%;
}
.soundtrap-original-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
  width: 75%;
}
.soundtrap-original-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
}
.soundtrap-original-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
}
.soundtrap-original-dialog .inner .body .body-wrapper .title-and-description .category-info {
  margin-top: 14px;
  color: var(--text-subdued);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.soundtrap-original-dialog .inner .body .body-wrapper .title-and-description .category-info .soundtrap-icon {
  font-size: 12px;
}
.soundtrap-original-dialog .inner .body .body-wrapper .title-and-description .category-info .category {
  margin-left: 8px;
}
.soundtrap-original-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: 19px;
  line-height: 20px;
  color: var(--text-base);
}
.soundtrap-original-dialog .inner .body .body-wrapper .content {
  margin-top: 20px;
  color: var(--text-base);
}
.soundtrap-original-dialog .inner .body .body-wrapper .content .content-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-left: 25px;
  line-height: 22px;
}
.soundtrap-original-dialog .inner .footer {
  margin-top: 19px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 19px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--decorative-subdued);
}
.soundtrap-original-dialog .inner .footer .button_GP_L {
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
}

.collaboration-crew-dialog .inner {
  padding: 0px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.collaboration-crew-dialog .inner .header .header-background {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.collaboration-crew-dialog .inner .header .header-background .collaboration-crew-video {
  height: 270px;
}
.collaboration-crew-dialog .inner .body {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collaboration-crew-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
  width: 75%;
}
.collaboration-crew-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
}
.collaboration-crew-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
}
.collaboration-crew-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: 19px;
  line-height: 20px;
}
.collaboration-crew-dialog .inner .footer {
  margin-top: 19px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 19px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #e6e6e6;
}
.collaboration-crew-dialog .inner .footer .button_GP_L {
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
}

.st-dialog {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 200;
}
.st-dialog.st-dialog-clickthrough {
  pointer-events: none;
}

.not-visible {
  visibility: hidden;
}

.st-dialogbackdrop {
  background-color: var(--dialog-shadow-light);
  bottom: 0;
  height: 100%;
  left: 0;
  position: sticky;
  right: 0;
  top: 0;
  width: 100%;
}
.st-dark-theme .st-dialogbackdrop, .with-808-styling .keyboardinstrumentgui .row1 .quickcontrols-allocated-space .quickcontrols-container .quickcontrols .st-dialogbackdrop, .sampler-crossfade-handle .st-dialogbackdrop, .sampler-crossfade-handle-chamfer .st-dialogbackdrop, .sampler-crossfade-icon .st-dialogbackdrop {
  background-color: var(--dialog-shadow-dark);
}
.st-dialogbackdrop.st-dialogbackdrop-transparent {
  opacity: 0;
}

.st-dialog-modal {
  will-change: transform;
  position: absolute;
  text-align: left;
  z-index: 201;
  background: var(--background-elevated-base);
  border-radius: 10px;
  box-shadow: 0 1px 8px 0 var(--default-box-shadow-color);
  border: solid 1px var(--decorative-subdued);
  top: 0;
  pointer-events: all;
}
.st-dialog.st-dialog-nano .st-dialog-modal {
  border-radius: 8px;
  width: 240px;
}
.st-dialog.st-dialog-micro .st-dialog-modal {
  border-radius: 8px;
  width: 280px;
}
.st-dialog.st-dialog-tiny .st-dialog-modal {
  border-radius: 8px;
  width: 340px;
}
.st-dialog.st-dialog-small .st-dialog-modal {
  width: 480px;
}
@media (max-width: 534px) {
  .st-dialog.st-dialog-small .st-dialog-modal {
    width: calc(100vw - 10px); /* Set width to 100% minus the width of the scrollbar */
  }
}
.st-dialog.st-dialog-medium .st-dialog-modal {
  width: 600px;
}
@media (max-width: 768px) {
  .st-dialog.st-dialog-medium .st-dialog-modal {
    width: calc(100vw - 10px); /* Set width to 100% minus the width of the scrollbar */
  }
}
.pl-mobile.ff-handheld .st-dialog-modal.st-dialog-modal-mobile-fullscreen {
  border-radius: 0;
  width: 100%;
  height: 100%;
}
.pl-mobile.ff-handheld .st-dialog-modal.st-dialog-modal-mobile-default {
  max-width: 93vw;
}

.st-dialog-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.st-dialog-body {
  flex: 1;
  padding: var(--space-large) var(--space-large-2) var(--space-medium-1);
}
body.ff-handheld.layout-portrait .st-dialog-body:not(.handheld-portrait-keep-padding) {
  padding: 40px 40px 30px;
}

.st-dialog-title,
.st-dialog-title h2 {
  color: var(--text-base);
  font-size: 25px;
  margin: 0 0 15px;
  font-weight: bold;
  line-height: 1.1;
}

.st-dialog-footer {
  border-top: 1px solid var(--decorative-subdued);
  padding: 15px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-height: 225px) {
  .st-dialog-footer {
    padding: 0 15px;
  }
}
.st-dialog-footer .st-button,
.st-dialog-footer a {
  margin: 5px 0 5px 15px;
}
.st-dialog-footer .st-button:first-child,
.st-dialog-footer a:first-child {
  margin-left: 0;
}

.st-input-dialog input {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.st-select-dialog {
  margin: 16px;
  font-weight: 500;
}
.st-select-dialog__title {
  font-size: 11px;
  font-weight: inherit;
  margin: 0;
}
.st-select-dialog__option-container {
  font-size: 15px;
  padding: 0;
  margin-bottom: 0;
}
.st-select-dialog__radio-container {
  margin-top: 8px;
  background-color: transparent;
  width: 100%;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
}
.st-select-dialog__radio-container-label {
  margin-bottom: 0;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
}
.st-select-dialog__radio-container:hover {
  background-color: var(--background-highlight);
}
.st-select-dialog .st-radio {
  flex: 0;
  padding-right: 12px;
}

.share-dialog-container {
  height: 100%;
  overflow-y: auto;
  max-height: 100vh;
}
.share-dialog-container .share-dialog-inner {
  padding: 48px 0 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.share-dialog-container .share-dialog-inner h3 {
  color: var(--text-base);
  margin: 0;
}
.share-dialog-container .share-dialog-inner h2 {
  color: var(--text-base);
  margin: 0 0 8px 0;
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner .st-button {
    height: 40px;
    padding: 9px 20px 9px 20px;
    font-size: 15px;
    line-height: 15px;
  }
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner {
    min-height: 100%;
  }
  .share-dialog-container .share-dialog-inner h3 {
    background-color: var(--background-elevated-base);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
.share-dialog-container .share-dialog-inner .link-sharing-container, .share-dialog-container .share-dialog-inner .add-collaborator-container, .share-dialog-container .share-dialog-inner .guest-call-container {
  padding-left: 56px;
  padding-right: 56px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner .link-sharing-container, .share-dialog-container .share-dialog-inner .add-collaborator-container, .share-dialog-container .share-dialog-inner .guest-call-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.share-dialog-container .share-dialog-inner .link-sharing-container {
  border-bottom: 1px solid var(--decorative-subdued);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.share-dialog-container .share-dialog-inner .link-sharing-container .link-sharing-warning {
  font-size: 13px;
  line-height: 1.31;
  margin-top: 16px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-collaborator {
  display: flex;
  align-items: center;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search-label {
  display: block;
  font-weight: 500;
  margin: 0 0 4px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search {
  border: 1px solid var(--essential-subdued);
  border-radius: 2px;
  margin-right: 8px;
  min-height: 40px;
  padding: 0 2px;
  position: relative;
  width: 100%;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search.disabled:after {
  background-color: var(--background-tinted-base);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-user-tags-container {
  display: flex;
  flex-flow: wrap;
  flex-grow: 1;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-user-tag {
  background-color: transparent;
  height: 26px;
  margin: 5px 2px 0;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-user-tag .tag-content {
  padding: 5px 24px 5px 4px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-user-tag.has-image .tag-content {
  padding-left: 24px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-user-tag .tag-image {
  height: 20px;
  left: 0;
  top: 3px;
  width: 20px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .add-user-tag .remove {
  top: 8px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .collaborator-tag {
  margin: 4px 8px 0 0;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search-text-input {
  display: flex;
  align-items: center;
  flex: 1;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search-text-input > :first-child {
  flex-grow: 1;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search-suggestions {
  position: relative;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search-input-field {
  background-color: transparent;
  flex-grow: 1;
  height: 26px;
  margin: 5px;
  min-width: 120px;
  padding: 0 0 0 8px;
  vertical-align: middle;
  width: 100%;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-search-input-field:focus {
  border: none;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestions-container {
  padding: 0;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
  left: -1px;
  width: 352px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  z-index: 11;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 36px;
  padding: 0 5px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion:first-child {
  border-radius: 2px 2px 0 0;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion:last-child {
  border-radius: 0 0 2px 2px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion.selected {
  background-color: var(--background-elevated-highlight);
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion .user-image {
  background-size: cover;
  border-radius: 100%;
  height: 24px;
  margin-right: 4px;
  width: 24px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion .username {
  margin-right: 8px;
  color: var(--text-base);
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion .full-name {
  color: var(--text-base);
  font-size: 13px;
  line-height: 1.31;
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner .add-collaborator-container .add-collaborator-invite-button {
    margin-top: 6px;
  }
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .collaborators-heading {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.31;
  margin: 8px 0 4px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .share-dialog-message {
  align-items: center;
  display: flex;
  font-size: 13px;
  margin: 16px 0;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .share-dialog-message.share-dialog-message-success {
  color: var(--text-positive);
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .share-dialog-message.share-dialog-message-warning {
  color: var(--text-negative);
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .share-dialog-message .soundtrap-icon {
  font-size: 16px;
  margin-right: 8px;
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .suggestions-title {
  align-items: center;
  background-color: var(--background-elevated-base);
  display: flex;
  font-size: 13px;
  font-weight: 500;
  padding-left: 8px;
  position: sticky;
  top: 0;
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner .add-collaborator-container .add-collaborator {
    align-items: flex-start;
    flex-direction: column;
  }
  .share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestions-container {
    border-left-width: 0;
    border-right-width: 0;
    max-width: none;
    left: -34px;
    width: 100vw;
  }
  .share-dialog-container .share-dialog-inner .add-collaborator-container .user-suggestion {
    padding-left: 40px;
  }
  .share-dialog-container .share-dialog-inner .add-collaborator-container .suggestions-title {
    padding-left: 44px;
  }
}
.share-dialog-container .share-dialog-inner .add-collaborator-container .collaborators {
  margin-bottom: 16px;
}
.share-dialog-container .share-dialog-inner .guest-call-container {
  align-items: center;
  background-color: var(--background-elevated-highlight);
  border-top: 1px solid var(--decorative-subdued);
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: row;
  padding-top: 22px;
  padding-bottom: 22px;
}
.share-dialog-container .share-dialog-inner .guest-call-container .st-button {
  width: fit-content;
  min-width: fit-content;
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner .guest-call-container {
    padding-top: 10px;
    padding-bottom: 10px;
    flex-direction: column;
  }
}
.share-dialog-container .share-dialog-inner .guest-call-container .guest-call-text {
  font-size: 13px;
  line-height: 1.31;
  margin-bottom: 4px;
  margin-top: 4px;
  text-align: center;
}
@media (max-width: 534px) {
  .share-dialog-container .share-dialog-inner .guest-call-container {
    align-items: flex-start;
    border-radius: 0;
    flex-direction: column;
  }
  .share-dialog-container .share-dialog-inner .guest-call-container .st-button .soundtrap-icon {
    display: none;
  }
  .share-dialog-container .share-dialog-inner .guest-call-container .guest-call-info > h3 {
    padding-bottom: 0;
  }
  .share-dialog-container .share-dialog-inner .guest-call-container .guest-call-text {
    margin-bottom: 12px;
  }
}

.discussion-dialog-container {
  padding: 12px 0 0;
}

.discussion-dialog-comments-wrapper {
  overflow-y: auto;
  max-height: 300px;
  max-height: max(100vh - 220px - 310px - 120px, 300px);
}

.discussion-dialog-content {
  display: flex;
  flex-direction: column;
}

.discussion-dialog-header {
  color: var(--text-base);
  display: flex;
  font-size: 13px;
  margin: 0 10px 10px;
  padding-left: 2px;
  align-items: center;
  gap: 6px;
}
.discussion-dialog-header .discussion-dialog-time-label {
  flex-grow: 1;
  font-weight: 500;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.002em;
}

.discussion-dialog-textarea {
  display: block;
  resize: none;
  flex-grow: 1;
  padding: 2px 5px;
  color: var(--text-subdued);
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: inherit;
  box-sizing: content-box;
  line-height: 21px;
  margin-left: 12px;
  max-height: 120px;
}
.discussion-dialog-textarea::-webkit-input-placeholder {
  color: var(--text-subdued);
}
.discussion-dialog-textarea:focus {
  border: 1px solid var(--essential-primary);
}

.discussion-dialog-comment-box {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.discussion-dialog-create-reply {
  display: flex;
  padding: 12px 0;
  align-items: flex-end;
}
.discussion-dialog-create-reply .discussion-dialog-create-reply-caption {
  flex-grow: 1;
  color: var(--text-subdued);
}
.discussion-dialog-create-reply .discussion-dialog-reply-button {
  border: none;
  background-color: inherit;
}
.discussion-dialog-create-reply button {
  margin-right: 10px;
  line-height: 21px;
  display: block;
}
.discussion-dialog-create-reply button .soundtrap-icon {
  margin-left: -2px;
}
.discussion-dialog-create-reply .discussion-suggested-mentions {
  margin-left: 12px;
}

.discussion-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 12px 0;
}

.discussion-dialog-replies-container {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: scroll;
}

.discussion-dialog-button,
.discussion-dialog-button:active {
  background-color: transparent;
  color: var(--text-base);
  font-size: 11px;
  min-width: auto;
}

.discussion-dialog-button__cancel {
  color: var(--text-negative);
}

.discussion-dialog-button:disabled {
  color: var(--text-subdued);
}

.discussion-comment {
  border-bottom: 1px solid var(--background-highlight);
  padding: 12px 10px 12px 12px;
}
.discussion-comment.discussion-comment-alternate {
  background-color: var(--background-base);
}
.discussion-comment.discussion-comment-highlight {
  background-color: var(--background-highlight);
}
.discussion-comment .discussion-comment-header-row {
  display: flex;
  padding-bottom: 8px;
}
.discussion-comment .discussion-comment-header-row .discussion-comment-header-text {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1 1 0;
}
.discussion-comment .discussion-comment-header-row .discussion-comment-header-text .discussion-comment-header-name {
  font-size: 15px;
  font-weight: 500;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  letter-spacing: 0.001em;
}
.discussion-comment .discussion-comment-header-row .discussion-comment-header-text .discussion-comment-header-datetime {
  color: var(--text-subdued);
  font-size: 11px;
  margin-right: 6px;
  line-height: 15px;
  font-weight: 500;
  text-align: right;
  letter-spacing: 0.002em;
}
.discussion-comment .discussion-comment-header-row .discussion-comment-header-profile-icon {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  vertical-align: baseline !important;
  position: relative;
  margin-right: 8px;
}
.discussion-comment .discussion-comment-edit-buttons {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.discussion-comment .discussion-comment-edit-text {
  display: flex;
}
.discussion-comment .discussion-comment-edit-text .discussion-dialog-textarea {
  margin-left: 0;
}
.discussion-comment .discussion-comment-edit-text .discussion-suggested-mentions__wrapper {
  width: 216px;
}

.discussion-comment-text {
  white-space: pre-wrap;
  color: var(--text-subdued);
  word-break: break-word;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.002em;
  user-select: text;
}
.discussion-comment-text .discussion-comment-mention.existing {
  color: var(--text-primary);
}
.discussion-comment-text .discussion-comment-edited-marker {
  font-size: 11px;
}

.discussion-suggested-mentions {
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.002em;
}
.discussion-suggested-mentions__wrapper {
  position: fixed;
  width: 194px;
  margin-top: -1px;
  z-index: 1;
  max-height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid var(--decorative-subdued);
  border-radius: 2px;
  background-color: var(--background-elevated-base);
}
.discussion-suggested-mentions__header {
  display: block;
  margin-bottom: 0;
}
.discussion-suggested-mentions__header, .discussion-suggested-mentions__list_user {
  padding: 10px;
}
.discussion-suggested-mentions__list_user {
  display: flex;
}
.discussion-suggested-mentions__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.discussion-suggested-mentions .discussion-suggested-mentions__list_user_profile-icon {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  vertical-align: baseline !important;
  position: relative;
  margin-right: 8px;
}
.discussion-suggested-mentions .discussion-suggested-mentions__list_user_username {
  word-break: break-word;
  line-height: 15px;
  letter-spacing: 0.002em;
  font-size: 14px;
}
.discussion-suggested-mentions .discussion-suggested-mentions__list_user__selected {
  background-color: var(--background-elevated-highlight);
}

.discussion-mentions-onboarding {
  position: relative;
  margin: 12px 32px 0 12px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--essential-primary);
  color: var(--text-base);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.002em;
}
.discussion-mentions-onboarding:after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 8px);
  border-top: solid 6px var(--essential-primary);
  border-left: solid 8px transparent;
  border-right: solid 8px transparent;
}

.rtc-beta-onboarding-body .st-dialog-body {
  padding: 64px 64px 32px;
}
.rtc-beta-onboarding-body .button_GP_L {
  padding: 0 15px;
  font-size: 15px;
  line-height: 20px;
  height: 40px;
}
.rtc-beta-onboarding-body .st-dialog-footer {
  height: 80px;
}

.st-dialog-title.rtc-beta-onboarding-title {
  line-height: 30px;
  letter-spacing: -0.003em;
  margin-bottom: 16px;
}

.rtc-beta-onboarding-message {
  font-size: 15px;
  line-height: 20px;
  white-space: pre-wrap;
}

.rtc-beta-onboarding-dialog-help-link-icon {
  font-size: 12px;
}

.rtc-beta-onboarding-dialog-help-link-text {
  padding-left: 8px;
  font-size: 15px;
}

.rtc-beta-onboarding-tip {
  display: block;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.001em;
  padding-top: 12px;
  color: var(--essential-primary);
}
.rtc-beta-onboarding-tip:hover, .rtc-beta-onboarding-tip:active, .rtc-beta-onboarding-tip:focus {
  text-decoration: underline;
}

.rtc-beta-onboarding-tips {
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.rtc-beta-onboarding-tips .soundtrap-icon {
  margin-right: 5px;
  color: var(--text-primary);
}

.rtc-beta-flag-onboarding-description {
  margin: 0 3px;
}

.discussion-delete-dialog .st-dialog-body {
  padding: var(--space-huge);
}
.vocal-tuner-visibility-dialog .inner {
  padding: 0px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.vocal-tuner-visibility-dialog .inner .body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vocal-tuner-visibility-dialog .inner .body .header-background {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-bottom: var(--space-medium);
}
.vocal-tuner-visibility-dialog .inner .body .header-background .header-artwork {
  background-size: cover;
  width: 100%;
  aspect-ratio: 1.67;
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
  width: 75%;
}
@media all and (768px) {
  .vocal-tuner-visibility-dialog .inner .body .body-wrapper {
    width: 90%;
  }
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
  max-width: 20ch;
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: var(--space-small);
  margin-bottom: var(--space-small-1);
  line-height: 20px;
  color: var(--text-subdued);
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .content {
  color: var(--text-subdued);
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .content .content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
  width: 100%;
  line-height: 20px;
  list-style: none;
  padding: 0;
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .content .content-list li {
  margin-bottom: var(--space-small);
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .content .content-list li .list-icon {
  margin-right: var(--space-tiny);
}
.vocal-tuner-visibility-dialog .inner .body .body-wrapper .content .content-list li:last-child {
  margin-bottom: var(--space-large);
}
.vocal-tuner-visibility-dialog .inner .footer {
  gap: var(--space-small);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--space-medium-1) var(--space-small-1);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--decorative-subdued);
}
.vocal-tuner-visibility-dialog .inner .footer button {
  height: var(--space-large);
  padding-left: var(--space-small-1);
  padding-right: var(--space-small-1);
  font-size: 15px;
}

.add-version-dialog label {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 2px;
}
.add-version-dialog input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.add-version-dialog .st-dialog-title {
  margin-bottom: 7px;
}
.add-version-dialog .st-dialog-subtitle {
  margin-bottom: 25px;
}
.add-version-dialog .add-version-dialog__date-label {
  display: flex;
  align-items: center;
  color: var(--text-subdued);
}
.add-version-dialog .add-version-dialog__date-label-icon {
  margin-right: 10px;
}

.vertical-paywall-dialog .inner {
  padding: 0px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.vertical-paywall-dialog .inner .body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vertical-paywall-dialog .inner .body .header-background {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-bottom: var(--space-large-2);
}
.vertical-paywall-dialog .inner .body .header-background .header-artwork {
  background-size: cover;
  width: 100%;
  aspect-ratio: 2.3;
}
.vertical-paywall-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
  width: 75%;
}
@media all and (768px) {
  .vertical-paywall-dialog .inner .body .body-wrapper {
    width: 90%;
  }
}
.vertical-paywall-dialog .inner .body .body-wrapper .closer, .vertical-paywall-dialog .inner .body .body-wrapper .st-clickable {
  position: absolute;
  top: 8px;
  right: 8px;
}
.vertical-paywall-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
}
.vertical-paywall-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
  max-width: 20ch;
}
.vertical-paywall-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: var(--space-small);
  margin-bottom: var(--space-small-1);
  line-height: 20px;
  color: var(--text-base);
}
.vertical-paywall-dialog .inner .body .body-wrapper .content {
  color: var(--text-base);
}
.vertical-paywall-dialog .inner .body .body-wrapper .content .content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-large-2);
  width: 100%;
  line-height: 20px;
  list-style: none;
  padding: 0;
}
.vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li {
  margin-bottom: var(--space-tiny-1);
  display: flex;
  align-items: center;
}
.vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon {
  margin-right: var(--space-tiny);
  font-size: 16px;
  align-self: center;
  color: var(--decorative-subdued);
}
.vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .oneshot-icon use {
  transform: scale(0.7);
}
.vertical-paywall-dialog .inner .body .body-wrapper .content .content-list li .feature {
  vertical-align: top;
  font-size: 13px;
  font-weight: 500;
}
.vertical-paywall-dialog .inner .footer {
  gap: var(--space-small);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--space-medium-1) var(--space-small-1);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--decorative-subdued);
}
.vertical-paywall-dialog .inner .footer button {
  height: var(--space-large);
  padding-left: var(--space-small-1);
  padding-right: var(--space-small-1);
  font-size: 15px;
}

.horizontal-paywall-dialog .inner {
  padding: 0;
  max-width: 782px;
  height: 452px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.horizontal-paywall-dialog .inner .body {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.horizontal-paywall-dialog .inner .body .artwork-background {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  min-width: 350px;
  max-width: 350px;
}
.horizontal-paywall-dialog .inner .body .artwork-background .artwork {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container {
  color: var(--text-base);
  position: absolute;
  top: var(--space-large-1);
  left: 50%;
  transform: translate(-50%, -50%);
}
.horizontal-paywall-dialog .inner .body .artwork-background .artwork-title-container .artwork-title-icon {
  margin-right: var(--space-tiny);
  font-size: 24px;
  color: var(--text-base);
  align-self: center;
  transform: translate(0, 25%);
}
.horizontal-paywall-dialog .inner .body .body-wrapper {
  display: flex;
  flex-direction: column;
  width: 75%;
  padding: 40px;
}
@media all and (768px) {
  .horizontal-paywall-dialog .inner .body .body-wrapper {
    width: 90%;
  }
}
.horizontal-paywall-dialog .inner .body .body-wrapper .closer {
  position: absolute;
  top: 8px;
  right: 8px;
}
.horizontal-paywall-dialog .inner .body .body-wrapper .title-and-description {
  align-self: center;
}
.horizontal-paywall-dialog .inner .body .body-wrapper .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
  max-width: 20ch;
}
.horizontal-paywall-dialog .inner .body .body-wrapper .title-and-description .description {
  margin-top: var(--space-medium-2);
  margin-bottom: var(--space-medium-2);
  line-height: 20px;
  color: var(--text-base);
}
.horizontal-paywall-dialog .inner .body .body-wrapper .content {
  color: var(--text-base);
}
.horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-medium-2);
  width: 100%;
  line-height: 20px;
  list-style: none;
  padding: 0;
}
.horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li {
  margin-bottom: var(--space-tiny-1);
}
.horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .list-icon {
  margin-right: var(--space-tiny);
  width: 16px;
  height: 16px;
  align-self: center;
  fill: var(--decorative-subdued);
}
.horizontal-paywall-dialog .inner .body .body-wrapper .content .content-list li .feature {
  vertical-align: top;
  font-size: 13px;
  font-weight: 500;
}
.horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable {
  padding: 0;
}
.horizontal-paywall-dialog .inner .body .body-wrapper .st-clickable .button-cta {
  background-color: var(--background-base);
  color: var(--text-base);
  width: 100%;
  border-radius: 8px;
  padding: var(--space-small);
}
.horizontal-paywall-dialog .oneshot-icon use {
  transform: scale(0.7);
}

.cta-dialog-standard h2, .cta-dialog-standard h3 {
  margin-top: 0;
  margin-bottom: var(--space-small);
}
.cta-dialog-standard a {
  color: var(--text-primary);
  font-weight: 500;
}
.cta-dialog-standard p {
  margin: 0;
}
.cta-dialog-standard .inner {
  padding: 0;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.cta-dialog-standard .header {
  padding: var(--space-huge);
  padding-bottom: 0;
}
.cta-dialog-standard .body {
  padding: var(--space-huge);
  padding-bottom: var(--space-large);
}
.cta-dialog-standard .header + .body {
  padding-top: var(--space-small);
}
.cta-dialog-standard .footer {
  gap: var(--space-small);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--space-small-1) var(--space-medium);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--decorative-subdued);
}
.cta-dialog-standard .footer button {
  height: var(--space-large);
  padding-left: var(--space-small-1);
  padding-right: var(--space-small-1);
  font-size: 15px;
}

.no-mic-access-image-container {
  margin: var(--space-medium-2) calc(-1 * var(--space-small));
}
.no-mic-access-image-container img {
  width: 100%;
  height: auto;
}

.latency-calibration-dialog {
  padding: 52px 62px 32px 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.latency-calibration-dialog .description {
  margin: 32px 0 0 0;
  text-align: center;
}
.latency-calibration-dialog .description.result-description-container {
  text-align: left;
}
.latency-calibration-dialog h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
}
.latency-calibration-dialog h3 {
  margin: 0;
}
.latency-calibration-dialog .cta-button {
  margin-top: 24px;
}
.latency-calibration-dialog .content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.latency-calibration-dialog .content .intro-image, .latency-calibration-dialog .content .latency-calibration-diagram {
  width: 100%;
  margin: 32px 0 0 0;
}
.latency-calibration-dialog .content .result-description-container {
  color: var(--text-base);
  position: relative;
  margin-top: 8px;
}
.latency-calibration-dialog .content .result-description-container h3 {
  color: var(--text-negative);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 4px;
}
.latency-calibration-dialog .content .result-description-container.success h3 {
  color: var(--text-positive);
}
.latency-calibration-dialog .content .result-description-container .result-description-background {
  position: absolute;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: var(--background-base);
}
.latency-calibration-dialog .content .result-description-container .result-description-content {
  width: 100%;
  height: 100%;
  padding: 16px;
}

.latency-calibration-diagram {
  display: flex;
  width: 352px;
  padding: 28px 26px 27px 26px;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  background: var(--background-base);
  position: relative;
  margin-bottom: 8px;
}
.latency-calibration-diagram .icon-container {
  font-size: 24px;
  height: 45px;
  width: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.latency-calibration-diagram .calibration-status-icon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.latency-calibration-diagram .calibration-status-icon-container .success {
  background: var(--background-base);
  border-radius: 20px;
  color: var(--text-base);
  height: 40px;
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.latency-calibration-diagram .calibration-status-icon-container .success .text .roundtrip-latency {
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
}
.latency-calibration-diagram .calibration-status-icon-container .success .text .milliseconds {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
}
.latency-calibration-diagram .calibration-status-icon-container .failure {
  background: var(--background-base);
  border-radius: 50%;
  color: var(--text-base);
  height: 40px;
  width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.detect-key-dialog-body {
  padding-bottom: var(--space-medium-2);
}
.detect-key-dialog-body .region-key {
  font-weight: 800;
}
.detect-key-dialog-body .detect-key-dialog-body_toggle-wrapper {
  margin-top: var(--space-small);
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: end;
}
.detect-key-dialog-body .detect-key-dialog-body_toggle-wrapper button {
  padding-left: 0;
}
.detect-key-dialog-body .detect-key-dialog-body_toggle-wrapper p {
  margin: 0;
}

.detect-key-menu-item {
  position: relative;
}
.detect-key-menu-item .new-ribbon {
  position: absolute;
  right: 12px;
  top: 12px;
}

.match-project-key-menu-item {
  position: relative;
}
.match-project-key-menu-item .new-ribbon {
  position: absolute;
  right: 12px;
  top: 12px;
}

.inner .calibration-selection-popup {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}
.inner .calibration-selection-popup .title {
  margin: 0;
  color: var(--text-base);
  text-align: center;
  width: 100%;
  font-size: 24px;
  font-weight: 500;
}
.inner .calibration-selection-popup .device-name {
  width: 280px;
  margin-bottom: 16px;
}
.inner .calibration-selection-popup .calibration-options {
  width: 100%;
  padding: 0;
}
.inner .calibration-selection-popup .calibration-options .st-card-button {
  margin-bottom: 12px;
  width: 100%;
}
.inner .calibration-selection-popup .calibration-options .st-card-button__description {
  color: var(--text-subdued);
}
.inner:has(.calibration-selection-popup) {
  border-radius: 10px;
  padding: 0;
}

.electron-download-dialog {
  background: rgba(0, 0, 0, 0.3);
  z-index: 200;
}
.electron-download-dialog .inner {
  padding: 0px;
  max-width: 960px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 10px;
  border: none;
}
.electron-download-dialog .inner .body {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.electron-download-dialog .inner .body .text-column {
  display: flex;
  flex-direction: column;
}
.electron-download-dialog .inner .body .text-column .title-and-description {
  align-self: center;
  padding: var(--space-huge);
}
@media (max-width: 768px) {
  .electron-download-dialog .inner .body .text-column .title-and-description {
    padding: var(--space-large);
  }
}
.electron-download-dialog .inner .body .text-column .title-and-description .title {
  font-weight: 700;
  color: var(--text-base);
  max-width: 20ch;
}
.electron-download-dialog .inner .body .text-column .title-and-description .description {
  margin-top: var(--space-small);
  line-height: 20px;
  color: var(--text-subdued);
}
.electron-download-dialog .inner .body .text-column .title-and-description .download-btn-wrapper {
  margin-top: 50px;
}
.electron-download-dialog .inner .body .text-column .title-and-description .download-btn-wrapper .btn {
  min-width: 100%;
}
.electron-download-dialog .inner .body .image-column {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.electron-download-dialog .inner .body .image-column .image-column-artwork {
  background-size: cover;
  height: 598px;
  width: 576px;
}
.electron-download-dialog .inner .body .closerx-newstyle {
  font-size: 24px;
  top: 14px;
  right: 10px;
  color: white;
  opacity: 1;
}

.realtime-vocal-tuner-upsell-dialog {
  height: 100%;
  border-radius: 8px;
}
.realtime-vocal-tuner-upsell-dialog > .inner {
  width: 960px;
  height: 598px;
  padding: 0;
  text-align: left;
  overflow: hidden;
  border: 0;
}
.realtime-vocal-tuner-upsell-dialog .st-uix-dialog-content-container {
  height: 100%;
}
.realtime-vocal-tuner-upsell-dialog .body {
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
}
.realtime-vocal-tuner-upsell-dialog .body > .title-and-description {
  padding: 48px;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  background-color: var(--background-base);
}
.realtime-vocal-tuner-upsell-dialog .body .head-m, .realtime-vocal-tuner-upsell-dialog .body .para-m {
  color: var(--text-base);
}
.realtime-vocal-tuner-upsell-dialog .body ul {
  list-style: none;
  padding: 0;
  gap: 20px;
  display: flex;
  flex-direction: column;
}
.realtime-vocal-tuner-upsell-dialog .body li {
  display: flex;
  align-items: center;
}
.realtime-vocal-tuner-upsell-dialog .body .cancel-text {
  flex-grow: 1;
}
.realtime-vocal-tuner-upsell-dialog .body .soundtrap-icon--svg.ic-ok {
  padding-right: 11px;
}
.realtime-vocal-tuner-upsell-dialog__try-demo {
  color: #2d2d2d !important;
}
.realtime-vocal-tuner-upsell-dialog .try-vocal-tuner {
  background: linear-gradient(180deg, #B8A6E9 0%, #E7DCF4 100%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.realtime-vocal-tuner-upsell-dialog .try-vocal-tuner .para-m {
  margin-bottom: 75px;
}
.realtime-vocal-tuner-upsell-dialog__tuner-and-preview {
  padding: 16px;
  margin-top: 100px;
  margin-bottom: auto;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background-color: var(--background-base);
}
.realtime-vocal-tuner-upsell-dialog__tuner-and-preview .vocal-tool-container {
  border: none;
  padding: 0;
  margin-top: 0;
  justify-items: center;
}
.realtime-vocal-tuner-upsell-dialog__arrow-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.realtime-vocal-tuner-upsell-dialog__arrow {
  width: 15px;
  height: 15px;
  border-right: 2.5px solid var(--essential-subdued);
  border-bottom: 2.5px solid var(--essential-subdued);
  transform: rotate(225deg);
  animation: arrow-wave 1s infinite ease-in-out;
  animation-direction: alternate;
  margin: 0 auto;
  border-radius: 2px;
}
.realtime-vocal-tuner-upsell-dialog__arrow:nth-child(1) {
  animation-delay: 0.1s;
}
.realtime-vocal-tuner-upsell-dialog__arrow:nth-child(2) {
  animation-delay: 0.2s;
}
.realtime-vocal-tuner-upsell-dialog__arrow:nth-child(3) {
  animation-delay: 0.3s;
}
.realtime-vocal-tuner-upsell-dialog__arrow:not(:first-child) {
  margin-top: -3px;
}
@keyframes arrow-wave {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(225deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) rotate(225deg);
  }
  75% {
    opacity: 1;
    transform: translateY(-10px) rotate(225deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-10px) rotate(225deg);
  }
}
.realtime-vocal-tuner-upsell-dialog__maybe-button {
  position: absolute;
  top: 24px;
  right: 24px;
}
.realtime-vocal-tuner-upsell-dialog.dim-backdrop {
  background-color: rgba(221, 221, 221, 0.7019607843);
}

.uspmessagedialog .copy {
  margin-bottom: 8px;
}
.uspmessagedialog .uspmessagedialog--media {
  display: flex;
  overflow: hidden;
}
.uspmessagedialog .uspmessagedialog--media .uspmessagedialog--image {
  flex-shrink: 1;
  width: 70px;
  height: 70px;
  background-size: 70% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(90, 0, 170, 0.05);
}
.uspmessagedialog .uspmessagedialog--media .uspmessagedialog--image.uspmessagedialog--image--add-collaborator {
  background-image: url("/studio/assets/images/icons/remote-interview.svg");
}
.uspmessagedialog .uspmessagedialog--media .uspmessagedialog--body {
  padding: 8px 20px;
  margin-right: 24px;
  text-align: left;
  align-self: center;
}
.uspmessagedialog .inner-custom {
  position: relative;
}

body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body ::-webkit-scrollbar-track {
  border-radius: 10px;
  background: var(--decorative-subdued);
}
body ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--background-elevated-base);
  border: 1px solid var(--essential-subdued);
}
.pl-computer body ::-webkit-scrollbar-thumb:hover {
  background: var(--background-elevated-highlight);
}
.pl-computer body ::-webkit-scrollbar-thumb:active {
  background: var(--background-elevated-press);
}
body ::-webkit-scrollbar-corner {
  background: var(--decorative-subdued);
}

.studio-focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.studio-focus-visible[role=tabpanel] {
  outline-offset: -2px;
}

:focus:not(.studio-focus-visible) {
  outline: none;
}