*{box-sizing:border-box}html,body{margin:0;padding:0;overflow:hidden;background:#000;height:100%;width:100%}.fireworks-canvas{position:fixed;top:0;left:0;display:block;cursor:crosshair;background:#000}.controls{position:fixed;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:8px;background:#0006;padding:6px 10px;border-radius:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2}.color-button{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.8);box-shadow:0 0 0 1px #0000004d;cursor:pointer;transition:all .2s;position:relative;outline:none}.color-button:hover{border-color:#fff;box-shadow:0 0 0 1px #00000080;transform:scale(1.1)}.color-button.active{border-color:#fff;border-width:3px;box-shadow:0 0 0 1px #0009;transform:scale(1.15)}.color-button.taken{opacity:.4;cursor:not-allowed}.color-button.taken:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid white;pointer-events:none}