:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0}body{min-height:100vh;background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{-webkit-appearance:none;border-radius:0;text-align:inherit;background:none;box-shadow:none;padding:0;cursor:pointer;border:none;color:inherit;font:inherit}html{font-size:16px}:root{--back: #9e9e9e;--back-active: #8c8c8c;--back-selected: #909090;--graph: rgba(0,0,0,.1);--graph-size:16px;--grid-size:16px;--highlight: #FF9F1E;--highlight-soft: rgba(255, 159, 30,.5);--card: inset 1px 1px 1px 1px rgba(255,255,255,.2),inset -2px -1px 1px 1px rgba(0,0,0,.05);--grad: linear-gradient(160deg, rgba(255, 255, 255,.15) 0%,rgba(255,255,255,0) 30%);--viz-back: rgba(15,10,45,1);--viz-high: rgba(62, 174, 243,1);--viz-high-medium: rgba(62, 174, 243,.5);--viz-high-soft: rgba(62, 174, 243,.25);--black: rgba(0,0,0,.8)}body{background-color:#f1f0ed;font-family:Inter;font-weight:600;font-size:14px;line-height:16px;text-align:center;color:#0f0a2d;text-transform:uppercase;-webkit-user-select:none;user-select:none;margin:0;padding:0;cursor:default}#app{min-height:100vh;margin:0 auto;display:flex;align-items:center;justify-content:center}a,.green{text-decoration:none;color:#00bd7e;transition:.4s;padding:3px}@media (hover: hover){a:hover{background-color:#00bd7e33}}*{box-sizing:border-box;margin:0;padding:0}.graph-w-1{width:calc(1 * var(--graph-size))}.graph-w-2{width:calc(2 * var(--graph-size))}.graph-w-3{width:calc(3 * var(--graph-size))}.graph-w-4{width:calc(4 * var(--graph-size))}.graph-w-5{width:calc(5 * var(--graph-size))}.graph-w-6{width:calc(6 * var(--graph-size))}.graph-w-7{width:calc(7 * var(--graph-size))}.graph-w-8{width:calc(8 * var(--graph-size))}button{width:64px;height:32px;margin:0;text-transform:uppercase;-webkit-user-select:none;user-select:none;line-height:32px;border-radius:5px;box-shadow:inset 2px 2px 3px 1px #fff3;background:var(--back);outline:1px solid rgba(0,0,0,.15);text-shadow:rgba(255,255,255,.4) 0px 1px 1px}button:active{background:var(--back-active);box-shadow:inset 2px 2px 3px 1px #0003}.button_selected{color:var(--highlight);background:var(--back-selected);box-shadow:inset 1px 1px 1px 1px #0003;text-shadow:none}.BigKnob_box{position:relative;z-index:1}.BigKnob_svg{position:absolute;left:0;top:0;z-index:3}.BigKnob_back{position:absolute;z-index:2;top:-3%;left:-3%;width:106%;height:calc(106% - var(--grid-size));border-radius:50%;background:var(--back);box-shadow:inset 2px 2px 3px 1px #ffffff1a;outline:1px solid rgba(0,0,0,.15)}.bigknob_label{position:absolute;bottom:0;height:16px;width:100%;z-index:1;outline:1px solid rgba(0,0,0,.15);box-shadow:inset 2px 2px #ffffff1a;background:var(--back);color:#0f0a2d}.title{outline:1px solid rgba(0,0,0,.2);background-color:var(--back);padding-left:4px;height:16px;box-shadow:inset 1px 1px 1px 1px #fff3}.title_h2{text-align:left;line-height:16px;font-size:12px;font-weight:600;color:#000c;padding:0}.onOff{height:16px;width:32px;display:inline}.envVisual{width:480px;height:176px;border-radius:5px;overflow:hidden;padding:16px;background:#0f0a2d}.envVisual_box{border:1px solid rgba(62,174,243,.25);display:flex;align-items:flex-start;position:relative;background-image:linear-gradient(to right,rgba(62,174,243,.25) 1px,transparent 1px)}.envKey_box{overflow:visible}.envKey_svg{overflow:visible;display:block}.polygon{position:absolute;top:0;color:#fff}.modBox{width:64px;height:96px;-webkit-user-select:none;user-select:none;line-height:32px;border-radius:5px;position:relative;box-shadow:inset 2px 2px 3px 1px #fff3;background:#8c8c8c;outline:1px solid rgba(0,0,0,.15)}.modBox_active{color:orange;background:#ac9263;text-shadow:rgba(0,0,0,.5) 1px 1px 2px}.modBox_tab{height:100%;width:4px;background:#8c8c8c;position:absolute;right:0;top:0}.press{background:#878787;box-shadow:inset 2px 2px 3px 1px #0003}.envelopes{box-shadow:var(--card);background:var(--grad);border-bottom:1px solid rgba(0,0,0,.2);display:flex;flex-direction:row;padding:16px 32px;gap:32px}.envMods{display:flex;flex-direction:column;gap:16px}.knobs{width:480px;display:flex;flex-direction:row;justify-content:center;gap:32px}.LFO_grid{display:flex;flex-direction:row}.LFO_grid>div{width:50%;height:100%;display:flex;flex-direction:row;justify-content:space-between}.LFO_grid_digit{width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.LFO_grid_btn{height:16px;width:16px;text-align:left;border-left:1px solid rgba(0,0,0,.2);line-height:16px}.LFO_select{display:flex;flex-direction:row;justify-content:center;align-items:space-between;border-left:1px solid var(--viz-high-soft)}.LFO_select_btn{height:32px;width:32px;padding-left:8px;padding-right:8px}.LFO_select_txt{line-height:32px;flex:1}.lfoVisual{border-radius:0 0 5px 5px;overflow:visible;width:480px;height:224px;padding:16px;background:#0f0a2d}.lfoSvgBox{display:block;overflow:visible}.LFO{padding:32px;border-bottom:1px solid rgba(0,0,0,.2);box-shadow:var(--card);background:var(--grad)}.LFO_box{display:flex;flex-direction:row}.viz_head{width:100%;height:32px;line-height:32px;display:flex;flex-direction:row;align-items:center;color:var(--viz-high);background-color:var(--viz-back);border-radius:5px 5px 0 0;border-bottom:1px solid var(--viz-high-soft)}.lfoMods{margin-right:calc(2 * var(--grid-size));display:flex;flex-direction:column;gap:var(--grid-size)}.osc_select{display:flex;flex-direction:row;border-radius:3px;height:32px}.osc_select input[type=radio]{display:none}.osc_wave{display:inline-block;cursor:pointer;width:48px;height:32px;display:flex;align-items:center;justify-content:center;box-shadow:inset 2px 2px 3px 1px #fff3;background:var(--back);outline:1px solid rgba(0,0,0,.15)}.osc_wave_left{border-radius:5px 0 0 5px}.osc_select input[type=radio]:checked+label{background-color:var(--back-selected);color:var(--highlight);box-shadow:inset 1px 1px 1px 1px #0003}.osc_window{padding:8px;background:#0f0a2d;color:#3eaef3;overflow:hidden;border-radius:5px;display:block}.osc_svg{display:block;overflow:visible}.oscilator{width:100%;height:208px;padding:16px 32px;border-bottom:1px solid rgba(0,0,0,.2);display:flex;flex-direction:row;gap:32px;box-shadow:var(--card);background:var(--grad)}.osc_digits_box{background:#0f0a2d;color:#3eaef3;overflow:hidden;border-radius:5px;width:160px;height:48px;display:flex;flex-direction:row;align-items:center;justify-content:center}.osc_digits{width:50%}.osc_knobs_box{display:flex;flex-direction:row;gap:calc(2 * var(--grid-size));margin-top:var(--grid-size)}.osc_buttons{width:64px;flex-direction:column;align-items:center;gap:16px;margin-right:16px}.reso_box{width:32px;height:128px;border-radius:0 6px 6px 0;padding-left:12px;position:relative}.reso{width:8px;height:100%;background:#00000080;overflow:hidden;display:flex;flex-direction:column-reverse}.reso_marker{box-shadow:inset 0 1px 2px #00000080;background:var(--highlight)}.reso_pointer{height:32px;width:12px;position:absolute;left:10px;background:var(--back);border-radius:4px;outline:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 3px #ffffff4d,1px 1px 1px 1px #0000004d}.cut_box{width:224px;height:32px;border-radius:0 0 6px 6px;padding-top:12px;position:relative}.cut{width:100%;height:8px;background:#00000080;overflow:hidden;display:flex;flex-direction:row}.cut_marker{box-shadow:inset 0 1px 2px #00000080;background:var(--highlight)}.cut_pointer{height:12px;width:32px;position:absolute;top:10px;background:var(--back);border-radius:4px;outline:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 3px #ffffff4d,1px 1px 1px 1px #0000004d}.filter_window{width:calc(var(--grid-size) * 14);height:calc(var(--grid-size) * 6);background:#0f0a2d;color:#3eaef3;overflow:hidden;display:block}.filter_svg{display:block}.filter{height:224px;padding:16px 32px;box-shadow:var(--card);background:var(--grad)}.filter_knobs{padding:0 var(--grid-size);position:relative;display:flex;flex-direction:row;justify-content:space-between}.filter_knob_wing{position:absolute;background:var(--back);width:48px;height:32px;border-radius:0 20px 0 0}.filter_mode_select{width:100%;display:flex}.filter_mode_select input[type=radio]{display:none}.filter_mode{display:inline-block;cursor:pointer;flex:1;height:32px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--viz-high-soft)}.keyboard{height:160px;overflow:hidden;position:relative;display:flex;flex-direction:row}.keyboard_controls{height:100%;width:128px;border-right:1px solid rgba(0,0,0,.2)}.keyboard_box{margin:0 auto;height:100%;background:#717171;position:relative;display:flex;flex-direction:row}.flat_box{width:336px;height:100%;position:relative;display:flex;flex-direction:row;align-content:stretch}.sharp_box{position:absolute;z-index:2;width:100%;display:flex;flex-direction:row;padding-left:32px}.key_sharp{width:32px;height:80px;color:#ffffff40;display:flex;flex-direction:column-reverse;padding-bottom:15px;border-radius:0 0 5px 5px;outline:1px solid rgba(0,0,0,.2);background:#201e1e;box-shadow:inset 0 -8px #9e9e9e40,inset 0 -3px 4px #000c}.key_press_sharp{box-shadow:0 4px 0 1px #0000001a;background:linear-gradient(to bottom,#161616,#201e1e 25%);padding-bottom:10px}.key_flat{height:128px;width:48px;color:#00000080;display:flex;flex-direction:column-reverse;padding-bottom:15px;border-radius:0 0 5px 5px;outline:1px solid rgba(0,0,0,.2);background:var(--grad),var(--back);box-shadow:inset 0 -4px 0 1px #00000040,inset 0 -5px 1px 2px #ffffff26}.key_press_flat{box-shadow:0 4px 0 1px #0000001a;background:linear-gradient(to bottom,rgb(151,151,151) 0px,var(--back) 50%);padding-bottom:10px}.trial{width:480px;height:256px;border:1px solid grey}.trial_svg{overflow:visible}.threedee{position:absolute;z-index:10;background:#fff;width:1000px;height:800px;top:120px;left:25%;display:grid;grid-template-columns:200px 1fr;overflow:hidden;outline:1px solid grey;border-radius:5px;box-shadow:0 10px 20px 10px #00000040}.three_menu{background:var(--back)}.Synth{width:1216px;height:864px;outline:1px solid black;overflow:hidden;border-radius:8px;background:var(--back);background-size:var(--graph-size) var(--graph-size);background-image:linear-gradient(to bottom,var(--graph) 1px,transparent 1px),linear-gradient(to right,var(--graph) 1px,transparent 1px);box-shadow:5px 15px 20px 2px #00000040,inset 2px 2px 3px 1px #fff3}.topbar{width:100%;height:64px;padding:16px 32px;box-shadow:var(--card);background:var(--grad);outline:1px solid rgba(0,0,0,.2)}.row2{width:100%;height:640px;border-bottom:1px solid rgba(0,0,0,.2);display:grid;grid-template-columns:1fr 1fr}.left{width:calc(36 * var(--grid-size));height:100%;border-right:1px solid rgba(0,0,0,.2)}.macros{width:32px;height:100%;padding-top:16px;border-right:1px solid rgba(0,0,0,.2)}.filters{width:100%;display:grid;grid-template-columns:1fr 1fr}.right{width:100%;height:100%}.debug{position:absolute;background:#fff;padding:20px;width:50%}