:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;height:100vh;width:100vw}body{position:relative}.layer{width:100%;height:100%;background:transparent}.dialog{position:fixed;left:50%;bottom:30px;width:60%;background-color:#80808080;border-radius:10px;transform:translate(-50%);z-index:9;padding:24px}.dialog.hidden{display:none}h1{font-size:3.2em;line-height:1.1;margin-top:0;color:#ffffffde}.colors{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0 0 24px;padding:0}.colors .colors-item{width:32px;height:32px;background-color:attr(data-color);border-radius:50%}.colors .colors-item.active{box-shadow:0 0 0 2px #fff}.colors .colors-item[data-color=black]{background-color:#000}.colors .colors-item[data-color=white]{background-color:#fff}.colors .colors-item[data-color=lightsalmon]{background-color:#ffa07a}.colors .colors-item[data-color=blueviolet]{background-color:#8a2be2}.colors .colors-item[data-color=aqua]{background-color:#0ff}.colors .colors-item[data-color=gold]{background-color:gold}.colors .colors-item[data-color=dodgerblue]{background-color:#1e90ff}.colors .colors-item[data-color=rebeccapurple]{background-color:#639}.colors .colors-item[data-color=chocolate]{background-color:#d2691e}.colors .colors-item[data-color=cornflowerblue]{background-color:#6495ed}.colors .colors-item[data-color=chartreuse]{background-color:#7fff00}.colors .colors-item[data-color=firebrick]{background-color:#b22222}.controls-item input[type=number]{width:80px;height:30px;margin-left:16px}.controls-item.reset button[type=reset]{width:80px;height:30px;font-size:14px}.controls-item+.controls-item{margin-top:16px}