canvas{width:100vw;height:100vh;display:block}.canvas-content{--size:512px;width:var(--size);height:var(--size);background:#0a0a0a;grid-template-rows:auto 1fr auto;padding:70px;display:grid}.button-row{grid-auto-flow:column;gap:8px;display:grid}.button-row button{color:#e0e0e0;cursor:pointer;background:#1e1e1e;border:1px solid #444;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.button-row button:hover{color:#fff;background:#7c3aed;border-color:#7c3aed}.button-row button:active{background:#6d28d9;border-color:#6d28d9}.range-row{margin:0 50px;display:grid}select{appearance:base-select}select::picker(select){appearance:base-select}html{color:#fff;background:#000;font-family:system-ui,sans-serif;line-height:1.5}body{margin:0}a{color:#a78bfa;text-underline-offset:3px;text-decoration-color:#a78bfa66;transition:color .15s,text-decoration-color .15s}a:hover{color:#c4b5fd;text-decoration-color:#c4b5fd}a:visited{color:#818cf8;text-decoration-color:#818cf866}