*{box-sizing:border-box}:root{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;color:#fff;background-color:#000}body{margin:0;height:100vh;overflow:hidden}#root{height:100%}.app{height:100%;display:flex;align-items:center;justify-content:center;padding:8px;font-family:monospace}.visualizer-container{position:relative;transform:scale(.96)}canvas{display:block}.controls-overlay{position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:12px;font-size:11px}.controls-overlay fieldset{flex:1;border:1px solid #525252;border-radius:8px;padding:12px 16px;margin:0;background:#171717e6}.controls-overlay legend{color:#a3a3a3;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:0 6px}.controls-overlay label{display:flex;align-items:center;gap:6px;margin-bottom:6px}.controls-overlay label:last-child{margin-bottom:0}.controls-overlay .label{color:#a3a3a3;min-width:60px;font-size:10px}.controls-overlay .value{color:#fff;min-width:50px;text-align:right;font-size:10px}.controls-overlay select{background:#262626;color:#fff;border:1px solid #525252;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:10px;cursor:pointer}.controls-overlay select:focus{outline:none;border-color:#a3a3a3;box-shadow:0 0 0 2px #a3a3a333}.controls-overlay input[type=range]{-webkit-appearance:none;appearance:none;background:#404040;height:3px;border-radius:2px;cursor:pointer;flex:1}.controls-overlay input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;background:#fff;border-radius:50%;cursor:pointer}.controls-overlay input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#fff;border:none;border-radius:50%;cursor:pointer}.controls-overlay input[type=range]:focus{outline:none}.dual-range{position:relative;flex:1;height:10px}.dual-range .track{position:absolute;top:50%;left:0;right:0;height:3px;margin-top:-1.5px;background:#404040;border-radius:2px}.dual-range .track-fill{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:#a3a3a3;border-radius:2px}.dual-range input[type=range]{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;pointer-events:none;background:transparent;-webkit-appearance:none;appearance:none}.dual-range input[type=range]::-webkit-slider-runnable-track{background:transparent;border:none}.dual-range input[type=range]::-moz-range-track{background:transparent;border:none}.dual-range input[type=range]::-moz-range-progress{background:transparent}.dual-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:10px;height:10px;border-radius:50%;cursor:pointer;border:none;margin-top:-2px}.dual-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:10px;height:10px;border-radius:50%;cursor:pointer;border:none}.dual-range input[type=range]:first-child::-webkit-slider-thumb{background:#a3a3a3}.dual-range input[type=range]:first-child::-moz-range-thumb{background:#a3a3a3}.dual-range input[type=range]:last-child::-webkit-slider-thumb{background:#fff}.dual-range input[type=range]:last-child::-moz-range-thumb{background:#fff}.controls-overlay label.checkbox{cursor:pointer}.controls-overlay label.checkbox input{-webkit-appearance:none;appearance:none;width:12px;height:12px;border:1px solid #525252;border-radius:3px;background:#262626;cursor:pointer;position:relative;flex-shrink:0}.controls-overlay label.checkbox input:checked{background:#262626;border-color:#fff}.controls-overlay label.checkbox input:checked:after{content:"";position:absolute;inset:2px;background:#fff;border-radius:1px}.controls-overlay label.checkbox span{color:#a3a3a3;font-size:10px}.controls-overlay label.checkbox:hover span{color:#d4d4d4}