/*                 
 *       
 *     ┌──────────────────────────────────────────────────┐
 *     │   THIS FILE IS AUTO-GENERATED.                   │ 
 *     │   PLEASE DO NOT MODIFY IT DIRECTLY.              │ 
 *     │   INSTEAD CONSIDER ONE OF THESE OPTIONS:         │
 *     │      1. Import new tokens from figma to          │
 *     │         located at ~/frontend/assets/figmaTokens │
 *     │      2. Modify the file template                 │
 *     │         at ~/frontend/tools/buildPallet.ts       │
 *     └──────────────────────────────────────────────────┘ 
 *
 */
        
body {
	--color-gray-0: hsla(0,0%,0%,1);
	--color-gray-1000: hsla(0,0%,100%,1);
	--color-gray-700: hsla(0,0%,80%,1);
	--color-gray-800: hsla(0,0%,87%,1);
	--color-gray-900: hsla(0,0%,93%,1);
	--color-purple-200: hsla(262,56%,34%,1);
	--color-purple-300: hsla(262,56%,46%,1);
	--color-purple-400: hsla(262,78%,58%,1);
	--color-purple-500: hsla(262,100%,68%,1);
	--color-purple-600: hsla(262,100%,80%,1);
	--color-purple-900: hsla(262,100%,91%,1);
	--color-signal-green: hsla(120,100%,50%,1);
	--color-signal-red: hsla(0,100%,50%,1);
	--color-signal-yellow: hsla(60,100%,50%,1);
	--color-transparent: hsla(0,0%,0%,0);
	--color-transparent-darker-1: hsla(0,0%,0%,0.1);
	--color-transparent-darker-2: hsla(0,0%,0%,0.2);
	--color-transparent-darker-3: hsla(0,0%,0%,0.3);
	--color-transparent-darker-4: hsla(0,0%,0%,0.4);
	--color-transparent-darker-5: hsla(0,0%,0%,0.5);
	--color-transparent-darker-6: hsla(0,0%,0%,0.6);
	--color-transparent-darker-7: hsla(0,0%,0%,0.7);
	--color-transparent-darker-8: hsla(0,0%,0%,0.8);
	--color-transparent-darker-9: hsla(0,0%,0%,0.9);
	--color-transparent-lighter-1: hsla(0,0%,100%,0.1);
	--color-transparent-lighter-2: hsla(0,0%,100%,0.2);
	--color-transparent-lighter-3: hsla(0,0%,100%,0.3);
	--color-transparent-lighter-4: hsla(0,0%,100%,0.4);
	--color-transparent-lighter-5: hsla(0,0%,100%,0.5);
	--color-transparent-lighter-6: hsla(0,0%,100%,0.6);
	--color-transparent-lighter-7: hsla(0,0%,100%,0.7);
	--color-transparent-lighter-8: hsla(0,0%,100%,0.8);
	--color-transparent-lighter-9: hsla(0,0%,100%,0.9);
	--color-violet-300: hsla(240,19%,9%,1);
	--color-violet-400: hsla(240,19%,14%,1);
	--color-violet-500: hsla(240,19%,18%,1);
	--color-violet-600: hsla(240,21%,24%,1);
	--color-violet-700: hsla(240,19%,33%,1);
}

        
[data-theme='day'] {
	--semantic-interactive-1-active-bg: var(--color-purple-300);
	--semantic-interactive-1-active-br: var(--color-purple-200);
	--semantic-interactive-1-active-fg: var(--color-gray-1000);
	--semantic-interactive-1-default-bg: var(--color-purple-500);
	--semantic-interactive-1-default-br: var(--color-purple-400);
	--semantic-interactive-1-default-fg: var(--color-gray-1000);
	--semantic-interactive-1-hover-bg: var(--color-purple-400);
	--semantic-interactive-1-hover-br: var(--color-purple-300);
	--semantic-interactive-1-hover-fg: var(--color-gray-1000);
	--semantic-interactive-2-active-bg: var(--color-transparent-darker-6);
	--semantic-interactive-2-active-br: var(--color-transparent-darker-4);
	--semantic-interactive-2-active-fg: var(--color-gray-1000);
	--semantic-interactive-2-default-bg: var(--color-transparent-darker-1);
	--semantic-interactive-2-default-br: var(--color-transparent-darker-3);
	--semantic-interactive-2-default-fg: var(--color-gray-0);
	--semantic-interactive-2-hover-bg: var(--color-transparent-darker-4);
	--semantic-interactive-2-hover-br: var(--color-transparent-darker-2);
	--semantic-interactive-2-hover-fg: var(--color-gray-1000);
	--semantic-interactive-3-active-bg: var(--color-gray-1000);
	--semantic-interactive-3-active-br: var(--color-transparent-darker-8);
	--semantic-interactive-3-active-fg: var(--color-gray-0);
	--semantic-interactive-3-default-bg: var(--color-transparent-lighter-3);
	--semantic-interactive-3-default-br: var(--color-transparent-darker-3);
	--semantic-interactive-3-default-fg: var(--color-gray-0);
	--semantic-interactive-3-hover-bg: var(--color-transparent-lighter-6);
	--semantic-interactive-3-hover-br: var(--color-transparent-darker-6);
	--semantic-interactive-3-hover-fg: var(--color-gray-0);
	--semantic-panel-bg-1: var(--color-gray-900);
	--semantic-panel-bg-2: var(--color-gray-800);
	--semantic-panel-bg-3: var(--color-gray-700);
	--semantic-panel-bg-inverse: var(--color-violet-600);
	--semantic-panel-br: var(--color-transparent-darker-2);
	--semantic-panel-fg-1: var(--color-gray-0);
	--semantic-panel-fg-2: var(--color-purple-400);
	--semantic-panel-fg-3: var(--color-transparent-darker-6);
	--semantic-panel-focus: var(--color-purple-200);
	--semantic-userpallete-blue: hsla(240,38%,39%,1);
	--semantic-userpallete-cyan: hsla(180,100%,50%,1);
	--semantic-userpallete-gray: hsla(0,0%,48%,1);
	--semantic-userpallete-green: hsla(120,41%,32%,1);
	--semantic-userpallete-magenta: hsla(300,100%,50%,1);
	--semantic-userpallete-orange: hsla(30,100%,50%,1);
	--semantic-userpallete-red: var(--color-signal-red);
	--semantic-userpallete-yellow: hsla(60,40%,39%,1);
}

        
[data-theme='night'] {
	--semantic-interactive-1-active-bg: var(--color-purple-200);
	--semantic-interactive-1-active-br: var(--color-purple-300);
	--semantic-interactive-1-active-fg: var(--color-gray-1000);
	--semantic-interactive-1-default-bg: var(--color-purple-400);
	--semantic-interactive-1-default-br: var(--color-purple-500);
	--semantic-interactive-1-default-fg: var(--color-gray-1000);
	--semantic-interactive-1-hover-bg: var(--color-purple-300);
	--semantic-interactive-1-hover-br: var(--color-purple-400);
	--semantic-interactive-1-hover-fg: var(--color-gray-1000);
	--semantic-interactive-2-active-bg: var(--color-transparent-lighter-9);
	--semantic-interactive-2-active-br: var(--color-transparent-darker-9);
	--semantic-interactive-2-active-fg: var(--color-gray-0);
	--semantic-interactive-2-default-bg: var(--color-transparent-lighter-1);
	--semantic-interactive-2-default-br: var(--color-transparent-darker-6);
	--semantic-interactive-2-default-fg: var(--color-gray-1000);
	--semantic-interactive-2-hover-bg: var(--color-transparent-lighter-8);
	--semantic-interactive-2-hover-br: var(--color-transparent-darker-9);
	--semantic-interactive-2-hover-fg: var(--color-gray-0);
	--semantic-interactive-3-active-bg: var(--color-transparent-darker-6);
	--semantic-interactive-3-active-br: var(--color-transparent-lighter-4);
	--semantic-interactive-3-active-fg: var(--color-gray-1000);
	--semantic-interactive-3-default-bg: var(--color-transparent);
	--semantic-interactive-3-default-br: var(--color-transparent-lighter-2);
	--semantic-interactive-3-default-fg: var(--color-gray-1000);
	--semantic-interactive-3-hover-bg: var(--color-transparent-darker-2);
	--semantic-interactive-3-hover-br: var(--color-transparent-lighter-4);
	--semantic-interactive-3-hover-fg: var(--color-gray-1000);
	--semantic-panel-bg-1: var(--color-violet-500);
	--semantic-panel-bg-2: var(--color-violet-400);
	--semantic-panel-bg-3: var(--color-violet-300);
	--semantic-panel-bg-inverse: var(--color-violet-300);
	--semantic-panel-br: var(--color-transparent-darker-4);
	--semantic-panel-fg-1: var(--color-gray-1000);
	--semantic-panel-fg-2: var(--color-purple-500);
	--semantic-panel-fg-3: var(--color-transparent-lighter-6);
	--semantic-panel-focus: var(--color-purple-900);
	--semantic-userpallete-blue: hsla(240,32%,32%,1);
	--semantic-userpallete-cyan: var(--color-gray-1000);
	--semantic-userpallete-gray: hsla(0,0%,9%,1);
	--semantic-userpallete-green: hsla(120,33%,22%,1);
	--semantic-userpallete-magenta: var(--color-gray-1000);
	--semantic-userpallete-orange: var(--color-gray-1000);
	--semantic-userpallete-red: var(--color-gray-1000);
	--semantic-userpallete-yellow: hsla(60,33%,22%,1);
}

        

