:root{--primary-bg-color: rgb(21, 21, 21);--secondary-bg-color: rgb(28, 28, 28);--outline-color: rgb(40, 40, 40);--primary-text-color: #dadada;--secondary-text-color: rgba(255, 255, 255, .4);--primary-button-bg-color: rgb(47, 47, 47);--primary-button-text-color: #d1d1d1;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--primary-text-color);background-color:var(--primary-bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:10px;display:flex;min-width:320px}.wrapper{width:100%;max-width:100%}.wrapper .canvas-sample{position:relative}.canvas-sample #init-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;color:var(--secondary-text-color);outline:none;-webkit-user-select:none;user-select:none}.wrapper canvas{display:block;background-color:var(--secondary-bg-color);border:2px solid var(--outline-color);border-radius:4px}.wrapper .header{display:flex;gap:10px}button{-webkit-user-select:none;user-select:none;cursor:pointer;border:0;border-radius:5px;padding:8px 16px;color:var(--primary-button-text-color);background-color:var(--primary-button-bg-color)}.sample-controls{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--outline-color)}.primary-button{min-width:80px;color:var(--primary-button-text-color);background-color:var(--primary-button-bg-color)}button[disabled]{color:#7b7b7b;background:red}hr{border-color:var(--outline-color);opacity:.2}.block-header{display:flex;justify-content:space-between;align-items:flex-end}.block-header .graph-controls{padding:20px 24px}.graph-controls #add-plugin-select{min-width:250px;padding:5px;border:none;border-radius:3px;color:var(--primary-button-text-color);outline:none}#add-plugin-select #select-placeholder{display:none}.select-block label,.select-block span{margin-right:8px}.select-block select{min-width:150px;padding:5px;border:none;border-radius:3px;color:var(--primary-button-text-color);outline:none}#audio-plugin{margin-top:10px}.plugin-container{display:flex;gap:20px;justify-content:center;background:var(--secondary-bg-color);padding:20px;border-radius:3px;border:3px solid var(--outline-color)}.band{display:flex;flex-direction:column;align-items:center;padding:16px 5px;border:2px solid var(--outline-color);border-radius:3px;min-width:80px;box-shadow:0 2px 3px #0003}.band label{font-size:1em;letter-spacing:1.5px;text-align:center}input[type=range]{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:20px;height:200px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to top,#2f7a41,#00e676);border-radius:2px;width:8px}input[type=range]::-moz-range-track{background:linear-gradient(to top,#2f7a41,#00e676);border-radius:2px;width:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:16px;background:#ccc;border:2px solid #111;border-radius:3px;box-shadow:0 0 4px #0006;transition:background .2s;margin-left:-8px}input[type=range]::-moz-range-thumb{width:26px;height:16px;background:#ccc;border:2px solid #111;border-radius:3px;box-shadow:0 0 4px #0006;transition:background .2s}input[type=range]:active::-webkit-slider-thumb{background:#ccc}input[type=range]:active::-moz-range-thumb{background:#ccc}.band:before{content:"";position:relative;top:92px;width:1px;height:1px}#context-menu{display:none;position:fixed;background-color:var(--secondary-bg-color);border:1px solid var(--outline-color);border-radius:12px;box-shadow:0 5px 20px #000c;padding:8px 0;z-index:1000;overflow:hidden;min-width:120px}#context-menu ul{list-style:none;margin:0;padding:0}#context-menu li{padding:8px 15px;cursor:pointer}#context-menu li:hover{background-color:#333}.knob-container{display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none}.label{font-size:16px;margin-bottom:5px}.knob{position:relative;width:70px;height:70px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:center}.arc{position:absolute;width:100%;height:100%;border-radius:50%;--color: #4fd0e2;background:conic-gradient(var(--color) var(--angle),#333 0deg);transform:rotate(225deg);-webkit-mask:radial-gradient(circle,transparent 60%,black 61%);mask:radial-gradient(circle,transparent 60%,black 61%)}.indicator{position:absolute;width:4px;height:25px;background:#ddd;border-radius:2px;top:10px;left:50%;transform-origin:center bottom;transform:translate(-50%) rotate(0)}.value{margin-top:5px;font-size:14px;color:#ccc}.flex-block{display:flex;gap:20px;flex-wrap:wrap}.horizontal-splitter{width:4px;background:var(--outline-color);border-radius:4px}