@import "https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{scrollbar-color:#888 #000;--page-margin:#0a0a0b;--editor-background:#0b0a0c;--primary-text:#fff;--secondary-text:#bbb;--playhead:#fff;--button-size:2rem;--button-rounding:5px;--hover-preview:#fff;--inverted-text:var(--editor-background);--active-select-color:#5897fb;--loop-accent:#74f;--warn-text:#ff8;--error-text:#f88;--play-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path d=\"M-5-8V8L8 0z\" fill=\"gray\"/></svg>");--pause-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><rect x=\"-5\" y=\"-7\" width=\"4\" height=\"14\" fill=\"gray\"/><rect x=\"3\" y=\"-7\" width=\"4\" height=\"14\" fill=\"gray\"/></svg>");--record-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><circle cx=\"0\" cy=\"0\" r=\"6\" fill=\"gray\"/></svg>");--stop-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><rect x=\"-6\" y=\"-6\" width=\"12\" height=\"12\" fill=\"gray\"/></svg>");--prev-bar-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><rect x=\"-6\" y=\"-6\" width=\"2\" height=\"12\" fill=\"gray\"/><path d=\"M6-6V6L-3 0z\" fill=\"gray\"/></svg>");--next-bar-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><rect x=\"4\" y=\"-6\" width=\"2\" height=\"12\" fill=\"gray\"/><path d=\"M-6-6V6L3 0z\" fill=\"gray\"/></svg>");--volume-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\"><path d=\"M4 16V10H8l5-5V21L8 16zm11-5 1-1a7.2 7.2.0 010 6l-1-1a5.8 5.8.0 000-3zm3-3 1-1a11.5 11.5.0 010 12l-1-1A10.1 10.1.0 0018 8z\" fill=\"gray\"/></svg>");--unmuted-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"3 3 20 20\"><path d=\"M4 16V10H8l5-5V21L8 16zm11-5 1-1a7.2 7.2.0 010 6l-1-1a5.8 5.8.0 000-3zm3-3 1-1a11.5 11.5.0 010 12l-1-1A10.1 10.1.0 0018 8z\" fill=\"gray\"/></svg>");--muted-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"3 3 20 20\"><path d=\"M4 16V10H8l5-5V21L8 16z\" fill=\"gray\"/></svg>");--menu-down-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path d=\"M-4-2H4L0 3z\" fill=\"gray\"/></svg>");--select-arrows-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path d=\"M-4-3H4L0-8zm0 6H4L0 8z\" fill=\"gray\"/></svg>");--file-page-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-5 -21 26 26\"><path d=\"M2 0V-16h8l4 4V0zM3-1H13V-11H9v-4H3z\" fill=\"gray\"/></svg>");--edit-pencil-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-5 -21 26 26\"><path d=\"M0 0 1-4 4-1zM2-5l8-8 3 3L5-2zm9-9 2-2h1l2 2v1l-2 2z\" fill=\"gray\"/></svg>");--preferences-gear-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path d=\"M5.78-1.6l2.15.66V.94L5.78 1.6 4.85 3.53l.83 2.08L4.21 6.78 2.36 5.52.27 5.99-.85 7.94-2.68 7.52-2.84 5.28-4.52 3.95l-2.21.33L-7.55 2.59-5.9 1.07V-1.07L-7.55-2.59-6.73-4.28l2.21.33 1.68-1.33.16-2.24L-.85-7.94.27-5.99 2.36-5.52 4.21-6.78 5.68-5.61 4.85-3.53M2.92.67V-.67l-.57-1.2L1.3-2.7.0-3l-1.3.3-1.05.83-.57 1.2V.67l.57 1.2 1.05.83L0 3l1.3-.3 1.05-.83z\" fill=\"gray\"/></svg>");--customize-dial-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><g transform=\"translate%280,1%29\" fill=\"gray\"><circle cx=\"0\" cy=\"0\" r=\"6.5\" stroke=\"gray\" stroke-width=\"1\" fill=\"none\"/><rect x=\"-1\" y=\"-5\" width=\"2\" height=\"4\" transform=\"rotate%2830%29\"/><circle cx=\"-7.79\" cy=\"4.5\" r=\".75\"/><circle cx=\"-9\" cy=\"0\" r=\".75\"/><circle cx=\"-7.79\" cy=\"-4.5\" r=\".75\"/><circle cx=\"-4.5\" cy=\"-7.79\" r=\".75\"/><circle cx=\"0\" cy=\"-9\" r=\".75\"/><circle cx=\"4.5\" cy=\"-7.79\" r=\".75\"/><circle cx=\"7.79\" cy=\"-4.5\" r=\".75\"/><circle cx=\"9\" cy=\"0\" r=\".75\"/><circle cx=\"7.79\" cy=\"4.5\" r=\".75\"/></g></svg>");--copy-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-5 -21 26 26\"><path d=\"M0-15H1V0H13V1H0V-15zM2-1V-17h8l4 4V-1zM3-2H13V-12H9v-4H3z\" fill=\"currentColor\"/></svg>");--paste-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\"><path d=\"M8 18H6V5H17V7M9 8h7l4 4V22H9z\" stroke=\"currentColor\" fill=\"none\"/><path d=\"M9 3h5V6H9V3zm7 5 4 4H16V8z\" fill=\"currentColor\"/></svg>");--export-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path fill=\"gray\" d=\"M-8 3V8H8V3H6V6H-6V3zM0 2-4-2h3V-8H1v6H4z\"/></svg>");--close-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path fill=\"gray\" d=\"M-7.07-5.66-5.66-7.07.0-1.4 5.66-7.07 7.07-5.66 1.4.0 7.07 5.66 5.66 7.07.0 1.4-5.66 7.07-7.07 5.66-1.4.0z\"/></svg>");--add-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path fill=\"gray\" d=\"M-8-1h7V-8H1v7H8V1H1V8H-1V1H-8z\"/></svg>");--zoom-in-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"-10 -10 20 20\"><circle cx=\"-1\" cy=\"-1\" r=\"6\" stroke-width=\"2\" stroke=\"gray\" fill=\"none\"/><path stroke=\"gray\" stroke-width=\"2\" d=\"M3 3 7 7M-1-4V2M-4-1H2\" fill=\"none\"/></svg>");--zoom-out-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"-10 -10 20 20\"><circle cx=\"-1\" cy=\"-1\" r=\"6\" stroke-width=\"2\" stroke=\"gray\" fill=\"none\"/><path stroke=\"gray\" stroke-width=\"2\" d=\"M3 3 7 7M-4-1H2\" fill=\"none\"/></svg>");--checkmark-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"-13 -13 26 26\"><path fill=\"gray\" d=\"M-9-2-8-3-3 2 9-8l1 1L-3 8z\"/></svg>");--piano-key-symbol:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"15\" preserveAspectRatio=\"none\" viewBox=\"0 -1 32 15\"><defs><linearGradient id=\"shadow\" x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\"><stop offset=\"0\" stop-color=\"rgba(0,0,0,0.5)\"/><stop offset=\"100%\" stop-color=\"transparent\"/></linearGradient></defs><rect x=\"-1\" y=\"1\" width=\"31\" height=\"1\" rx=\".6\" fill=\"rgba(255,255,255,0.4)\"/><path d=\"M-1 11H30V2l3-3V14H-1z\" fill=\"rgba(0,0,0,0.7)\"/><rect x=\"-1\" y=\"-1\" width=\"19\" height=\"15\" fill=\"url(%23shadow)\"/></svg>");--weak-background:color-mix(in srgb,var(--ui-widget-background),var(--editor-background)80%);--hover-filter:brightness(1.3);--volume-bar-gradient:linear-gradient(to right,green,lime 60%,orange 90%,red);--default-font:B612,Roboto,sans-serif;font-family:var(--default-font);-webkit-user-select:none;user-select:none}.error{color:var(--error-text)!important}.warning{color:var(--warn-text)!important}.success{color:var(--success-text)!important}g{fill:#0000}table{border-collapse:collapse}a{color:var(--link-accent)}hr{border-color:var(--secondary-text);margin-inline:1rem}.beepBoxEditor{display:contents}.muted{color:var(--secondary-text)}select,button{height:var(--button-size);border-radius:var(--button-rounding);background:var(--ui-widget-background);color:inherit;font-size:inherit;cursor:pointer;font-family:inherit;font-weight:inherit;appearance:none;border:none;margin:0;padding:0 4px}input[type=file]::file-selector-button{height:var(--button-size);border-radius:var(--button-rounding);background:var(--ui-widget-background);color:inherit;font-size:inherit;cursor:pointer;font-family:inherit;font-weight:inherit;appearance:none;border:none;margin:0;padding:0 4px;&:focus{background:var(--ui-widget-focus);outline:none}}select,button{&:focus{background:var(--ui-widget-focus);outline:none}}input[type=text],input:not([type]){background:var(--ui-widget-background);color:var(--primary-text);font-size:inherit;font-family:inherit;font-weight:inherit;border:none;border-radius:0;margin:0;padding:0 4px;&:focus{border-radius:2px;outline:1px solid #fff}}input[type=file]::file-selector-button{margin-right:1ch}input[type=file]{cursor:pointer;width:100%}:has(>select){display:inline-block;position:relative;&:after{content:"";pointer-events:none;width:14px;height:var(--button-size);mask-image:var(--select-arrows-symbol);background:currentColor;flex-shrink:0;position:absolute;top:50%;right:0;transform:translateY(-50%);mask-position:50%;mask-repeat:no-repeat}}select{padding-right:2ch}input[type=range]{appearance:none;color:inherit;width:100%;height:var(--button-size);font-size:inherit;cursor:pointer;touch-action:pan-y;background:0 0;margin:0;& :focus{outline:none;&::-webkit-slider-runnable-track{background:var(--ui-widget-focus)}&::-moz-range-track{background:var(--ui-widget-focus)}}&::-webkit-slider-runnable-track{cursor:pointer;background:var(--ui-widget-background);width:100%;height:6px}&::-moz-range-track{cursor:pointer;background:var(--ui-widget-background);width:100%;height:6px}&::-moz-range-thumb{height:var(--button-size);cursor:pointer;appearance:none;background:currentColor;border:none;border-radius:3px;width:6px;margin-top:-10px}&::-webkit-slider-thumb{height:var(--button-size);cursor:pointer;appearance:none;background:currentColor;border:none;border-radius:3px;width:6px;margin-top:-10px}}input::-webkit-outer-spin-button{display:none}input::-webkit-inner-spin-button{display:none}input[type=number]{appearance:textfield}input[type=text],input:not([type]),input[type=number]{border:1px solid var(--ui-widget-focus);background:var(--editor-background);color:inherit}select,button,input{vertical-align:middle;&[disabled]{opacity:.7;pointer-events:none}}.slider-marker{background:var(--primary-note);opacity:.5;width:2px;height:6px;position:absolute;top:50%;translate:-50% -50%}.icon{width:3ch;height:3ch;vertical-align:cent;background:currentColor;margin:-3ch .25ch -.45lh -.1ch;display:inline-block}.menu-button,.square-button,.minimal-button{cursor:pointer;position:relative;&:after{mask-image:var(--mask-image)}&.add:after{--mask-image:var(--add-symbol)}&.x:after{--mask-image:var(--close-symbol)}&.dropdown:after{--mask-image:var(--menu-down-symbol)}&.horiz-resize{cursor:grab;&:after{mask-image:var(--select-arrows-symbol);rotate:90deg}}&.open:after{rotate:.5turn}&:after{content:"";height:var(--button-size);aspect-ratio:1;vertical-align:middle;pointer-events:none;background:currentColor;position:absolute;top:0;right:0;mask-position:50%;mask-repeat:no-repeat}}.minimal-button{border-radius:0}.minimal-button:after{width:100%;height:100%}.menu-button{text-align:left;width:100%}.square-button{aspect-ratio:1;&:after{width:100%}}.menu-button,.square-button{display:inline-block;position:relative}.global-cursor-overlay{z-index:1;pointer-events:none;position:fixed;inset:0}textarea{font-size:inherit;color:inherit;resize:none;white-space:pre;box-sizing:content-box;background:var(--editor-background);margin-block:2rem;border:1px solid #888;width:100%;margin-left:-.5rem;padding:.5rem;font-family:monospace;display:block}div:has(>.popup){background:color-mix(in srgb,var(--editor-background),transparent);backdrop-filter:blur(1px);z-index:100;place-items:center;padding:3rem;display:grid;position:fixed;inset:0}.popup{background:var(--editor-background);border:1px solid var(--ui-widget-background);border-radius:1rem;padding:1.7rem;position:relative;&>h1:first-of-type{margin-block:0 1rem}}.popup-icon{float:right;image-rendering:pixelated;margin:.5rem}.error-remark{color:#aaa;font-style:italic}.error-popup{width:100%}@media (width>80rem){div:has(>.error-popup){padding-inline:8rem}}.error-popup button{color:var(--error-text);margin-right:.5rem;display:inline}.close-popup-container{float:right;color:var(--secondary-text);&>input{aspect-ratio:1;vertical-align:middle;width:1.2rem;margin:.5rem}&>button{margin-left:1rem}}.info-popup{max-width:32rem}.layout-popup{width:24rem}.layout-container{text-align:center;color:var(--secondary-text);flex-wrap:wrap;justify-content:center;column-gap:1rem;display:flex;& .layout-option{cursor:pointer;width:6rem;padding:.7rem 0 .6rem;position:relative;&:has(input:checked){color:var(--primary-text)}&:hover{outline:2px solid var(--primary-text)}}& input{visibility:hidden;&:checked{visibility:visible}appearance:none;aspect-ratio:1;background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\"><path d=\"M1 4L3 6L7 2\" stroke=\"black\" fill=\"none\" stroke-width=\"1.6\"/></svg>") 55% 40%/70% 70% no-repeat,#2e0;border-radius:50%;width:1.2rem;margin:.6rem .3rem;position:absolute;top:0;right:0}& svg{height:4rem;margin-inline:-100%}}.failed-close .close-popup-button{animation:1s ease-out failed-close}@keyframes failed-close{0%{background:#800;outline:4px solid red}to{outline-offset:1rem;outline:0 solid #0000}}.popup>.close-popup-button{margin:1.5rem;position:absolute;bottom:0;right:0}.popup>.popup-button-container{gap:2ch;margin:1.5rem;display:flex;position:absolute;bottom:0;right:0}.export-popup{width:32rem;& select{margin-left:1ch}}.export-popup-extra{min-height:6rem}.sidebar-scroll{overflow:auto}.sidebar{flex-direction:column;gap:.3rem;padding:.2rem;font-size:1rem;display:flex;overflow-y:scroll;& .select-container{color:var(--primary-note)}}.sidebar-title{font:inherit;text-align:center;font-weight:700;line-height:var(--button-size);color:var(--secondary-text);overflow-wrap:break-word;margin:1rem;line-height:1;position:relative;&>.square-button{position:absolute;top:-.3lh;right:-.5rem}}.song-title{color:var(--primary-text)}.sidebar-table{color:var(--secondary-text);grid-column:span 2;grid-template-columns:5rem auto;align-items:center;row-gap:.3rem;display:grid;position:relative;& input,& button,& select,& :after{color:var(--primary-note,var(--primary-text))}& input,& button,& select{vertical-align:middle;width:100%}& button{display:inline}&>*{position:relative}}.instrument-bar{border-radius:var(--button-rounding);flex-wrap:wrap;justify-content:stretch;gap:3px;display:flex;overflow:clip;&>.selected-instrument{background:var(--primary-channel);color:var(--inverted-text)}& button{border-radius:0;flex-grow:1;width:auto}&>.instrument-bar-controls{gap:inherit;flex-shrink:0;min-width:fit-content;display:flex;&>*{width:var(--button-size)}}&.multiline>.instrument-bar-controls{width:100%}}.sidebar-ddl{flex-direction:column;gap:.8rem;display:flex}.entry-container{background:var(--weak-background);padding:.2rem;position:relative;& .mute-button{aspect-ratio:1;height:1.5rem;margin:.6rem;display:inline-block;position:absolute;top:-.15rem;left:.1rem}}.entry-handle{vertical-align:middle;border:2px solid var(--ui-widget-background);border-left:none;border-right:none;width:65%;height:6px;display:inline-block;&>span{background:inherit;background:var(--weak-background);padding-inline:.7rem;display:inline-block;translate:0 -.5lh}}.entry-title{font:inherit;text-align:center;color:var(--secondary-text);margin:.3rem .3rem .7rem;position:relative;&:after{width:unset}}.song-sidebar{& button{color:var(--primary-text);margin-right:.3rem}}.instrument-sidebar,.song-sidebar{scrollbar-width:none}.scroll-view-container{grid-area:1/1;grid-template-columns:auto;display:grid;position:relative;overflow:clip}.scroll-view{width:100%;height:100%;overflow:auto}.scroll-container{width:fit-content;height:fit-content;position:relative}.playhead{background:var(--playhead);pointer-events:none;width:.2rem;height:100%;position:absolute;top:0}.channel-container{grid-template-columns:auto 100vw;align-items:start;padding:.2rem;display:flex;overflow:hidden}.channel-table-scroll{flex-grow:1;align-items:start;height:100%;display:flex;overflow:auto;& .scroll-container{flex-wrap:nowrap;display:flex}}.channel-table{cursor:pointer;background:var(--editor-background);-webkit-user-select:none;user-select:none;font-size:1.5rem;overflow-x:auto}.channel-header-table{z-index:1;background:var(--editor-background);min-width:16rem;position:sticky;left:0}.mute-button{appearance:none;aspect-ratio:1;background:var(--mute-button-normal);width:2ch;mask-image:var(--unmuted-symbol);cursor:pointer;padding:0;display:block;mask-position:50%;mask-repeat:no-repeat;&:checked{mask-image:var(--muted-symbol);background:#fff3}}.channel-header>:first-child{width:2.4rem;padding-inline:.6rem .4rem}.channel-header,.channel-add-button{background:var(--track-editor-bg-pitch-dim);height:32px;color:var(--primary-channel);&.active{background:var(--track-editor-bg-pitch)}border:1px solid var(--editor-background);border-left:none;border-right:none;flex-wrap:nowrap;align-items:center;gap:.2rem;width:fit-content;min-width:16rem;display:flex}.channel-add-button,.sequence-resize-handle{background:var(--weak-background);color:var(--secondary-text);display:block;&:after{width:100%}}.channel-handle{display:contents}.channel-handle-lines{background:linear-gradient(to right,var(--secondary-channel)50%,#0000 50%);background-size:4px 100%;background-clip:content-box;border-radius:0;min-width:10px;height:1.2lh;margin-right:.5rem;padding:0;&:hover{outline:1px solid var(--hover-preview)}}.master .channel-handle-lines{background:0 0;position:relative;&:after{content:"";background:var(--secondary-channel);mask-image:var(--menu-down-symbol);pointer-events:none;position:absolute;inset:0;scale:1.2;mask-position:50%;mask-repeat:no-repeat}}.channel-title-container{white-space:nowrap;width:12rem;margin-bottom:.15rem;font-size:.9rem;font-weight:700;&>.editable-text{text-overflow:ellipsis;overflow:hidden}}.channel-idx{text-align:right;color:var(--secondary-channel);padding-inline:.5rem .2rem;font-size:.8rem;font-weight:700}.channel-box{&>rect{fill:var(--track-editor-bg-pitch)}&>text{fill:var(--primary-channel);text-anchor:middle;dominant-baseline:middle;font-weight:700}&:not(.active):hover>rect{stroke-width:2px;stroke:#fff;paint-order:stroke}&.muted{&>rect{fill:var(--editor-background)}&>text{fill:var(--secondary-channel)}}&.active{&>rect{fill:var(--primary-channel)}&>text{fill:var(--editor-background)}}}.channel-box-input{width:100%;height:100%;font:inherit}.sequence-resize-handle{outline:none;flex-shrink:0;margin-right:20vmax}.editable-text{cursor:text;position:relative}.editable-text-input{border:1px solid;position:absolute;inset:-.2lh 0}.sequence-bars{cursor:pointer;position:relative;&>*{vertical-align:middle;text-align:center;position:absolute}&>.sequence-tick{width:2rem;margin-left:-1rem;line-height:1.2rem;&.muted{font-size:.8em}}&>.sequence-bar{&>rect{fill:var(--track-editor-bg-pitch-dim)}&>text{text-anchor:middle;dominant-baseline:text-before-edge;fill:var(--secondary-text);font-size:.7rem;font-weight:700;&.major{fill:var(--primary-text)}}&:hover>rect{outline:1px solid #fff}}}.sequence-container{width:min-content;position:relative}.loop-editor{cursor:pointer;background:var(--editor-background);margin-top:.2rem;position:sticky;bottom:0;&>*{pointer-events:none}&>.loop{stroke-width:4px;stroke:var(--loop-accent);fill:none}&>.loop-hover-preview{fill:var(--hover-preview)}}.note-bg{fill:var(--secondary-note)}.note-fg{fill:var(--primary-note)}.note-outline{stroke:#fff;stroke-width:2px;fill:#0000;pointer-events:none}#pattern-empty{fill:var(--editor-background);opacity:.5;mix-blend-mode:overlay}#active-pattern-edge{pointer-events:none;& rect{fill:var(--primary-channel)}}#active-pattern-bg{fill:var(--box-selection-fill);pointer-events:none;opacity:.2;&.muted{display:none}}.selection-boundary{pointer-events:none;fill:var(--box-selection-fill);fill-opacity:.4;stroke:var(--hover-preview);stroke-width:2px;stroke-dasharray:5 3;animation:5s linear infinite dash-animation}@keyframes dash-animation{to{stroke-dashoffset:-100px}}.pattern-area{grid-template-rows:1rem auto}.pattern-area-buttons{z-index:1;padding:1rem;position:absolute;top:0;right:1rem;& button{aspect-ratio:1;height:2.5rem;margin-bottom:1rem;display:block}& svg{vertical-align:middle;width:18px;color:var(--primary-channel)}}.volume-bar{width:100%;&>div{background:var(--editor-background);height:4px;margin-top:2px}}.volume-gradient{background-image:var(--volume-bar-gradient);width:100%;height:100%}.radioset{border-radius:var(--button-rounding);justify-content:stretch;gap:.5ch;width:100%;display:flex;overflow:clip;&>*{text-align:center;flex-grow:1}& input{display:none}& label{color:inherit;font-size:inherit;cursor:pointer;font-family:inherit;font-weight:inherit;border:none;margin:0;padding:0 4px}& input:checked+label{color:var(--primary-note,var(--primary-text));background:var(--ui-widget-background)}}:root.cybox{--root-background:#000;--page-margin:#0a0a0b;--editor-background:#0b0a0c;--playhead:#fffd;--primary-text:#fff;--text-selection:#fff;--box-selection-fill:#ffffff28;--loop-accent:#a289e0;--link-accent:#ffdfff;--ui-widget-background:#1e1c27;--ui-widget-focus:#2a2636;--pitch-background:#111115;--tonic:#2a2636;--fifth-note:#1c1a23;--track-editor-bg-pitch:#373148;--track-editor-bg-pitch-dim:#1e1c27;--mute-button-normal:#a289e0;--mod1-secondary-channel:#aaa;--mod1-primary-channel:#ddd;--mod1-secondary-note:#aaa;--mod1-primary-note:#ddd;--pitch-channel-limit:10;--pitch1-primary-channel:#ff715f;--pitch1-secondary-channel:#823435;--pitch1-primary-note:#ff8975;--pitch1-secondary-note:#da4a4c;--pitch2-primary-channel:#ff8436;--pitch2-secondary-channel:#7a3b1f;--pitch2-primary-note:#ff9e46;--pitch2-secondary-note:#cb5625;--pitch3-primary-channel:#b9a030;--pitch3-secondary-channel:#5e4618;--pitch3-primary-note:#d9be3f;--pitch3-secondary-note:#986b19;--pitch4-primary-channel:#69bb4e;--pitch4-secondary-channel:#3b5321;--pitch4-primary-note:#80dc62;--pitch4-secondary-note:#578228;--pitch5-primary-channel:#31c890;--pitch5-secondary-channel:#1f5b3a;--pitch5-primary-note:#41ebac;--pitch5-secondary-note:#239054;--pitch6-primary-channel:#24c1e6;--pitch6-secondary-channel:#135a5e;--pitch6-primary-note:#33e3ff;--pitch6-secondary-note:#0f8f97;--pitch7-primary-channel:#45aaff;--pitch7-secondary-channel:#1c527f;--pitch7-primary-note:#57caff;--pitch7-secondary-note:#1f7fd5;--pitch8-primary-channel:#868fff;--pitch8-secondary-channel:#36468b;--pitch8-primary-note:#a1abff;--pitch8-secondary-note:#4d6aec;--pitch9-primary-channel:#d379fc;--pitch9-secondary-channel:#573b7a;--pitch9-primary-note:#f792ff;--pitch9-secondary-note:#8a57cc;--pitch10-primary-channel:#ff6ea8;--pitch10-secondary-channel:#743558;--pitch10-primary-note:#ff86c7;--pitch10-secondary-note:#c04b8b}.select-container{font-weight:400;position:relative}.select{z-index:1;text-align:left;vertical-align:middle;background-color:var(--ui-widget-background);border:1px solid var(--secondary-text);min-width:120px;cursor:unset;border-top:none;margin:0;padding-bottom:.25rem;font-size:small;position:fixed;overflow:auto;&>*{line-height:normal}& .select-input-container{padding:.25rem;position:sticky;top:0;&>input{height:1.5rem}}& ul{margin:0;padding:0;list-style:none}& li{-webkit-user-select:none;user-select:none;cursor:pointer}& li,& .no-entries{padding:2px}& li.active{background-color:var(--active-select-color);color:var(--primary-text)}}.ddl-ghost{background:#222}.ddl-dragging{z-index:100;position:fixed;&:before,&:after{content:"";opacity:0;pointer-events:none;z-index:1;transition:opacity 50ms ease-out;position:absolute;inset:0}&:before{background:var(--editor-background);outline:2px solid var(--error-text)}&:after{background:var(--error-text);mask-image:var(--close-symbol);mask-position:50%;mask-repeat:no-repeat}}.ddl-delete:before{opacity:.7}.ddl-delete:after{opacity:1}.layout-long #beepboxEditorContainer{grid-template-rows:70vh 30vh;grid-template-columns:auto 17rem 17rem;display:grid;& .channel-container{grid-area:2/1/auto/span 3}& .sidebar-scroll{display:contents;&>*{grid-row:1}}& .instrument-sidebar{grid-column:2}& .song-sidebar{grid-column:3}}.layout-small #beepboxEditorContainer{box-sizing:content-box;grid-template-rows:481px auto;grid-template-columns:auto 17rem;width:56rem;min-height:645px;margin:auto;padding:30px;display:grid;overflow:auto;& .channel-container{grid-area:2/1}& .sidebar-scroll{grid-area:1/2/span 2}}.layout-tall #beepboxEditorContainer{grid-template-columns:1fr 2fr 17rem;display:grid;& .beepBoxEditor>*{grid-row:1;height:100vh}& .channel-container{grid-column:1}& .pattern-area{grid-column:2}& .sidebar-scroll{grid-column:3}}.layout-wide #beepboxEditorContainer{grid-template-columns:2fr 3fr 17rem 17rem;display:grid;& .beepBoxEditor>*,& .sidebar-scroll>*{grid-row:1;height:100vh}& .channel-container{grid-column:1}& .pattern-area{grid-column:2}& .sidebar-scroll{display:contents}& .instrument-sidebar{grid-column:3}& .song-sidebar{grid-column:4}}.layout-longab #beepboxEditorContainer{grid-template-rows:70vh 30vh;grid-template-columns:auto 17rem 17rem;display:grid;& .pattern-area{grid-area:1/1}& .channel-container{grid-area:2/1}& .sidebar-scroll{display:contents;&>*{grid-row:1/span 2}}& .instrument-sidebar{grid-column:2}& .song-sidebar{grid-column:3}}.layout-flipped #beepboxEditorContainer{grid-template-rows:70vh 30vh;grid-template-columns:17rem 17rem auto;display:grid;& .channel-container{grid-area:2/1/auto/span 3}& .pattern-area{grid-area:1/3}& .sidebar-scroll{display:contents;&>*{grid-row:1}}& .instrument-sidebar{grid-column:2}& .song-sidebar{grid-column:1}}.layout-focus #beepboxEditorContainer{grid-template-rows:70vh 30vh;grid-template-columns:auto 17rem;display:grid;& .channel-container{grid-area:2/1}& .sidebar-scroll{grid-area:1/2/span 2}}html,body{width:100%;height:100%;margin:0}:root{background:var(--editor-background,#000);color:var(--primary-text,#000);font-size:13px}*{box-sizing:border-box;scrollbar-width:thin}#beepboxEditorContainer{height:100%}#beepboxEditorContainer:has(>.loading-song){place-items:center;display:grid}input{font:inherit;margin:0}.loader{vertical-align:middle;aspect-ratio:1;box-sizing:border-box;border:4px solid #fff;border-bottom-color:#0000;border-radius:50%;width:1lh;margin-inline:.5ch;animation:1s linear infinite rotation;display:inline-block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}