[data-theme='day'] {
    color-scheme: light;

    --accent: #8a48ff;

    --app-background-color: #FFF;
    --app-default-foreground-color: #000;
    --app-selected-foreground-color: #FFF;

    --input-foreground: #000;
    --input-invalid-background: #FFF;
    --input-invalid-border-color: #F00;

    --switch-default-icon-color: #000;
    --switch-selected-icon-color: var(--accent);
    --switch-hovered-icon-color: var(--accent);

    --selection-foreground: var(--accent);
    --selection-background: color-mix(in srgb, var(--accent) 10%, transparent);

    --panel-background-color: #EEE;
    --panel-border-color: #DDD;

    --separator-border: 1px solid #DDD;

    --piano-roll-note-white-background: #0000;
    --piano-roll-note-black-background: #0002;
    --piano-roll-note-default-background: #666;
    --piano-roll-note-selected-background: #222;

    --playlist-clip-default-background: #0003;
    --playlist-clip-selected-background: #0006;
    --playlist-clip-default-border: 1px solid #0009;
    --playlist-note-background: #0006;

    --meter-background: #666;
    --meter-green: #0F0;
    --meter-yellow: #FF0;
    --meter-red: #F00;

    --progress-border-color: #0002;
    --progress-value-background-color: color-mix(in srgb, var(--accent) 80%, #FFF);
    --progress-value-default-color: #000;
    --progress-value-filled-color: #FFF;



    --knob-range-color: #0002;
    --knob-value-color: var(--accent);
    --knob-handle-color: #000;

    --plot-line-color: #000;

    --carret-background: #666;

    --icon-stroke: var(--color-gray-0);

    --contrast-border-color: #0005;

    --button-icon-stroke-contrast: var(--color-gray-1000);
    --button-icon-stroke-default: var(--color-gray-0);
    --button-icon-stroke-always-white: var(--color-gray-1000);
}

[data-theme='night'] {

    color-scheme: dark;

    --accent: #8a48ff;

    --app-background-color: #252536;
    --app-default-foreground-color: #FFF;
    --app-selected-foreground-color: #FFF;

    --input-foreground: #FFF;
    --input-invalid-background: #252536;
    --input-invalid-border-color: #F00;

    --switch-default-icon-color: #FFF;
    --switch-selected-icon-color: color-mix(in srgb, var(--accent) 80%, #FFF);
    --switch-hovered-icon-color: color-mix(in srgb, var(--accent) 80%, #FFF);

    --selection-foreground: color-mix(in srgb, var(--accent) 60%, #FFF);
    --selection-background: color-mix(in srgb, var(--accent) 10%, transparent);

    --panel-background-color: #13131c;
    --panel-border-color: color-mix(in hsl, #13131c, #323249);

    --separator-border: 1px solid #323249;

    --piano-roll-note-white-background: #FFF2;
    --piano-roll-note-black-background: #FFF0;
    --piano-roll-note-default-background: var(--accent);
    --piano-roll-note-selected-background: color-mix(in srgb, var(--accent), #FFF);

    --playlist-clip-default-background: #FFF1;
    --playlist-clip-selected-background: #FFF3;
    --playlist-clip-default-border: 1px solid var(--accent);
    --playlist-note-background: #FFF6;

    --meter-background: #13131c;
    --meter-green: #0F0;
    --meter-yellow: #FF0;
    --meter-red: #F00;

    --progress-border-color: #FFF3;
    --progress-value-background-color: color-mix(in srgb, var(--accent) 80%, #FFF);
    --progress-value-default-color: #FFF;
    --progress-value-filled-color: #000;

    --knob-range-color: #FFF1;
    --knob-value-color: color-mix(in srgb, var(--accent) 80%, #FFF);
    --knob-handle-color: #FFF;

    --plot-line-color: #FFF;

    --carret-background: #141417;

    --contrast-border-color: #FFF5;

    --button-icon-stroke-contrast: var(--color-gray-0);
    --button-icon-stroke-default: var(--color-gray-1000);
    --button-icon-stroke-always-white: var(--color-gray-1000);
}

body {
    --input-focused-border-color: var(--accent);

    --panel-border: 1px solid var(--panel-border-color);

    --progress-background-color: var(--panel-background-color);

    --checkbox-background: var(--input-default-background);
    --checkbox-border-color: var(--semantic-interactive-3-default-br);


    --button-primary-default-background: var(--semantic-interactive-1-default-bg);
    --button-secondary-default-background: var(--semantic-interactive-2-default-bg);
    --button-ghost-default-background: none;

    --button-primary-hover-background: var(--semantic-interactive-1-hover-bg);
    --button-secondary-hover-background: var(--semantic-interactive-2-hover-bg);
    --button-ghost-hover-background: var(--semantic-interactive-3-hover-bg);

    --button-primary-active-background: var(--semantic-interactive-1-active-bg);
    --button-secondary-active-background: var(--semantic-interactive-2-active-bg);
    --button-ghost-active-background: var(--semantic-interactive-3-active-bg);

    --button-primary-default-border-color: var(--semantic-interactive-1-default-br);
    --button-primary-hover-border-color: var(--semantic-interactive-1-hover-br);
    --button-primary-active-border-color: var(--semantic-interactive-1-active-br);

    --button-secondary-default-border-color: var(--semantic-interactive-2-default-br);
    --button-secondary-hover-border-color: var(--semantic-interactive-2-hover-br);
    --button-secondary-active-border-color: var(--semantic-interactive-2-active-br);

    --button-ghost-default-border-color: none;
    --button-ghost-hover-border-color: none;
    --button-ghost-active-border-color: none;

    --input-height: 26;
    --input-padding: 4;
    --input-default-background: var(--semantic-interactive-3-default-bg);
    --input-hover-background: var(--semantic-interactive-3-hover-bg);
    --input-active-background: var(--semantic-interactive-3-active-bg);
    --input-default-border-color: var(--semantic-interactive-3-default-br);
    --input-hover-border-color: var(--semantic-interactive-3-hover-br);
    --input-active-border-color: var(--semantic-interactive-3-active-br);
    --input-font-size: 13px;

    --border-width: 2px;
    --radius: 4px;
    --default-plugin-width: 285px;
    --pi: 3.14159265359;
    --default-padding: 10px;
    --uiScale: 1;

    --padding-small: 4px;
    --padding-normal: 8px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

body {
    background: var(--app-background-color);
    color: var(--app-default-foreground-color);
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



.Separator-module_separator__hfhBl {
    align-self: stretch;
}

.Separator-module_horizontal__kZvAD {
    height: 1px;
    border-bottom: var(--separator-border);
}

.Separator-module_vertical__a0p3j {
    width: 1px;
    border-right: var(--separator-border);
}


.VerticalSplitter-module_verticalSplitter__Pb9jO {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.VerticalSplitter-module_top__SOxJ2,.VerticalSplitter-module_bottom__B9Kmf {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.Carret-module_carret__NOk7d {
    position: absolute;
    --size: 30px;
    left: calc(-0.5 * var(--size));
    top: 0;
    width: var(--size);
    height: var(--size);
    pointer-events: none;
}
.Carret-module_path__6Ak2Q {
    fill: var(--carret-background);
    stroke: none !important;
}
.Carret-module_text__8J8JK {
    fill: #FFF;
    font-size: 0.7px;
    text-anchor: middle;
    alignment-baseline: middle;
    font-weight: 600;
    stroke: none !important;
}

.BarTitles-module_barTitles__g8BoN {
    background: var(--app-background-color);
    display: flex;
    width: fit-content;
    min-width: 100%;
    height: 20px;
    cursor: pointer;
}

.BarTitles-module_barTitle__sVTea {
    min-width: calc(1px * var(--pxPerBar));
    font-weight: 600;
    opacity: 0.6;
    font-size: 12px;
    display: flex;
    align-items: center;
    padding-left: 5px;
}

.BarTitles-module_carret__H4nLt {
    position: absolute;
    top: 0;
    left: calc( 1px * var(--rowTitlesWidth) + 1px * var(--bar) * var(--pxPerBar) );
}

.BarTitles-module_emptySquare__vqzia {
    width: calc(1px * var(--rowTitlesWidth));
}


.Grid-module_grid__SmuB2 {
    position: relative;

    margin-left: -2px;

    flex: 1;
    min-width: max(
            100%,
            calc(1px * var(--contentWidthBar) * var(--pxPerBar))
    );
    display: flex;
    flex-direction: column;


    --grid-strength: 1px;
    --grid-strength-accent: 2px;

    --grid-accent: 4;

    --grid-gap: calc(1px * var(--pxPerGrid));

    --grid-color: #0002;
    --grid-color-accent: #0003;

    /* styling */
    background-size: var(--grid-gap), calc(var(--grid-gap) * var(--grid-accent));
    background-image: linear-gradient(to right,
    var(--grid-color) var(--grid-strength),
    transparent var(--grid-strength)),
    linear-gradient(to right,
            var(--grid-color-accent) var(--grid-strength-accent),
            transparent var(--grid-strength-accent));

}


.Grid-module_parentDefined__8nqkR{
    height: 100%;
    max-height: 100%;
    min-height: 0;

    /*width: calc(1px * var(--contentWidthBar) * var(--pxPerBar));*/
    /*min-width: calc(1px * var(--contentWidthBar) * var(--pxPerBar));*/

}
.Timeline-module_timeline__XLp9Q {
    width: 100%;
    height: 100%;
    display: grid;
    overflow: scroll;
    grid-template-areas: "bar-titles bar-titles"
        "row-titles rows";
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
}

.Timeline-module_barTitles__Vh667 {
    grid-area: bar-titles;
    position: sticky;
    top: 0;
    z-index: 2;
    width: fit-content;
    min-width: 100%;
    border-bottom: 1px solid #0005;
    /*box-shadow: 0 0 16px #0003;*/
}

.PiecePath-module_pathG__1HIzu{
    pointer-events: bounding-box;
    cursor: pointer;
}

.PiecePath-module_pathG__1HIzu:hover{
    stroke: var(--accent);
    stroke-width: 3px;
}

.PiecePath-module_pathGStatic__4kJZW{
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ContextMenu-module_contextMenu__R8Ioa {
    position: fixed;
    padding: var(--default-padding);
    background: var(--app-background-color);
    border: 1px solid var(--semantic-interactive-2-hover-br);
    border-radius: var(--radius);
    margin-left: var(--default-padding);
    z-index: 1000000;
    display: flex;
    flex-direction: column;
}


.CheckboxBox-module_checkboxBox__7JIqI {
    width: 18px;
    height: 18px;
    &>* {
        margin: -1px;
    }
    &.CheckboxBox-module_checked__rFMYb {
        border: 1px solid var(--semantic-interactive-1-default-br);
        background: var(--semantic-interactive-1-default-bg);
        color: var(--semantic-interactive-1-default-fg);
        &:hover {
            border: 1px solid var(--semantic-interactive-1-hover-br);
            background: var(--semantic-interactive-1-hover-bg);
            color: var(--semantic-interactive-1-hover-fg);
        }
        &:active {
            border: 1px solid var(--semantic-interactive-1-active-br);
            background: var(--semantic-interactive-1-active-bg);
            color: var(--semantic-interactive-1-active-fg);
        }
    }
    &:not(.CheckboxBox-module_checked__rFMYb) {
        border: 1px solid var(--semantic-interactive-3-default-br);
        background: var(--semantic-interactive-3-default-bg);
        color: var(--semantic-interactive-3-default-fg);
        &:hover {
            border: 1px solid var(--semantic-interactive-3-hover-br);
            background: var(--semantic-interactive-3-hover-bg);
            color: var(--semantic-interactive-3-hover-fg);
        }
        &:active {
            border: 1px solid var(--semantic-interactive-3-active-br);
            background: var(--semantic-interactive-3-active-bg);
            color: var(--semantic-interactive-3-active-fg);
        }
    }
}



.DropdownItem-module_dropdownItem__n3epK {
    min-width: 100%;
    text-align: left;
    max-width: 300px;
    display: flex;
    border-radius: var(--radius);
    align-items: center;
    gap: var(--padding-small);
    padding: var(--padding-small);
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    color: var(--semantic-interactive-3-default-fg);

    &:hover:not(.DropdownItem-module_selected__UWLqv) {
        color: var(--semantic-interactive-3-hover-fg);
        background: var(--semantic-interactive-3-hover-bg);
    }

    &:active:not(.DropdownItem-module_selected__UWLqv) {
        color: var(--semantic-interactive-3-active-fg);
        background: var(--semantic-interactive-3-active-bg);
    }
}

.DropdownItem-module_selected__UWLqv {
    color: var(--semantic-interactive-1-default-fg);
    background: var(--semantic-interactive-1-default-bg);
    border: var(--semantic-interactive-1-default-br);
}

.DropdownItem-module_icon__7t3Uv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.DropdownItem-module_title__FRLs9 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DropdownItem-module_description__D60ic {
    opacity: 0.6;
}



.Input-module_input__t49Ou {
    outline: none;
    border-radius: var(--radius);
    color: var(--input-foreground);
    background: var(--input-default-background);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--input-border-color-now);
    --input-border-color-now: var(--input-default-border-color);
    font-size: var(--input-font-size);
    padding: calc(1px * var(--input-padding));
    height: calc(var(--input-height) * 1px);
}

.Input-module_input__t49Ou:hover {
    background: var(--input-hover-background);
    --input-border-color-now: var(--input-hover-border-color);
}

.Input-module_input__t49Ou:focus {
    background: var(--input-active-background);
    --input-border-color-now: var(--input-active-border-color);
    box-shadow: 0 0 3px var(--input-border-color-now);
}

.Input-module_invalid__-CjHq,.Input-module_invalid__-CjHq:focus {
    background: var(--input-invalid-background);
    --input-border-color-now: var(--input-invalid-border-color);
}

.Input-module_red__5xJXK {
    color: var(--meter-red);
}
.Input-module_green__6Zshl {
    color: var(--meter-green);
}
.Input-module_yellow__habp6 {
    color: var(--meter-yellow);
}
.Input-module_bold__80lfr {
    font-weight: 600;
}
.Input-module_italic__-9tQp {
    font-style: italic;
}
.Input-module_underline__Auvw0 {
    text-decoration: underline;
}

.Knob-module_wrapper__-NCqH {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    gap: 4px;
    overflow: visible;
    cursor: pointer;
    --knob-range-angle: 300;
    --knob-range-rad: calc(
        var(--knob-range-angle) * var(--pi) / 360
    );
}

.Knob-module_label__nWCHa {
    text-align: center;
    color: var(--app-default-foreground-color);
}

.Knob-module_knob__yJyPe {
    --size: 32px;
    width: var(--size);
    height: var(--size);
    position: relative;
    border-radius: 100%;
}
.Knob-module_knob__yJyPe svg * {
    stroke-linecap: round;
}

.Knob-module_rangeArc__9VLG0 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.Knob-module_rangeArcCircle__k9xj6 {
    fill: none;
    transform: rotate(
        calc(
                (360 - var(--knob-range-angle)) * 0.5deg + 90deg
        )
    );
    transform-origin: center;
    stroke-dasharray: calc(var(--knob-range-rad) * var(--size)) 100000px;
    stroke: var(--knob-range-color);
    stroke-width: 2px;
}

.Knob-module_valueArcCircle__ibT4K {
    fill: none;
    transform: rotate(
            calc(
                    (360 - var(--knob-range-angle)) * 0.5deg + 90deg +
                    var(--knob-neutral-min-value) * var(--knob-range-angle) * 1deg
            )
    );
    transform-origin: center;
    stroke-dasharray: calc(var(--knob-range-rad) * var(--size) * var(--knob-neutral-abs-value) ) 100000px;
    stroke: var(--knob-value-color);
    stroke-width: 2px;
}

.Knob-module_barWrapper__PjQcH {
    transform: rotate(
            calc(  (var(--knob-value) - 0.5) * var(--knob-range-angle) * 1deg)
    );
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}

.Knob-module_bar__Lxvm6 {
    position: absolute;
    height: 50%;
    top: 0;
    left: calc( var(--size) / 2 );
    border-right: var(--border-width) solid var(--knob-handle-color);
}

.Knob-module_value__oYRY1 {
    color: var(--app-default-foreground-color);
    font-size: 12px;
    opacity: 0.5;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    width: 1px;
    min-width: 0;
}

.Knob-module_pow__NB6gJ {
    margin-top: -4px;
    font-size: 10px;
}

/* common button's styles*/
.Button-module_button__XsdzX {
    outline: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;

    display: flex;
    align-items: center;
    gap: 4px;

    color: var(--button-icon-stroke-default);

    background: var(--background);
    border: var(--border);
    padding: 3px;
    box-sizing: border-box;

    --size: calc(1px * var(--input-height));
    min-height: var(--size);
    min-width: var(--size);
}
.Button-module_leftAndText__LiDMb {
    display: flex;
    align-items: center;
    gap: 4px;
}
.Button-module_button__XsdzX svg {
    font-size: 1.2em;
}
.Button-module_button__XsdzX[disabled='true'] {
    opacity: 0.5;
}


/* button's variants*/
/* primary */
.Button-module_primary__pKzGC {
    --border-color: var(--button-primary-default-border-color);
    border: 1px solid var(--border-color);

    --background: var(--button-primary-default-background);

    color: var(--button-icon-stroke-always-white);
}
.Button-module_primary__pKzGC:hover {
    --border-color: var(--button-primary-hover-border-color);

    --background: var(--button-primary-hover-background);
}
.Button-module_primary__pKzGC:active {
    --border-color: var(--button-primary-active-border-color);

    --background: var(--button-primary-active-background);
}
.Button-module_primary__pKzGC:focus-visible {
    outline: 2px solid var(--semantic-panel-focus);
}
/* secondary */
.Button-module_secondary__FXZW8 {
    --border-color: var(--button-secondary-default-border-color);
    border: 1px solid var(--border-color);

    --background: var(--button-secondary-default-background);

    color: var(--button-icon-stroke-default);
}
.Button-module_secondary__FXZW8:hover {
    --border-color: var(--button-secondary-hover-border-color);

    --background: var(--button-secondary-hover-background);
    color: var(--button-icon-stroke-contrast);
}
.Button-module_secondary__FXZW8:active {
    --border-color: var(--button-secondary-active-border-color);

    --background: var(--button-secondary-active-background);
    color: var(--button-icon-stroke-contrast);
}
.Button-module_secondary__FXZW8:focus-visible {
    outline: 2px solid var(--semantic-panel-focus);
}
/* ghost */
.Button-module_ghost__6NiSi {
    --background: var(--button-ghost-default-background);
    border: none;

    color: var(--button-icon-stroke-default);
}
.Button-module_ghost__6NiSi:hover {
    --background: var(--button-ghost-hover-background);
}
.Button-module_ghost__6NiSi:active {
    --background: var(--button-ghost-active-background);
}
.Button-module_ghost__6NiSi:focus-visible {
    outline: 2px solid var(--semantic-panel-focus);
}

.Button-module_fluid__-PB9y {
    width: 100%;
}

.Button-module_alignCenter__53GbH {
    justify-content: center;
}

.Button-module_alignLeft__hE8h5 {
    justify-content: start;
}

.Button-module_alignBetween__Boe8G {
    justify-content: space-between;
}

.Switch-module_switch__8l14X {
    display: flex;
}

.Switch-module_option__r4U6y {
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    color: var(--option-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-size: 16px;
}

.Switch-module_option__r4U6y:not(.Switch-module_selected__vHRdV) {
    --option-color: var(--switch-default-icon-color) !important;
}

.Switch-module_option__r4U6y.Switch-module_selected__vHRdV {
    --option-color: var(--switch-selected-icon-color) !important;
}

.Switch-module_option__r4U6y:not(.Switch-module_selected__vHRdV):hover {
    --option-color: var(--switch-hovered-icon-color) !important;
}

.Switch-module_option__r4U6y svg * {
    stroke: var(--option-color) !important;
}

.Switch-module_big__n2-Xg svg {
    font-size: 40px;
}

.Switch-module_medium__Bztks svg {
    font-size: 35px;
}

.Switch-module_small__pQ8Ak svg {
    font-size: 30px;
}

.Switch-module_big__n2-Xg {
    min-width: calc(1px * var(--input-height-big));
    height: calc(1px * var(--input-height-big));
}

.Switch-module_medium__Bztks {
    min-width: calc(1px * var(--input-height-medium));
    height: calc(1px * var(--input-height-medium));
}

.Switch-module_small__pQ8Ak {
    min-width: calc(1px * var(--input-height-small));
    height: calc(1px * var(--input-height-small));
}


.GraphTooltip-module_graphTooltip__vmJof {

    background: pink;
    width: 100%;
}
    

.PiecewiseGraphInteractive-module_piecewiseGraphInteractive__2f6p5 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.PiecewiseGraphInteractive-module_svg__qTDwq {
    width: 100%;
    height: 100%;
    min-height: 0;
    transform: scaleY(-1);
    overflow: visible;
    stroke: var(--app-default-foreground-color);
    stroke-width: 2px;
    fill: none;
}

.PiecewiseGraphInteractive-module_dot__LY90G{
    stroke: color-mix(in srgb, var(--app-default-foreground-color) 20%, #777);
    stroke-width: 20px;
    stroke-opacity: 0.7;
    cursor: move;
}

.PiecewiseGraphInteractive-module_dot__LY90G:hover{
    stroke: var(--accent);
}




.PiecewiseGraphInteractive-module_rows__ATLr6{
    height: 100%;
    width: calc( 1px * var(--width));
}

.AutomationEditor-module_automationEditor__JsuA0{
    height: 100%;
}

.LabeledContainer-module_labeledContainer__5TdoC {
    min-width: 0;
}

.LabeledContainer-module_box__OZEJb {
    border-radius: var(--radius);
}

.LabeledContainer-module_big__uMCKL .LabeledContainer-module_label__IKN-4 {
    padding-bottom: 10px;
}

.LabeledContainer-module_medium__vCAWN .LabeledContainer-module_label__IKN-4 {
    padding-bottom: 7px;
}

.LabeledContainer-module_small__mMpwV .LabeledContainer-module_label__IKN-4 {
    padding-bottom: 5px;
}

.LabeledContainer-module_tiny__h8xJ- .LabeledContainer-module_label__IKN-4 {
    padding-bottom: 3px;
}


.LabeledContainer-module_label__IKN-4 {
    font-weight: 600;
    color: var(--app-default-foreground-color);
}

.LabeledContainer-module_content__8WcTq {

}


.OptionallySelectedBox-module_optionallySelectedBox__4HYGJ {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    --color: var(--app-default-foreground-color);
    color: var(--color);
    height: calc(1px * var(--input-height));
}


.OptionallySelectedBox-module_selected__WX-aD {
    font-weight: 600;
    background: var(--selection-background);
    border-radius: var(--radius);
    --color: var(--selection-foreground);
}



.ClipsNavigator-module_clipsNavigator__ZLS4e {
    width: 294px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 5px;
}

.ClipsNavigator-module_trackInfo__t-tI2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ClipsNavigator-module_trackActions__7DOra {
    display: flex;
    gap: 5px;
}

.ClipsNavigator-module_clipIcon__JaE-V {
    color: var(--color);
    font-size: 24px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ClipsNavigator-module_clipTitle__qW6XK {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ClipsNavigator-module_space__goeNA {
    flex: 1;
}


.Meter-module_meter__MCzvp {
    --size: 4px;
    border-radius: var(--radius);
    position: relative;
    background: var(--meter-background);
    overflow: hidden;
    width: 100%;
    height: var(--size);
    border: 1px solid gray;
}

.Meter-module_meterVertical__Z171g{
    height: 100%;
    width: var(--size);
}

.Meter-module_level__6lh1E {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        var(--gradient-angle),
        var(--meter-green) 0%,
        var(--meter-yellow) 60%,
        var(--meter-red) 100%
    );
    clip-path: inset(-1px calc(100% - var(--level) * 100%) -1px 0);
    --gradient-angle: 90deg;
}

.Meter-module_levelVertical__YaKUS {
    --gradient-angle: 180deg;
    clip-path: inset( calc(100% - var(--level) * 100%) 0 0 0);
}

.MultiMeter-module_multiMeter__RhItw {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.MultiMeter-module_multiMeterVertical__dVGqU {
    flex-direction: row-reverse;
    height: 100%;
}


.MultiMeter-module_meters__J0Jds {
    display: flex;
    gap: 2px;
    align-items: stretch;
    flex-direction: column;
}

.MultiMeter-module_metersVertical__NXwug {
    flex-direction: row;
}



.MultiMeter-module_marks__4yvHY {
    position: relative;
    width: 100%;
    height: 12px;
}
.MultiMeter-module_marksVertical__sO-If {
    height: 100%;
    width: 21px;
}

.MultiMeter-module_mark__KNKNG {
    position: absolute;
    left: calc( 100% * var(--pos) );
    background: color-mix(
            in srgb,
            var(--app-default-foreground-color) 80%,
            transparent
    );
    width: 1px;
    height: 4px;
}

.MultiMeter-module_markLabel__XuJjL {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.5;
    position: absolute;
    top: 100%;
}

.MultiMeter-module_markVertical__63za2 {
    height: 1px;
    width: 4px;
    left: unset;
    right: 0;
    bottom: calc( 100% * var(--pos) );

    .MultiMeter-module_markLabel__XuJjL{
        top: unset;
        right: 100%;
    }
}
.MultiMeter-module_alignEnd__f-A7-:not(.MultiMeter-module_markVertical__63za2){
    .MultiMeter-module_markLabel__XuJjL {
        transform: translateX(-100%);
    }
}
.MultiMeter-module_alignStart__uEGJh.MultiMeter-module_markVertical__63za2{
    .MultiMeter-module_markLabel__XuJjL {
        transform: translateY(-100%);
    }
}

.FilterButton-module_filterButton__CT3WU {
    background: none;
    outline: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--app-default-foreground-color);
}


.PiecewiseLinearGraph-module_svg__vvSpW {
    width: 100%;
    height: 100%;
    transform: scaleY(-1);
    overflow: visible;
}

.PiecewiseLinearGraph-module_polyline__4H99t {
    stroke: var(--plot-line-color);
    stroke-width: 2px;
}

.ParametricEQUI-module_parametricEQUI__8ZSi- {
    display: flex;
    flex-direction: column;
    padding: var(--default-padding);
}


.ParametricEQUI-module_filter__2-G8b {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ParametricEQUI-module_plot__pHD0h {
    height: 64px;
    overflow: clip;
    padding-top: 1px;
}


.Dropdown-module_dropdown__gwZ03 {
    position: relative;
}

.Dropdown-module_list__FkiYn {
    position:absolute;
    margin: 0;
    background: var(--semantic-panel-bg-1);
    border: 1px solid var(--semantic-interactive-3-default-br);
    border-radius: var(--radius);
    min-width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: var(--padding-normal);
    gap: var(--padding-small);
}



.HeaderedPlugin-module_headeredPlugin__Mv5b9 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.HeaderedPlugin-module_header__l15AI {
    background: var(--panel-background-color);
    border-bottom: var(--panel-border);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.HeaderedPlugin-module_title__OtsL4 {
    display: flex;
    align-items: center;
}

.HeaderedPlugin-module_presets__p5AQS {
    display: flex;
    gap: 5px;
}

.HeaderedPlugin-module_pluginUI__IwG7j {
    flex: 1;
    position: relative;
    min-height: 0;
}


.Checkbox-module_wrapper__Q1J4t {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--padding-normal);
    cursor: pointer;
}

.Checkbox-module_title__DJQP3 {
    font-size: 13px;
}


.SidePanel-module_sidePanelContainer__jSNEs {
    width: 100%;
    height: 100%;
    display: flex;
}

.SidePanel-module_left__TQdG8 {
    flex-direction: column-reverse;
}

.SidePanel-module_right__SQMcK {
}

.SidePanel-module_sidePanel__do-ne:first-child {
    border-right: var(--panel-border);
}

.SidePanel-module_sidePanel__do-ne:last-child {
    border-left: var(--panel-border);
}

.SidePanel-module_main__u5VUe {
    flex: 1;
    height: 100%;
    position: relative;
}

.SidePanel-module_sidePanel__do-ne {
    width: 250px;
    background: var(--panel-background-color);
    overflow-y: auto;
}


.GridOverlay-module_gridOverlay__xWwGx {
    position: absolute;
    z-index: 2;
    top: 10px;
    display: flex;
    gap: 5px;
}

.GridOverlay-module_left__2WaA- {
    left: 10px;
}

.GridOverlay-module_right__fwg7m {
    right: 10px;
}


.Grid-module_grid__M5dbT {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;


    --grid-strength: 1px;
    --grid-strength-accent: 2px;

    --grid-accent: 4;

    --grid-color: #0001;
    --grid-color-accent: #0001;

    --pxPerGrid: calc(
            1px * var(--gridSize) * var(--zoom)
    );
    --portCircleRadius: calc(10px * var(--zoom));

    cursor: grab;

    background-position: calc(var(--pxPerGrid) * var(--offsetX)) calc(var(--pxPerGrid) * var(--offsetY));
    background-size: 1px calc(var(--pxPerGrid) * var(--grid-accent)),
    1px calc(var(--pxPerGrid)),
    calc(var(--pxPerGrid) * var(--grid-accent)) 1px,
    calc(var(--pxPerGrid)) 1px;
    background-image: linear-gradient(
            to bottom,
            var(--grid-color-accent) var(--grid-strength-accent),
            transparent var(--grid-strength-accent)
    ),
    linear-gradient(
            to bottom,
            var(--grid-color) var(--grid-strength),
            transparent var(--grid-strength)
    ),
    linear-gradient(
            to right,
            var(--grid-color-accent) var(--grid-strength-accent),
            transparent var(--grid-strength-accent)
    ),
    linear-gradient(
            to right,
            var(--grid-color) var(--grid-strength),
            transparent var(--grid-strength)
    );
    font-size: calc(16px * var(--zoom));

}




.MoveableElement-module_node__mjhrv {
    background: var(--panel-background-color);
    border-radius: calc(0.5 * var(--pxPerGrid));
    border: 1px solid var(--contrast-border-color);
    width: calc(var(--pxPerGrid) * var(--width));
    left: calc( (var(--x) + var(--offsetX)) * var(--pxPerGrid));
    top: calc( (var(--y) + var(--offsetY)) * var(--pxPerGrid));
    position: absolute;
    cursor: auto;
}

.MoveableElement-module_selectedNode__6-2oq {
    border-color: var(--accent);
}

.MoveableElement-module_nodeTitle__oldDt:hover,.MoveableElement-module_draggedNode__tjgDH .MoveableElement-module_nodeTitle__oldDt,.MoveableElement-module_selectedNode__6-2oq .MoveableElement-module_nodeTitle__oldDt {
    color: var(--accent);
}

.MoveableElement-module_nodeTitleBar__MYx22 {
    height: var(--pxPerGrid);
    border-bottom: 1px solid var(--contrast-border-color);
    display: flex;
    align-items: center;
    padding: 0 calc(var(--portCircleRadius) * 2);
}

.MoveableElement-module_nodeTitle__oldDt {
    cursor: grab;
    flex: 1;
    font-weight: 600;
    color: var(--app-default-foreground-color);
    user-select: none;
    display: flex;
    align-items: center;
    min-width: 0;
}

.MoveableElement-module_dragIcon__jAzmB {
    min-width: calc(24px * var(--zoom));
    width: calc(24px * var(--zoom));
    height: calc(24px * var(--zoom));
    margin-right: calc(5px * var(--zoom));
    color: var(--app-default-foreground-color);
}

.MoveableElement-module_titleText__Q2dsp {
    position: absolute;
    transform: translate(0, -100%);
    width: 100%;
    overflow-wrap: break-word;
    padding: calc(var(--pxPerGrid) * 0.2);
}

.MoveableElement-module_nodeTitleButton__qYsGv {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    --size: calc(24px * var(--zoom));
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16px * var(--zoom));
    color: var(--app-default-foreground-color);
}

.MoveableElement-module_nodeTitleButton__qYsGv:hover {
    color: var(--accent);
}

.MoveableElement-module_nodeContent__qhOdL {
    width: calc(var(--pxPerGrid) * var(--width));
}


.UIEditorGrid-module_uIEditorGrid__J9S0t {
    width: 100%;
    height: 100%;
    position: relative;
}


.HoriLine-module_horiLine__spynV {
    display: flex;
    align-items: center;
    gap: 5px;
}


.Properties-module_properties__rP0b2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.UIEditorProperties-module_uIEditorProperties__pKdVD {
    width: 100%;
    height: 100%;
    padding: var(--default-padding);
    overflow-y: auto;
}

.UIEditorProperties-module_header__dTnBD {
    margin-bottom: var(--default-padding);
    padding-bottom: var(--default-padding);
    border-bottom: var(--separator-border);
}

.UIEditorProperties-module_body__9b64s {
}


.ReverbUIEditor-module_customButtons__o4OWw {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 5px;
}

.ReverbUIEditor-module_iconWrapper__fJY6R {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ReverbUIEditor-module_icon__Jffar {
    width: 32px;
    height: 32px;
}


.ReverbForm-module_ui__3Hsz6 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ReverbForm-module_grid__DcQJx {
    display: grid;
    gap: 1px;
    --cell-size: 12px;
}

.ReverbForm-module_element__3kuLN {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    width: 100%;
    height: 100%;
}

.ReverbForm-module_wrapped__ZNjxA {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.Padded-module_padded__TfSEe {
    padding: 10px;
}




.Curve-module_svg__N-R7D {
    pointer-events: none;
    position: absolute;
    left: calc( var(--offsetX) * var(--pxPerGrid));
    top: calc( var(--offsetY) * var(--pxPerGrid));
    width: calc(1000 * var(--pxPerGrid));
    height: calc(1000 * var(--pxPerGrid));
    overflow: visible;
}

.Curve-module_connection__FzqoD {
    fill: none;
    stroke: var(--app-default-foreground-color);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

.Curve-module_connectionCap__P-r90 {
    fill: var(--app-default-foreground-color);
}


.Port-module_port__atzHa {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--portCircleRadius);
    height: var(--pxPerGrid);
    background: none;
    outline: none;
    border: none;
    text-align: left;
    width: 100%;
    padding-left:  calc(2 * var(--portCircleRadius));
    padding-right:  calc(2 * var(--portCircleRadius));
}

.Port-module_port__atzHa:hover {
    cursor: pointer;
}

.Port-module_port__atzHa[disabled]:hover {
    cursor: not-allowed;
}

.Port-module_rightPort__-F8nW {
    flex-direction: row-reverse;
}

.Port-module_circle__yg6jA .Port-module_portShape__gCk-w {
    border-radius: 100%;
}

.Port-module_square__1H2d2 .Port-module_portShape__gCk-w {
    border-radius: 0;
}

.Port-module_portShape__gCk-w {
    position: absolute;


    --border-width: 1px;
    width: calc(var(--portCircleRadius) * 2 - 2 * var(--border-width));
    height: calc(var(--portCircleRadius) * 2 - 2 * var(--border-width));
    border: var(--border-width) solid var(--contrast-border-color);
    background: var(--app-background-color);
    flex-shrink: 0;
}

.Port-module_rightPort__-F8nW .Port-module_portShape__gCk-w{
    right: 0;
    transform: translate(50%, 0);
}

.Port-module_leftPort__pbaQ9 .Port-module_portShape__gCk-w{
    left: 0;
    transform: translate(-50%, 0);
}
.Port-module_port__atzHa:hover .Port-module_portShape__gCk-w,.Port-module_portActive__jzxkM .Port-module_portShape__gCk-w {
    background: #00FF00;
}

.Port-module_port__atzHa[disabled]:hover .Port-module_portShape__gCk-w {
    background: #ff0000;
}

.Port-module_portTitle__tx-U9 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-default-foreground-color);
    font-size: calc(16px * var(--zoom));
}


.Node-module_container__lLQ48{
    display: flex;
    flex-direction: row;
}
.Node-module_rtl__sQazC{
    flex-direction: row-reverse;
}
.Node-module_inputContainer__vF6za {
    width: calc(var(--inputsWidth) * var(--pxPerGrid));
}
.Node-module_outputContainer__5XDhr {
    width: calc(var(--outputsWidth) * var(--pxPerGrid));
}
.Node-module_inputContainer__vF6za,
.Node-module_outputContainer__5XDhr{
    padding-top: calc( var(--pxPerGrid) * 0.5);
}
.Node-module_nodeContent__Gl8TH {
    width: calc((var(--width) - var(--inputsWidth) - var(--outputsWidth)) * var(--pxPerGrid));
    min-height: calc(var(--height) * var(--pxPerGrid) - 2px);
    --uiScale: var(--zoom);

}

.Node-module_hasInputs__xUmUs:not(:empty) {
    border-left: 1px dotted var(--contrast-border-color);
}

.Node-module_hasOutputs__bZsJs:not(:empty) {
    border-right: 1px dotted var(--contrast-border-color);
}


.NodeEditor-module_wrapper__ySSVC {
    width: 100%;
    height: 100%;
    position: relative;
}

.NodeEditor-module_nodeEditorDragging__FY-La, .NodeEditor-module_nodeEditorDragging__FY-La * {
    cursor: grabbing !important;
}


.VerColumn-module_verColumn__oUrzr {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.CustomPortsNodeUI-module_portIcon__-1sXD {
    min-width: 22px;
    color: var(--app-default-foreground-color);
}


.InputWithAddressedError-module_inputWithAddressedError__sfxwp {

}

.InputWithAddressedError-module_errorMessage__YYSz9 {
    margin-top: 10px;
    color: #F00;
    font-weight: 600;
}


.ReverbNodeSettings-module_reverbNodeSettings__HVl2F {
    padding: var(--default-padding);
}



.ReverbNodesEditor-module_nodePreview__jndBq {
    padding: calc(var(--default-padding)  * var(--zoom));
    overflow-wrap: break-word;
    svg {
        vertical-align: middle;
        margin-right: 4px;
    }
}


.ReverbSubgraphSelector-module_reverbSubgraphSelector__VJhP4 {
    padding: var(--default-padding);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ReverbSubgraphSelector-module_subgraph__lD1-b {
    display: flex;
    gap: 5px;
    align-items: center;
    width: 100%;
}

.ReverbSubgraphSelector-module_title__Nts5H {
    flex: 1;
}

.SimpleSamplerUI-module_simpleSamplerUI__oAQ4z {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: var(--default-plugin-width);
}





.SimpleSamplerUI-module_samples__98Djp {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

.SimpleSamplerUI-module_white__3yQq9 {
    background: var(--piano-roll-note-white-background);
}

.SimpleSamplerUI-module_black__AvqdY {
    background: var(--piano-roll-note-black-background);
}

.SimpleSamplerUI-module_sample__Crayr {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius);
}

.SimpleSamplerUI-module_sampleTitle__d19QU {
    width: 30px;
}

.SimpleSamplerUI-module_loadedState__8-SQa {

}

.SimpleSamplerUI-module_pickSampleButton__RA1-f {
    padding: 10px;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    flex: 1;
}

.SimpleSamplerUI-module_volume__edl5M {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 5px;
}

.SimpleSynthUI-module_simpleSynthUI__2FrUN {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: var(--default-plugin-width);
}

.SimpleSynthUI-module_shapeIcon__5WGnM {
    padding: 1px;
    width: 20px;
    height: 20px;
}

.SimpleSynthUI-module_envelope__dyBSH {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.SimpleSynthUI-module_knobs__CR9Dm {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.SimpleSynthUI-module_space__CZLnG {
    flex: 1;
}

.SimpleSynthUI-module_envelopeGraph__y19rT {
    width: calc(100% - 25px);
    height: 60px;
    padding: 10px;
}

.SimpleSynthUI-module_graphEnabled__5jjuV {

}

.SimpleSynthUI-module_graphDisabled__KO6M4 {
    opacity: 0.2;
}

.SimpleSynthUI-module_spectre__9YWYc {
    width: calc(100% - 25px);
    height: 60px;
    padding: 10px;
}

.WaveShaperUI-module_waveShaperUI__-3AUk {
    height: 300px;
}

.Dialog-module_dialog__e5pS-::backdrop {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: var(--semantic-panel-br);
}

.Dialog-module_dialog__e5pS- {
    padding: 16px;
    outline: 1px solid var(--semantic-panel-br);
    background: var(--semantic-panel-bg-1);
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Dialog-module_titleLine__lVEdy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    color: var(--semantic-panel-fg-1);
}

.Dialog-module_title__88wBV {

}



.AddPluginDialog-module_addPluginDialog__Kh6H5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
}

.Channel-module_channel__znhva {
    display: flex;

    min-width: 42px;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    height: 100%;
    padding-top: 16px;
}

.Channel-module_meter__4fKgM {
    flex-shrink: 0;
    height: 214px;
}

.Channel-module_title__sTCZz {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.Channel-module_meter__4fKgM {
    height: 100%;
}
.MixerLayout-module_mixer__bB6j8 {
    height: 100%;
    width: 100%;
    overflow-x: scroll;

    --port-size: 13px;
    --translateX: 6.5px;
}

.MixerLayout-module_grid__JHVnz {
     padding: 10px;
     display: grid;
     height: 100%;
     grid-auto-columns: max-content;
}

.MixerLayout-module_gridCell__-g-nT {
    grid-column: var(--col);
    grid-row: var(--row);
    min-height: calc( var(--height) * 3px);
}

.MixerLayout-module_connection__91VXS {
    border: 1px solid var(--semantic-panel-br);
    width: 100%;
    height: 100%;
    border-bottom-width: 0;
    transform: translate(var(--translateX), var(--translateX)) ;
    pointer-events: none;
}

.MixerLayout-module_pluginToChanelConnectionBottom__JWGIb{
    border-bottom-width: 0;
    border-right-width: 0;
}
.MixerLayout-module_pluginToChanelConnectionTop__BRlW2{
    border-bottom-width: 0;
    border-left-width: 0;
    border-top-width: 0;
}
.MixerLayout-module_flipX__K4hd9 {
    transform: translate(var(--translateX), var(--translateX)) scaleX(-1) ;
}

.MixerLayout-module_channelBox__85XQS {
    background: var(--semantic-panel-bg-2);
    border: 1px solid var(--semantic-panel-br);
    width: 100%;
    height: 100%;
}
.Plugin-module_pluginButtons__jXzsn {
    display: flex;
    justify-content: flex-end;
}

.Plugin-module_pluginPort__ZjOYc {
    top: 100px;
    position: absolute;
}

.Plugin-module_pluginBox__40QBH {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}
.Port-module_port__z3uzJ {
    width: var(--port-size);
    height: var(--port-size);
    border-radius: 50%;
    box-sizing: border-box;

    border: 1px solid var(--semantic-interactive-1-default-bg);
    background: var(--semantic-panel-bg-1);
    font-size: 9px;
    line-height: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(var(--translateX));
}
.Port-module_selected__P4Uj7 {
    border-color: var(--semantic-interactive-1-default-br);
    background: var(--semantic-interactive-1-default-bg);
    color: var(--semantic-interactive-1-default-fg);
}
.Panel-module_panel__FiUfL {
    padding: 12px;
    height: 50px;
    display: flex;
    justify-content: space-between;
}

.Panel-module_buttonGroup__S4H7N {
    height: 16px;
    display: flex;
    gap: 4px;
}

.Panel-module_mainContent__O4rt2 {
    display: flex;
    gap: 16px;
}

.Panel-module_secondaryContent__48ngh {
    display: flex;
    gap: 16px;
}

.Panel-module_bpm__ilSn3 {
    display: flex;
    gap: 4px;
}

.Panel-module_bpmTitle__G-LgX {
    font-size: 11px;
    opacity: 0.6;
    margin-top: auto;
    margin-bottom: auto;
}

.Panel-module_bpmValue__Hnljp {
    width: 60px;
}

.Clip-module_clip__cbjC6 {
    position: absolute;
    top: 0;
    height: 100%;
    left: calc( 1px * var(--pxPerBar) * var(--startBar) );
    width: calc( 1px * var(--pxPerBar) * var(--lengthBars) );
    --timeline-clip-padding: 2px;
    padding: var(--timeline-clip-padding);
    cursor: pointer;
    --resize-tint: #0004;
    --resize-opaq: #0000;
}


.Clip-module_resizeBefore__bccNf,.Clip-module_resizeAfter__ZNOmc {
    content: " ";
    display: block;
    position: absolute;
    top: var(--timeline-clip-padding);
    height: calc(100% - 2 * var(--timeline-clip-padding));
    width: calc(var(--resizeAreaSize) * 100% - var(--timeline-clip-padding));
    cursor: ew-resize;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.Clip-module_resizeBefore__bccNf:hover,.Clip-module_resizeAfter__ZNOmc:hover {
    opacity: 1;
}

.Clip-module_resizeBefore__bccNf {
    left: var(--timeline-clip-padding);
    background: linear-gradient(90deg, var(--resize-tint), var(--resize-opaq));
    border-radius: 0 0 var(--radius) var(--radius);
}

.Clip-module_resizeAfter__ZNOmc {
    right: var(--timeline-clip-padding);
    background: linear-gradient(90deg, var(--resize-opaq), var(--resize-tint));
    border-radius: var(--radius) var(--radius) 0 0 ;
}






.RowsElems-module_row__pkix1 {
    border-bottom: 1px solid #0002;
    border-top: 1px solid #0002;
    position: relative;
    background: color-mix(in srgb, var(--rowColor) 30%, #FFF0);
    height: calc(1px * var(--rowHeight));
}


.RowsElems-module_frame__c504S {
    position: absolute;
    left: calc( 1px * var(--pxPerBar) * var(--frameFromBars) );
    top: calc( 1px * var(--rowHeight) * var(--frameFromRow) );
    width: calc( 1px * var(--pxPerBar) * (
        var(--frameToBars) - var(--frameFromBars)
    ));
    height: calc( 1px * var(--rowHeight) * (
        var(--frameToRow) - var(--frameFromRow)
    ));
    border: var(--border-width) solid #000;
    border-radius: var(--radius);
    pointer-events: none;
}


.RowsTitles-module_rowTitles__CbwJZ {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--app-background-color);
    /*box-shadow: 0 0 16px #0003;*/
}

.RowsTitles-module_rowTitle__oHi9- {
    border-bottom: 1px solid #0003;
    border-top: 1px solid #0003;
    border-right: 2px solid #0005;
    width: calc(1px * var(--rowTitlesWidth));
    background: var(--rowColor);
    height: calc(1px * var(--rowHeight));
}

.PianoRoll-module_selected__00aMz {
    background: var(--piano-roll-note-selected-background);
}

.PianoRoll-module_unselected__zRuSU  {
    background: var(--piano-roll-note-default-background);
}

.PianoRoll-module_noteClip__EJFrc {
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
}

.PianoRoll-module_noteTrackTitle__5fNZY {
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 5px;
    color: var(--app-default-foreground-color);
}


.PiecewiseGraph-module_svg__c1bDA {
    width: 100%;
    height: 100%;
    transform: scaleY(-1);
    overflow: visible;
    stroke: var(--app-default-foreground-color);
    stroke-width: 2px;
    fill: none;
}


.Wave-module_wave__yrRcz {
    min-height: 0;
    width: 100%;
}

.Wave-module_svg__WajJC {
    width: 100%;
    height: 100%;
}

.Wave-module_path__L6R7o {
    fill: none;
    stroke-width: 2px;
    stroke: var(--app-default-foreground-color);
}




.ChannelOps-module_channelOps__lgeLA {
    display: flex;
    gap: 1px;
}



.Playlist-module_playlistClip__jrDmP {
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
}

.Playlist-module_playlistClipSelected__xCACo {
    background: var(--playlist-clip-selected-background);
    border: var(--playlist-clip-default-border);
}

.Playlist-module_playlistClipUnselected__4jFzm {
    background: var(--playlist-clip-default-background);
}

.Playlist-module_playlistClipTitle__FJ720 {
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Playlist-module_playlistClipAutomation__ipld3 {
    flex: 1;
    width: 100%;
    min-height: 0;
    position: relative;

    overflow-x: clip;
    overflow-y: visible;

}

.Playlist-module_playlistClipAutomationScaleWrapper__-w-WI {
    position: absolute;
    top: 0;
    height: 100%;


    width: calc( 100% / var(--clipSourceLength) );
    left: calc(
            -100% /
            var(--clipSourceLength) *
            var(--clipSourceTime)
    );

}

.Playlist-module_playlistClipNotes__e-nv7 {
    flex: 1;
    width: 100%;
    min-height: 0;
    padding: 0 0 5px;
    overflow: hidden;
}

.Playlist-module_playlistClipWave__SNkLN {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.Playlist-module_playlistClipWave__SNkLN>* {
    flex: 1;
    min-height: 0;
}

.Playlist-module_notesPreview__BYFYw {
    height: 100%;
    width: calc(100% + 2 * var(--timeline-clip-padding));
    margin-left: calc(-1 * var(--timeline-clip-padding));
    position: relative;
    --noteSize: calc( 100% / (var(--maxNote) - var(--minNote) + 1) );
}

.Playlist-module_notePreview__6ZT4u {
    position: absolute;

    height: var(--noteSize);
    top: calc(100% - (var(--note) - var(--minNote) + 1) * var(--noteSize));

    width: calc( 100% * var(--noteTimeLength) / (var(--clipSourceLength)) );
    left: calc( 100% * (var(--noteTimeStart) - var(--clipSourceTime)) / (var(--clipSourceLength)) );
    padding: 1px;

}

.Playlist-module_notePreviewFill__dOGMs {
    border-radius: 2px;
    width: 100%;
    height: 100%;
    background: var(--playlist-note-background);
}

.Playlist-module_trackTitle__vM3H0 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    font-weight: 600;
}

.Playlist-module_levels__gybaI {
    width: 100%;
    display: flex;
    flex-direction: column;
}


.PluginUI-module_pluginUI__tQUXG {
    width: 100%;
    height: 100%;
}


.WaveEditor-module_waveEditor__DCw5P {
    display: flex;
    flex-direction: column;
    height: calc(1px * var(--rowHeight));
    min-height: 0;
    width: calc( 1px * var(--width));
}

.WaveEditor-module_waveEditor__DCw5P>* {
    flex: 1;
}


.AsyncTree-module_root__xmxEc {

}

.AsyncTree-module_asyncTree__-xvbz {
    padding-left: 29px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.AsyncTree-module_root__xmxEc>.AsyncTree-module_asyncTree__-xvbz {
    padding-left: 0;
}

.AsyncTree-module_item__ZJsOb {
    background: none;
    outline: none;
    border: none;
    font-size: 14px;
}

.AsyncTree-module_folder__TJFE- {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    color: var(--icon-stroke);
}

.AsyncTree-module_folder__TJFE-:hover {
    background: var(--selection-background);
    cursor: pointer;
}

.AsyncTree-module_folderIcon__AoUhi {
    width: 24px;
    height: 24PX;
}

.AsyncTree-module_folderTitle__b5YLa {

}

.AsyncTree-module_file__5Z-LP {
}


.WavsAsyncTree-module_wavsAsyncTreeWrapper__jb98b {
    position: relative;
}

.WavsAsyncTree-module_wavsAsyncTree__KX0sp {
    position: absolute;
    width: 100%;
}

.WavsAsyncTree-module_wavFile__Bjp1d {
    background: var(--input-default-background);
    border-radius: var(--radius);
    padding: 4px;
}

.WavsAsyncTree-module_wavFileName__PNMqK,.WavsAsyncTree-module_wavFileProperties__UnvdX {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.WavsAsyncTree-module_wavFileName__PNMqK {
    top: 0;
}

.WavsAsyncTree-module_wavFileProperties__UnvdX {
    bottom: 0;
    font-size: 10px;
}

.WavsAsyncTree-module_wavFileWave__ciaus {
    margin-top: 4px;
    height: 32px;
    display: flex;
    position: relative;
}

.WavsAsyncTree-module_wavFileButtons__7v4d6 {
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    gap: 2px;
    display: none;
}

.WavsAsyncTree-module_wavFile__Bjp1d:hover .WavsAsyncTree-module_wavFileButtons__7v4d6 {
    display: flex;
}



.UI-module_ui__L4yui {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.UI-module_topPanel__bnUEZ {
    background: var(--panel-background-color);
    border-bottom: var(--panel-border);
}

.UI-module_content__5WbH5 {
    display: flex;
    flex: 1;
    min-height: 0;
}

.UI-module_sidePanel__SXO-r {
    padding: 10px;
    background: var(--panel-background-color);
    border-right: var(--panel-border);
}

.UI-module_mainContent__VuW1b {
    flex: 1;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
}