.number-input[data-v-100b7d25]{text-align:center;white-space:nowrap}.number-input-label[data-v-100b7d25]{display:none}.number-input-label.top[data-v-100b7d25]{display:block;margin-bottom:.5em}.number-input-label.left[data-v-100b7d25]{display:inline-block;margin-right:.5em}input[type=number].number-input-input[data-v-100b7d25]{position:relative;-webkit-appearance:textfield;-moz-appearance:textfield;text-align:center;width:3em;border-style:none;border-width:0;border-radius:0;background-color:var(--color-ui-neutral-light);color:var(--color-p-dark);z-index:1}input[type=number].number-input-input[data-v-100b7d25]::-webkit-inner-spin-button,input[type=number].number-input-input[data-v-100b7d25]::-webkit-outer-spin-button{-webkit-appearance:none}.number-input-button[data-v-100b7d25]{border-width:0;background-color:var(--color-ui-neutral-dark);color:var(--color-ui-neutral-light);cursor:pointer}.number-input-button[data-v-100b7d25]:hover{background-color:var(--color-ui-neutral-dark-hover);color:var(--color-ui-neutral-light-hover)}.number-input-button[data-v-100b7d25]:active{background-color:var(--color-ui-neutral-dark-active);color:var(--color-ui-neutral-light-active)}.number-input-inc[data-v-100b7d25]{width:1.4em;border-radius:0 .5em .5em 0}.number-input-dec[data-v-100b7d25]{width:1.4em;border-radius:.5em 0 0 .5em}.number-input.disabled[data-v-100b7d25]{filter:brightness(.8)}.number-input.disabled input[type=number].number-input-input[data-v-100b7d25]{color:var(--color-p-light);background-color:var(--color-ui-neutral-dark)}.number-input.disabled .number-input-button[data-v-100b7d25]{cursor:default}.number-input.disabled .number-input-button[data-v-100b7d25]:hover{background-color:var(--color-ui-neutral-dark)}.bool-box[data-v-438391b9]{height:1.5em;position:relative;white-space:nowrap;line-height:1.5em;cursor:pointer}.bool-box-label[data-v-438391b9]{position:relative;display:inline-block;margin-right:.5em;margin-left:.5em;top:-.33em;cursor:pointer}input.bool-box-checkbox[type=checkbox][data-v-438391b9]{position:relative;display:inline-block;width:3em;height:1.5em;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}input.bool-box-checkbox[type=checkbox][data-v-438391b9]:before{top:.3em;left:.3em;width:2.3em;height:.9em;border-radius:1em;background-color:var(--color-ui-accent-active);display:inline-block;content:"";z-index:0;position:absolute;transition:background-color .2s}input.bool-box-checkbox[type=checkbox][data-v-438391b9]:checked:before{background-color:var(--color-ui-accent)}input.bool-box-checkbox[type=checkbox][data-v-438391b9]:after{box-sizing:border-box;position:absolute;width:1.35em;height:1.35em;border-radius:100%;background-color:var(--color-ui-neutral-dark);display:block;content:"";top:.075em;left:.025em;z-index:1;transition:left .2s,background-color .2s}input.bool-box-checkbox[type=checkbox][data-v-438391b9]:checked:after{left:1.575em;background-color:var(--color-ui-neutral-light)}.icon-view[data-v-3a1a2887]{--icon-bg: black;width:2em;height:2em;-webkit-mask-size:2em;mask-size:2em;background-color:var(--icon-bg)}.action-button[data-v-722dc0e4]{border-radius:.5em;margin:.5em;cursor:pointer;border:none}.action-button.disabled[data-v-722dc0e4]{cursor:default;opacity:50%}.action-button.action-button-primary[data-v-722dc0e4]{background-color:var(--color-ui-accent);color:var(--color-p-light)}.action-button.action-button-primary[data-v-722dc0e4]:hover{background-color:var(--color-ui-accent-hover);color:var(--color-p-light-hover)}.action-button.action-button-primary[data-v-722dc0e4]:active{background-color:var(--color-ui-accent-active);color:var(--color-p-light-active)}.action-button.action-button-secondary[data-v-722dc0e4]{background-color:var(--color-ui-neutral-dark);color:var(--color-p-light)}.action-button.action-button-secondary[data-v-722dc0e4]:hover:not(.disabled){background-color:var(--color-ui-neutral-dark-hover);color:var(--color-p-light-hover)}.action-button.action-button-secondary[data-v-722dc0e4]:active:not(.disabled){background-color:var(--color-ui-neutral-dark-active);color:var(--color-p-light-active)}.track-settings[data-v-e4211c63]{height:3.5em;display:inline-flex;text-align:center;align-items:center}.track-settings .loop-settings[data-v-e4211c63]{text-align:left}.track-settings[data-v-e4211c63]>*{margin-right:.2em}.track-settings .visibility[data-v-e4211c63]{cursor:pointer}.beat-settings-options[data-v-220dace1]{padding:1em;display:flex;flex-direction:column;justify-content:space-evenly}.beat-settings-option[data-v-220dace1]{vertical-align:center;text-align:center;height:3em}.beat-settings-option-group[data-v-220dace1]{display:none}.beat-settings-option-group.visible[data-v-220dace1]{display:inline-block}.track-unit-box[data-v-f5c7f0da]{width:2em;height:2em;margin-right:4px;background-color:var(--color-box);border-color:var(--color-box);border-width:.1em .1em .1em .1em;border-style:solid;display:inline-block;transition:background-color .1s,border-color .1s;cursor:pointer}.track-unit-box.highlightable[data-v-f5c7f0da]:hover{border-color:var(--color-box-hover);background-color:var(--color-box-hover);transition:none}.track-unit-box.highlightable.on[data-v-f5c7f0da]{border-color:var(--color-ui-accent-hover);background-color:var(--color-ui-accent-hover)}.track-unit-box .icon-view[data-v-f5c7f0da]{display:none}.track-unit-box.on[data-v-f5c7f0da]{border-color:var(--color-ui-accent);background-color:var(--color-ui-accent);transition:none}.track-unit-box.on.Accent[data-v-f5c7f0da],.track-unit-box.on.Accent.highlightable[data-v-f5c7f0da]:hover{border-color:var(--color-ui-neutral-light)}.track-unit-box.on.Ghost[data-v-f5c7f0da]{opacity:60%}.track-unit-box.on.icon-visible .icon-view[data-v-f5c7f0da]{display:block}.vertical-mode .track-unit[data-v-40ddca36]{margin-bottom:4px;display:block}.track-unit-block[data-v-e45c109d]{height:2em}.track-main[data-v-e45c109d]{height:36px}.track[data-v-e45c109d]{width:max-content}.track[data-v-e45c109d]>*{padding-right:1em;padding-left:1em}.vertical-mode .track-main[data-v-e45c109d]{width:2em;margin-right:4px;display:block}.vertical-mode .track[data-v-e45c109d]{display:inline-block;height:36px}.vertical-mode .track[data-v-e45c109d]>*{padding-right:0;padding-left:0}.track-unit.spaced[data-v-574d32aa]{margin-bottom:0;margin-right:1em}.vertical-mode .track-unit.spaced[data-v-574d32aa]{margin-bottom:1em;margin-right:0}.track-unit.spaced[data-v-b469d794]{margin-bottom:0;margin-right:1em}.vertical-mode .track-unit.spaced[data-v-b469d794]{margin-bottom:1em;margin-right:0}.editable-text-field[data-v-ec5e3ddf]{padding:.2em}input[data-v-ec5e3ddf]{width:var(--1dbd826f)}.static{&[data-v-ec5e3ddf]{transition:background-color .2s;cursor:pointer}&[data-v-ec5e3ddf]:hover{background-color:var(--color-ui-neutral-dark-hover)}}.beat[data-v-4b1a1815]{padding:1em;overflow-x:scroll;overflow-y:visible;display:flex;flex-direction:column;width:100%}.beat-wrap-row[data-v-4b1a1815]{display:inline-block;margin-bottom:30px}.beat-title[data-v-4b1a1815]{color:var(--color-title-light);text-align:center;width:fit-content;margin-left:16px}.beat-track-container[data-v-4b1a1815]{position:relative;display:inline-block}.beat-main-container[data-v-4b1a1815]{display:flex}.track-name[data-v-4b1a1815]{height:36px;line-height:36px;margin:0;flex:1;text-align:right;display:block;white-space:nowrap}.track-actions[data-v-4b1a1815]{opacity:0%;display:flex}.track-action[data-v-4b1a1815]{cursor:pointer}.handle[data-v-4b1a1815]{cursor:move;color:var(--color-ui-neutral-dark)}.beat-line[data-v-4b1a1815]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.beat-line:hover .track-actions[data-v-4b1a1815]{opacity:100%}.beat-line:hover .track-actions .track-action[data-v-4b1a1815]{opacity:30%}.beat-line:hover .track-actions .track-action[data-v-4b1a1815]:hover{opacity:100%}.dragging :not(.ghost) .handle[data-v-4b1a1815]{opacity:0%}.track-name[data-v-4b1a1815]{text-align:right}.ghost[data-v-4b1a1815]{opacity:0}.track-settings-row[data-v-4b1a1815]{background-color:var(--color-bg-medium);width:100%;margin-bottom:.5em}.vertical-mode .beat-title[data-v-4b1a1815]{color:var(--color-title-light);text-align:center;padding-left:0}.vertical-mode .beat-main-container[data-v-4b1a1815]{display:block}.vertical-mode .track-name[data-v-4b1a1815]{height:auto;transform:rotate(330deg);transform-origin:bottom;display:inline-block;writing-mode:vertical-rl;text-align:right}.vertical-mode .beat[data-v-4b1a1815]{padding-bottom:2em;align-items:center;overflow-x:visible;overflow-y:scroll;height:inherit}.vertical-mode .beat-line[data-v-4b1a1815]{flex-direction:column;display:inline-block;max-width:36px}.vertical-mode .beat-track-container[data-v-4b1a1815]{display:flex;flex-direction:row}.fade-enter-active[data-v-4b1a1815],.fade-leave-active[data-v-4b1a1815]{transition:opacity .2s ease}.fade-enter-from[data-v-4b1a1815],.fade-leave-to[data-v-4b1a1815]{opacity:0}.dropdown[data-v-b874a2e6]{position:absolute;top:var(--5bff3bb9);left:var(--23e47223);visibility:hidden}.dropdown.visible[data-v-b874a2e6],.dropdown[data-v-b874a2e6]:hover{visibility:visible}.details[data-v-b098beb9]{margin:auto;padding:.5em;background-color:var(--color-ui-neutral-dark-active)}.toolbox .main-row[data-v-b098beb9]{margin:auto;display:flex;justify-content:center;width:100%;flex-direction:column}.toolbox .track-unit[data-v-b098beb9]{margin:0;padding:0}.toolbox .track-unit-type[data-v-b098beb9]{margin:5em}.toolbox .toolbox-button[data-v-b098beb9]{cursor:pointer;color:#000}.toolbox .toolbox-button.eraser[data-v-b098beb9]{background-color:#000}.toolbox .toolbox-button.paint-button-cont[data-v-b098beb9],.toolbox .toolbox-button.paint-button-cont[data-v-b098beb9]:hover{background-color:var(--color-ui-bg-dark)}.toolbox .toolbox-button.paint-button-cont:hover .paint-button[data-v-b098beb9]{background-color:var(--color-ui-neutral-dark-hover)}.toolbox .toolbox-button.paint-button-cont.active[data-v-b098beb9]{background-color:var(--color-ui-bg-dark)}.toolbox .toolbox-button.paint-button-cont.active .paint-button[data-v-b098beb9]{background-color:var(--color-ui-neutral-dark-active)}.toolbox .toolbox-button.paint-button-cont .paint-button.active[data-v-b098beb9]{background-color:var(--color-ui-neutral-dark)}.toolbox .toolbox-button[data-v-b098beb9]:hover{background-color:var(--color-ui-neutral-dark-hover)}.toolbox .toolbox-button.active[data-v-b098beb9]{background-color:var(--color-ui-neutral-dark-active)}.details .toolbox-button[data-v-b098beb9]{display:inline-block;background-color:var(--color-ui-neutral-dark-active)}.details .toolbox-button.active[data-v-b098beb9]{background-color:var(--color-ui-neutral-dark)}.details .toolbox-button[data-v-b098beb9]:hover{background-color:var(--color-ui-neutral-dark-hover)}.root[data-v-13940293]{position:relative;overflow:hidden;color:var(--color-p-light);background-color:var(--color-bg-dark);height:100vh;align-content:center}.root .sidebar[data-v-13940293]{position:absolute;left:-28em;width:30em;height:100vh;display:flex;transition:left .4s;top:0}.root.sidebar-visible .beat-stage[data-v-13940293]{max-width:calc(100vw - 30em)}.root.sidebar-visible .beat-stage-container[data-v-13940293]{left:30em;width:calc(100vw - 30em)}.root.sidebar-visible .sidebar[data-v-13940293]{left:0}.root .settings[data-v-13940293]{z-index:1;width:28em;background-color:var(--color-bg-light);overflow:scroll;display:inline-block}.root .settings .title[data-v-13940293]{color:var(--color-title-light);text-align:center}.root .sidebar-toggle[data-v-13940293]{z-index:1;height:100vh;min-width:2em;background-color:var(--color-bg-light);left:0;display:flex;flex-direction:column}.root .sidebar-toggle .buttons[data-v-13940293]{flex:1}.root .sidebar-toggle .buttons .quick-access-button[data-v-13940293]{flex:1;right:0;width:2em;height:2em;cursor:pointer;margin-bottom:.5em}.root .sidebar-toggle .buttons .quick-access-button.unclickable[data-v-13940293]{opacity:50%;cursor:auto}.root .sidebar-toggle .toolbox[data-v-13940293]{width:2em}.root .beat-stage-container[data-v-13940293]{position:absolute;height:100%;left:0;top:0;width:100vw;display:flex;flex-direction:column;transition:left .4s,width .4s}.root .beat-stage[data-v-13940293]{position:relative;max-height:100vh;margin:auto;max-width:100vw;transition:max-width .4s;padding-left:3em}.root.vertical-mode .beat-stage[data-v-13940293]{margin:auto;height:100vh}.root.vertical-mode .beat-stage-container[data-v-13940293]{display:block}.root .sidebar-left-strip[data-v-13940293]{writing-mode:vertical-rl;background-color:var(--color-bg-medium)}.root .sidebar-left-strip[data-v-13940293]>*{display:inline-block}.root .sidebar-left-tab[data-v-13940293],.root .tab-add[data-v-13940293]{display:inline-block;width:100%;padding:8px 3px 24px;position:relative}.root .sidebar-left-tab .unsaved[data-v-13940293],.root .tab-add .unsaved[data-v-13940293]{margin-bottom:5px;opacity:50%}.root .sidebar-left-tab .delete[data-v-13940293],.root .tab-add .delete[data-v-13940293]{position:absolute;bottom:5px;left:6px;width:15px;height:15px;display:inline-block;color:var(--color-ui-neutral-dark);border-radius:2px;cursor:pointer}.root .sidebar-left-tab .delete[data-v-13940293]:hover,.root .tab-add .delete[data-v-13940293]:hover{filter:brightness(1.5)}.root .sidebar-left-tab .delete .x[data-v-13940293],.root .tab-add .delete .x[data-v-13940293]{position:absolute;right:-3px;bottom:-3px}.root .sidebar-left-tab.active[data-v-13940293],.root .tab-add.active[data-v-13940293]{background-color:var(--color-bg-light);display:inline-block}.root .sidebar-left-tab[data-v-13940293]:hover:not(.active),.root .tab-add[data-v-13940293]:hover:not(.active){cursor:pointer;background-color:var(--color-ui-neutral-dark);transition:background-color .2s}.root .sidebar-left-tab:hover .delete[data-v-13940293],.root .tab-add:hover .delete[data-v-13940293]{filter:brightness(1.2)}.root .tab-name[data-v-13940293]{display:inline-block}@media screen and (max-width: 900px){.root.sidebar-visible .sidebar[data-v-13940293]{left:0;width:100vw}.root .sidebar[data-v-13940293]{left:calc(-100vw + 2em);width:100vw}.root .settings[data-v-13940293]{width:calc(100vw - 2em)}.root .sidebar-visible .beat-stage-container[data-v-13940293]{left:100vw}.root .beat-stage-container[data-v-13940293]{left:0}.root .sidebar-visible .beat-stage[data-v-13940293]{max-width:100vw}}.root[data-v-13940293] *{user-drag:none;user-select:none}.upload-dialog[data-v-13940293]{z-index:20}html,body{position:relative;width:100%;height:100%;--color-ui-accent: #00b3ba;--color-ui-accent-hover: #00c1c9;--color-ui-accent-active: #008e93;--color-ui-neutral-light: #fdfdfe;--color-ui-neutral-light-hover: #fdfdfe;--color-ui-neutral-light-active: #fdfdfe;--color-ui-neutral-dark: #adadad;--color-ui-neutral-dark-hover: #a1a1a1;--color-ui-neutral-dark-active: #c1c1c1;--color-bg-light: #e0e0e0;--color-bg-medium: #eee;--color-bg-dark: #fff;--color-p-light: #282828;--color-p-light-hover: #fafafa;--color-p-light-active: #fafafa;--color-p-dark: #282828;--color-p-dark-hover: #464646;--color-p-dark-active: #464646;--color-title-light: #282828;--color-title-dark: #282828;--color-box: #e0e0e0;--color-box-hover: #f1f1f1}*{transition:color,background-color ease-out .3s}body.dark{--color-ui-neutral-light: #fdfdfe;--color-ui-neutral-light-hover: #fdfdfe;--color-ui-neutral-light-active: #fdfdfe;--color-ui-neutral-dark: #8b8b8b;--color-ui-neutral-dark-hover: #a1a1a1;--color-ui-neutral-dark-active: #c1c1c1;--color-bg-light: #464646;--color-bg-medium: #323232;--color-bg-dark: #282828;--color-p-light: #fafafa;--color-p-light-hover: #fafafa;--color-p-light-active: #fafafa;--color-p-dark: #282828;--color-p-dark-hover: #464646;--color-p-dark-active: #464646;--color-title-light: #fafafa;--color-title-dark: #282828;--color-box: #464646;--color-box-hover: #5f5f5f}html,body{position:relative;width:100%;height:100%}#dropdowns{inset:0;z-index:100;position:absolute;pointer-events:none}#dropdowns *{pointer-events:all}*{box-sizing:border-box}body{color:#333;margin:0;font-family:DMSans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}a{color:#0064c8;text-decoration:none}a:hover{text-decoration:underline}a:visited{color:#0050a0}label{display:block}input,button,select,textarea{font-family:inherit;font-size:inherit;padding:.4em;margin:0 0 .5em;box-sizing:border-box}input:disabled{color:#ccc}button{color:#333;background-color:#f4f4f4;outline:none}button:disabled{color:#999}button:not(:disabled):active{background-color:#ddd}button:focus{border-color:#666}::-webkit-scrollbar{background-color:transparent}body{scrollbar-width:thin;scrollbar-color:var(--color-ui-neutral-dark) transparent}::-webkit-scrollbar-thumb{background-color:#0000}@font-face{font-family:DMSans;font-style:normal;font-weight:400;src:url(/assets/DMSans-Regular-BE1m49YZ.ttf) format("woff2")}@font-face{font-family:DMSans;font-style:normal;font-weight:600;src:url(/assets/DMSans-Bold-DRawUrux.ttf) format("woff2")}@font-face{font-family:DMSans;font-style:italic;font-weight:400;src:url(/assets/DMSans-Italic-SLt2Iri3.ttf) format("woff2")}@font-face{font-family:DMSans;font-style:italic;font-weight:600;src:url(/assets/DMSans-BoldItalic-D4Q-4K5q.ttf) format("woff2")}