*{margin:0;padding:0;box-sizing:border-box}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;margin:0;padding:0;border:none;outline:none}input[type=range]::-webkit-slider-container,input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-webkit-tap-highlight-color:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:transparent;border:none;border-radius:0;height:auto}input[type=range]::-moz-range-track{background:transparent;border:none;border-radius:0;height:auto}input[type=range]::-ms-track{background:transparent;border-color:transparent;border-width:0;color:transparent;height:auto}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:transparent;border:none;border-radius:0;height:auto;width:auto;margin:0}input[type=range]::-moz-range-thumb{background:transparent;border:none;border-radius:0;height:auto;width:auto}input[type=range]::-ms-thumb{background:transparent;border:none;border-radius:0;height:auto;width:auto}input[type=range]::-ms-tooltip{display:none}body{background-color:#000;overflow:hidden;width:100vw;height:100vh}#app{width:100%;height:100%;position:relative}#app #canvas{display:block;width:100%;height:100%}#app #controls{position:absolute;top:10px;left:0;right:0;z-index:10;padding:0 10px}#app .control-row{display:flex;align-items:center;margin-bottom:5px;gap:10px}#app .control-row label{color:#fff;font-family:monospace;font-size:14px;width:180px;flex-shrink:0;white-space:nowrap}#app .control-row input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:transparent;outline:none;opacity:.7;transition:opacity .2s;cursor:pointer}#app .control-row input[type=range]:hover{opacity:1}#app .control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;background:#fff;cursor:pointer;border-radius:50%;margin-top:-8px;box-shadow:0 0 4px #ffffff80}#app .control-row input[type=range]::-moz-range-thumb{width:24px;height:24px;background:#fff;cursor:pointer;border-radius:50%;border:none;box-shadow:0 0 4px #ffffff80}#app .control-row input[type=range]::-webkit-slider-runnable-track{height:8px;background:#ffffff4d;border-radius:4px;cursor:pointer}#app .control-row input[type=range]::-moz-range-track{height:8px;background:#ffffff4d;border-radius:4px;cursor:pointer}@media (pointer: coarse){#app .control-row input[type=range]{padding:10px 0;margin:-10px 0}#app .control-row input[type=range]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-12px}#app .control-row input[type=range]::-moz-range-thumb{width:32px;height:32px}}#app .control-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 8px #fffc}#app .control-row input[type=range]:active::-moz-range-thumb{transform:scale(1.2);box-shadow:0 0 8px #fffc}#app #randomizeBtn{background:#333;color:#fff;border:1px solid #555;padding:5px 15px;cursor:pointer;font-family:monospace;font-size:14px;margin-left:10px;transition:background .2s}#app #randomizeBtn:hover{background:#555}#app #percentage{position:absolute;bottom:20px;right:80px;color:#ffffff1a;font-family:monospace;font-size:300px;font-weight:700;z-index:0}