@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{font-family:Inter,sans-serif}body{margin:0;overflow:hidden;display:flex;width:100%;height:100vh}#app{flex:1}#app canvas{display:block;width:100%;height:100%}#menu{flex:0 0 250px;height:100%;background-color:#141414;border-left:1px solid rgba(255,255,255,.1);padding:1rem}#menu h1{margin:0;font-size:.8em;font-weight:200;color:#ffffff80;letter-spacing:.1ch}#menu hr{border:0;border-top:1px solid rgba(255,255,255,.2);margin-top:.5rem;margin-bottom:1rem}.slider{margin-bottom:1rem}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2px;background:#fff6;border-radius:5px;outline:none;transition:background .3s;position:relative}input[type=range]:after{content:"";width:var(--after-width, 0%);position:absolute;height:100%;background:#26a8ff}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#ccc;border-radius:50%;cursor:pointer;transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#ccc;border:none;border-radius:50%;cursor:pointer}input[type=range]:hover::-webkit-slider-thumb{background:#ccc}.slider .label{display:flex;justify-content:space-between;font-size:.8rem;color:#ffffff80}button{background-color:#26a8ff;color:#fff;border:none;padding:.5rem 1rem;border-radius:2px;cursor:pointer;font-size:.8rem;font-weight:500;transition:background-color .3s ease-in-out;width:100%;margin-bottom:1rem}button:hover{background-color:#1c80c8}.checkbox{display:flex;align-items:center;margin-bottom:1rem;color:#fff}.checkbox input[type=checkbox]{margin-right:.5rem;width:1rem;height:1rem;cursor:pointer}.checkbox input[type=checkbox]:checked{accent-color:rgb(38,168,255)}.color-picker{display:flex;align-items:center;margin-bottom:1rem}.color-picker input[type=color]{width:2rem;height:2rem;border:none;border-radius:50%;cursor:pointer;margin-right:.5rem}.color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}.color-picker label{color:#ffffff80;font-size:.8rem}.color-picker input[type=color]:focus{outline:none}.color-picker input[type=color]:hover{box-shadow:0 0 5px #26a8ff80}.color-picker input[type=color]:active{box-shadow:0 0 10px #26a8ffb3}.color-picker input[type=color]::-moz-color-swatch{border:none;border-radius:50%}.color-picker input[type=color]::-moz-color-swatch-wrapper{padding:0}