:root{--bg:#f5f6f8;--fg:#1a1d21;--muted:#6b7280;--border:#d9dde3;--accent:#2563eb;--accent-fg:#fff;--radius:10px}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--fg);place-items:center;margin:0;padding:1.5rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid}.card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;gap:1rem;width:100%;max-width:28rem;padding:1.5rem;display:grid;box-shadow:0 1px 2px #0000000a}h1{margin:0;font-size:1.25rem;font-weight:600}label{color:var(--muted);margin-bottom:.375rem;font-size:.875rem;display:block}textarea,input[type=number],select{width:100%;font:inherit;color:inherit;border:1px solid var(--border);background:#fff;border-radius:6px;padding:.5rem .625rem}textarea{resize:vertical;min-height:4.5rem}textarea:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}.options{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.output{background:var(--bg);border-radius:8px;place-items:center;min-height:10rem;padding:1rem;display:grid}canvas{aspect-ratio:1;max-width:100%;height:auto;display:none}canvas.visible{display:block}.hint{color:var(--muted);margin:0;font-size:.875rem}.hint.error{color:#b91c1c}button{font:inherit;background:var(--accent);color:var(--accent-fg);cursor:pointer;border:0;border-radius:6px;padding:.625rem 1rem;font-weight:500}button:disabled{cursor:not-allowed;background:#cbd5e1}button:not(:disabled):hover{filter:brightness(1.05)}