*{box-sizing:border-box;margin:0;padding:0}body{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:sans-serif;transition:background .6s;display:flex}canvas{width:100%;display:block}.ui{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0000008c;flex-direction:column;gap:10px;padding:12px 20px 16px;display:flex;position:fixed;bottom:0;left:0;right:0}.palette{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.palette span{color:#c8d2e6b3;margin-right:2px;font-size:13px}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;flex-shrink:0;width:30px;height:30px;transition:transform .15s,border-color .15s}.swatch:hover{transform:scale(1.15)}.swatch.active{border-color:#ffffffe6;transform:scale(1.18)}.controls{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.controls label{color:#c8d2e6b3;align-items:center;gap:8px;font-size:13px;display:flex}.controls input[type=range]{accent-color:#c8dcffcc;width:100px}.val{color:#e6f0fff2;min-width:28px;font-size:13px;font-weight:500}