:root{--bg:#f6f6f4;--card:#fff;--text:#1b1b1a;--muted:#6b6b66;--border:#e2e2dd;--accent:#1b1b1a;--accent-text:#fff;--danger:#b42318;color:var(--text);background:var(--bg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#121211;--card:#1c1c1b;--text:#ededea;--muted:#9a9a94;--border:#2f2f2d;--accent:#ededea;--accent-text:#121211;--danger:#f97066}}*{box-sizing:border-box}body{min-height:100vh;margin:0}main{max-width:920px;margin:0 auto;padding:48px 20px}h1{letter-spacing:-.02em;margin:0 0 4px;font-size:1.75rem}.sub{color:var(--muted);margin:0 0 32px}.layout{grid-template-columns:1fr 1fr;align-items:start;gap:24px;display:grid}@media (width<=720px){.layout{grid-template-columns:1fr}}form,.preview{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}form{gap:16px;display:grid}.row{gap:12px;display:flex}.row>.field{flex:1;min-width:0}.field{gap:6px;font-size:.875rem;display:grid}.field>span{color:var(--muted)}textarea,select,input[type=number]{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:1rem}textarea{resize:vertical;min-height:96px}textarea:focus,select:focus,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{width:100%;accent-color:var(--accent)}.color input{background:var(--bg);border:1px solid var(--border);cursor:pointer;border-radius:8px;width:100%;height:38px;padding:2px}.canvas-wrap{aspect-ratio:1;border-radius:10px;place-items:center;display:grid;position:relative;overflow:hidden}.canvas-wrap canvas{image-rendering:pixelated;width:100%!important;height:100%!important}.placeholder{color:var(--muted);border:2px dashed var(--border);border-radius:10px;place-items:center;margin:0;display:none;position:absolute;inset:0}.canvas-wrap.empty canvas{visibility:hidden}.canvas-wrap.empty .placeholder{display:grid}.error{color:var(--danger);margin:12px 0 0;font-size:.875rem}.actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}button{font:inherit;border:1px solid var(--accent);background:var(--accent);color:var(--accent-text);cursor:pointer;white-space:nowrap;border-radius:8px;flex:1;padding:10px 12px;font-size:.875rem;font-weight:500}button+button{color:var(--text);border-color:var(--border);background:0 0}button:disabled{opacity:.4;cursor:not-allowed}