:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:12px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none}body{margin:0;height:100dvh;max-height:100dvh}.number{display:flex;flex-direction:row;gap:4px}.number label{font-size:9px}.number input[type=number]{color:#d8dee9;background-color:#4c566a;text-align:center;border:none;border-radius:4px;font-size:9px;width:30px;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.number input[type=number]::-webkit-outer-spin-button,.number input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.number input[type=number]:focus{outline:1px solid #81a1c1}.button{all:unset;cursor:default}.button:hover{box-shadow:.2em .2em .4em inset #fff3,.2em .2em .4em #0003;outline:1px solid #81a1c1}.button:active{box-shadow:.2em .2em .4em #0003 inset}.applet{min-height:0;grid-template-rows:32px auto;grid-template-areas:"title-bar" "content";border-radius:10px;border:2px solid #4c566a;border-top:none;box-shadow:0 0 5px 5px #1b1b1b80;background-color:#4c566a;position:absolute;min-height:fit-content;box-sizing:border-box}.applet__edge{position:absolute;z-index:1}.applet__edge--n{width:100%;left:0;height:5px;margin-top:-2px;cursor:n-resize}.applet__edge--e{width:5px;height:100%;right:0;margin-right:-2px;cursor:e-resize}.applet__edge--s{width:100%;height:5px;bottom:0;margin-bottom:-2px;cursor:s-resize}.applet__edge--w{width:5px;height:100%;left:0;margin-left:-2px;cursor:w-resize}.applet__corner{width:10px;height:10px;position:absolute;z-index:2}.applet__corner--ne{top:0;right:0;margin-top:-2px;margin-right:-2px;cursor:ne-resize}.applet__corner--se{bottom:0;right:0;margin-bottom:-2px;margin-right:-2px;cursor:se-resize}.applet__corner--sw{bottom:0;left:0;margin-bottom:-2px;margin-left:-2px;cursor:sw-resize}.applet__corner--nw{top:0;left:0;margin-top:-2px;margin-left:-2px;cursor:nw-resize}.applet__title-bar{width:100%;display:flex;flex-direction:row;justify-content:space-between;padding:0 8px;box-sizing:border-box;cursor:move;background-color:#4c566a;border-radius:7px 7px 0 0}.applet__title-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center}.applet__window-buttons-wrapper{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:flex-end}.applet__window-buttons{display:flex;gap:5px;height:100%;padding:6px 0;box-sizing:border-box}.applet__window-button--close:hover{outline:1px solid #ebcb8b!important}.applet__content{padding:8px;box-sizing:border-box;width:100%;height:100%;min-height:0;min-width:0;overflow-y:auto;border-radius:10px;background-color:#3b4252;box-shadow:0 0 3px 1px inset #2e3440}.select-list{height:100%;border-radius:4px;background-color:#4c566a;cursor:default;font-size:9px}.select-list--open{border-radius:4px 4px 0 0;box-sizing:border-box;box-shadow:0 0 5px #1b1b1bcc}.select-list__clicker{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:4px 4px 0 0}.select-list__clicker--open{box-sizing:border-box;border:1px solid #81a1c1;border-bottom:none}.select-list__current{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden;padding:0 4px}.select-list__items{width:120px;position:absolute;z-index:999;box-sizing:border-box;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 5px 5px #1b1b1bcc;border:1px solid #81a1c1;border-top:none;max-height:400px;overflow-y:auto}.select-list__item{background-color:#2e3440;z-index:1;position:relative;text-align:center;padding:6px 4px;line-height:initial;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #4c566a;box-sizing:border-box}.select-list__item:last-child{border-bottom:none}.select-list__item:hover{background-color:#4c566a}.select-list__item--selected{background-color:#81a1c1}.pattern-selector{display:flex;flex-direction:row;gap:8px}.pattern-selector__select-list{width:120px}.pattern-selector__add-pattern-button{all:unset;aspect-ratio:1/1;background-color:#4c566a;border-radius:4px;transition:all .1s ease;text-align:center}.pattern-selector__add-pattern-button:hover{box-shadow:1px 1px 2px inset #616e88,1px 1px 2px #303643}.pattern-selector__add-pattern-button:active{box-shadow:1px 1px 2px #303643 inset}.sequencer-header{width:100%;height:20px;margin-bottom:8px;border-radius:4px;display:flex;flex-direction:row;justify-content:space-between}.sequencer-header__timing{display:flex;flex-direction:row;gap:10px}.sequencer-header__field{display:flex;flex-direction:row;gap:4px}.sequencer-header__field label{font-size:9px}.sequencer-header__field input[type=number]{border:none;border-radius:4px;font-size:9px;width:30px}.sequencer{width:100%;border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column}.sequencer-footer{width:100%;display:flex;flex-direction:row;justify-content:start}.track-step{width:100%;height:100%;box-sizing:border-box}.track-step-toggle{all:unset;display:block;width:100%;height:100%;border-radius:4px}.track-step-toggle--active{background-color:#ebcb8b;box-shadow:1px 1px 3px #232831,1px 1px 3px 1px #f3dfb7 inset}.track-step-toggle--inactive{background-color:#2e3440;box-shadow:1px 1px 3px 1px inset #232831}.sequencer-track-steps{width:100%;height:100%;display:flex;flex-direction:row;z-index:1;gap:4px}.sequencer-steps-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:row}.sequencer-steps-background__part{width:100%;height:100%;background-color:#4c566a}.sequencer-steps-background__part:nth-of-type(2n){background-color:#434c5e}.sequencer-steps-background__part:first-of-type{border-top-left-radius:6px;border-bottom-left-radius:6px}.sequencer-steps-background__part:last-of-type{border-top-right-radius:6px;border-bottom-right-radius:6px}.menu-items{width:auto;white-space:nowrap;box-sizing:border-box;box-shadow:0 0 2px #00000080;background-color:#2e3440;color:#d8dee9;border-radius:8px}.menu-items--relative{position:relative}.menu-items--absolute{position:absolute}.menu-items__content{box-sizing:border-box}.menu-item{padding:5px 12px;height:20px;border:1px solid #4c566a}.menu-item:first-of-type{border-top-left-radius:8px;border-top-right-radius:8px}.menu-item:not(:first-of-type){border-top:none}.menu-item:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.menu-item:hover{background-color:#4c566a}.context-menu{position:fixed;z-index:9999}.context-menu-target{width:100%;height:100%}.drop-zone{width:100%;height:100%}.drop-zone--drag-over{border-radius:3px;outline:5px double #81a1c1}.sequencer-track-header{width:120px;vertical-align:middle;border:1px solid #4c566a;border-radius:4px;box-sizing:border-box;margin:4px 0;padding:0 6px}.sequencer-track-header--selected{border:1px solid #d8dee9;background-color:#81a1c1}.sequencer-track-header__track-name{display:inline-block;line-height:28px;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.sequencer-progress{width:100%;height:100%;z-index:1;position:relative}.sequencer-progress__indicator{height:10%;background-color:#a3be8c;box-shadow:-6px 0 5px #a3be8c,6px 0 5px #a3be8c;position:absolute;top:0;width:20px;transition:left 16ms linear}.sequencer-tracks{display:flex;flex-direction:row;position:relative;gap:8px}.sequencer-tracks__headers{display:flex;flex-direction:column;width:auto}.sequencer-tracks__steps{display:flex;flex-direction:column;width:100%;position:relative;gap:4px;padding:4px;box-sizing:border-box}.sequencer-launcher__icon:hover g{fill:#81a1c1}.scrollbar{padding:2px;background-color:#2e3440;position:absolute;box-sizing:border-box;border-radius:5px}.scrollbar--x{width:100%;bottom:0;left:0}.scrollbar--y{height:100%;top:0;right:0;width:10px}.scrollbar-slider{position:sticky;background-color:#434c5e;border-radius:5px}.scrollbar-slider--x{height:6px;transition:left .1s ease-out,background-color .1s ease}.scrollbar-slider--y{width:6px;transition:top .1s ease-out,background-color .1s ease}.scrollbar-slider:hover{background-color:#4c566a}.scrollbar-slider:active{background-color:#81a1c1}.arranger{width:100%;height:100%;position:relative}.arranger__viewport{width:100%;height:100%;overflow:hidden;grid-area:viewport}.arranger__rows{width:100%;height:100%;box-sizing:border-box;position:relative;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none}.arranger__sidebar{width:120px;height:100%;background-color:gray}.arranger__cols{width:100%;height:100%;border:1px solid red;box-sizing:border-box;overflow-x:scroll;overflow-y:hidden}.header{width:100%;background-color:#3b4252;height:38px;box-sizing:border-box;display:flex;flex-direction:row;justify-content:start;gap:4px;padding:4px;z-index:9999;border-bottom:1px solid #4c566a}.side-panel{margin-top:-1px;height:100%;border:1px solid #4c566a;border-bottom:none;box-sizing:border-box;padding:6px;background-color:#3b4252;position:relative;flex:none;display:flex;flex-direction:column;z-index:9999}.side-panel--closed:hover{background-color:#81a1c1}.side-panel--right{right:0}.side-panel--left{left:0}.side-panel__title--vertical{left:0;line-height:10px;font-size:10px;position:absolute;writing-mode:vertical-lr;transform:rotate(180deg);text-orientation:mixed}.side-panel__resize-handle{height:100%;width:4px;position:absolute;top:0}.side-panel__resize-handle:not([class$=--disabled]):hover{cursor:col-resize;background-color:#81a1c1}.side-panel__resize-handle--right{left:-2px}.side-panel__resize-handle--left{right:-2px}.side-panel__content{flex:1;height:100%}.control-knob{border-radius:50%}.control-knob--disabled{outline:none;background:#81a1c1}.control-knob--small{width:20px;height:20px}.control-knob__inner{height:100%;width:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.control-knob__pointer{width:3px;height:55%;border-radius:30%;background:#5e81ac;box-shadow:0 0 2px #170a0b;position:absolute;top:-5%}.control-knob__pointer--disabled{background-color:#81a1c1}.track-property{width:100%;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #4c566a;border-radius:4px;box-sizing:border-box}.track-property__top{width:100%;background-color:#4c566a;padding:6px;box-sizing:border-box;border-radius:4px}.track-property__top__inner{display:flex;justify-content:space-between;flex-direction:row}.track-property__top__inner-left{display:flex;justify-content:space-between;flex-direction:row;gap:10px}.track-property__top--expanded{border-radius:4px 4px 0 0}.track-properties-list{all:unset;display:flex;flex-direction:column;gap:6px}.waveform-visualizer{aspect-ratio:16/9;border:1px solid #4c566a;background-color:#2e3440;border-radius:12px;box-sizing:border-box}.track-properties-panel{display:flex;height:100%;flex-direction:column;justify-content:space-between}.sample-browser-search{width:100%;border:1px solid #4c566a;border-radius:4px;display:flex;flex-direction:row;justify-content:space-between;padding:4px;box-sizing:border-box;gap:4px}.sample-browser-search:focus-within{border:1px solid #81a1c1}.sample-browser-search__input{all:unset;text-align:start;width:100%}.sample-browser-search__clear{all:unset;background-color:#bf616a;border-radius:3px;padding:0 4px;position:relative;width:20px;height:20px;box-sizing:border-box;line-height:20px}.sample-browser-search__clear span{position:absolute;top:0;left:0;width:100%;height:100%}.sample-browser-search__clear span:active{top:1px;left:1px}.sample-browser-search__clear:disabled{background-color:#4c566a;border:1px solid #4c566a}.draggable{width:100%;height:100%}.samples-list-item{padding:6px 0;height:100%;display:flex;flex-direction:column;box-sizing:border-box}.samples-list-item__container{all:unset;border-bottom:1px solid #4c566a;display:flex}.samples-list-item__container--selected{height:80px}.samples-list-item:last-of-type{border-bottom:none}.samples-list-item__name{align-self:flex-start}.samples-list-item__details{width:100%;height:100%;display:flex;flex-direction:column}.samples-list{all:unset;display:flex;flex-direction:column;height:100%}.sample-preview{width:100%}.sample-browser-panel{display:flex;flex-direction:column;width:100%;height:100%}.content{padding:6px;height:100%;width:100%;max-height:100%;min-width:60px;min-height:60px;box-sizing:border-box;position:relative;overflow:hidden}:root{--color-base-1: #2e3440;--color-base-2: #3b4252;--color-base-3: #434c5e;--color-base-4: #4c566a;--color-light-1: #d8dee9;--color-light-2: #e5e9f0;--color-light-3: #eceff4;--color-primary-1: #8fbcbb;--color-primary-2: #88c0d0;--color-primary-3: #81a1c1;--color-primary-4: #5e81ac;--color-accent-red: #bf616a;--color-accent-orange: #d08770;--color-accent-yellow: #ebcb8b;--color-accent-green: #a3be8c;--color-accent-purple: #b48ead}.layout{width:100%;height:100%;display:flex;flex-direction:column;background-color:#2e3440;color:#d8dee9}.layout__row{display:flex;flex-direction:row;height:100%}#root{margin:0;text-align:center;height:100%;width:100%;max-height:100%}.app{width:100%;height:100%}