:root{--dark-text:#333;--light-text:#eee;--border-color:#333;--primary-color:#0a66c2;--secondary-color:#333}body{font-family:sans-serif;font-size:14px;color:var(--dark-text)}canvas{display:block;margin:auto;border-radius:100%;width:256px;height:256px;cursor:pointer;background-color:#0a66c2}form{background-color:#f8f8f8;max-width:400px;margin:auto;padding:2em;border-radius:1em;display:flex;flex-direction:column;align-items:stretch}form label{display:block;margin-top:1em}form input{display:block}input{padding:.5em 1em;border:1px solid var(--border-color);border-radius:5px;margin:10px 0;display:block}input[type=color]{padding:0;border:none;width:100%;background-color:transparent}input[type=color]::-webkit-color-swatch{border-radius:1em;border:none}button{color:var(--light-text);font-weight:bold;font-size:1.1em;padding:.5em 1em;background-color:var(--primary-color);border:none;border-radius:2em}