:root{color-scheme:light;--bg: #f4f6f8;--surface: #ffffff;--border: #e2e8f0;--text: #0f172a;--muted: #64748b;--accent: #2563eb;--accent-hover: #1d4ed8;--shadow: 0 20px 50px rgba(15, 23, 42, .08)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:DM Sans,system-ui,sans-serif;background:radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 35%),var(--bg);color:var(--text)}#app{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem}.card{width:min(100%,560px);background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:2rem}.header{margin-bottom:1.75rem}.header h1{margin:0 0 .5rem;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.header p{margin:0;color:var(--muted);line-height:1.5}.field{display:grid;gap:.5rem;margin-bottom:1.25rem}.field label{font-size:.875rem;font-weight:600}.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:.875rem 1rem;font:inherit;color:var(--text);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}.field textarea{min-height:96px;resize:vertical}.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #2563eb1f}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}button{border:none;border-radius:12px;padding:.875rem 1.125rem;font:inherit;font-weight:600;cursor:pointer;transition:background .15s ease,transform .15s ease}button:active{transform:translateY(1px)}button.primary{background:var(--accent);color:#fff}button.primary:hover{background:var(--accent-hover)}button.secondary{background:#eef2ff;color:#1e3a8a}button.secondary:hover{background:#dbeafe}button:disabled{opacity:.55;cursor:not-allowed;transform:none}.preview{border:1px dashed var(--border);border-radius:16px;min-height:280px;display:grid;place-items:center;padding:1.5rem;background:#fafbfc}.preview img,.preview svg{max-width:100%;height:auto}.placeholder{color:var(--muted);text-align:center;line-height:1.5}.error{margin-top:1rem;color:#b91c1c;font-size:.875rem}@media(max-width:560px){.card{padding:1.5rem}.options{grid-template-columns:1fr}}