:root{--surface:#f5f5f5;--warn:#8a4b00;--warn-bg:#fff4e5;--accent:#111;--accent-text:#fff;--focus:#0f6cbd}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--surface:#2a2a2a;--warn:#ffc56b;--warn-bg:#3a2c12;--accent:#f2f2f2;--accent-text:#111;--focus:#6cb8f6}}
main.wide{max-width:880px}
.maker{display:grid;grid-template-columns:1fr 300px;gap:24px;margin:8px 0 8px;align-items:start}
@media (max-width:700px){.maker{grid-template-columns:1fr}}
.controls label{display:block;font-weight:600;font-size:14px;margin:14px 0 4px}
.controls label:first-child{margin-top:0}
textarea,select,input[type=number]{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px}
textarea{resize:vertical}
.row{display:flex;justify-content:space-between;align-items:end}
.row label{margin-bottom:4px}
.unit{display:flex;align-items:center;gap:6px;font-size:14px}
.unit input{width:84px}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:2px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{font-size:14px;color:var(--muted);margin:6px 0 0}
.note.warn{color:var(--warn);background:var(--warn-bg);padding:6px 8px;border-radius:6px}
.out{position:sticky;top:16px}
.preview{background:var(--surface);border-radius:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:16px}
.preview canvas{width:100%;height:auto;image-rendering:pixelated}
.empty{color:var(--muted);text-align:center;font-size:14px;margin:0}
.actions{display:grid;gap:8px;margin-top:12px}
button{font:inherit;font-size:15px;padding:10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.controls .grid{margin-top:14px}