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