@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";
:root{--ink:#171918;--muted:#727875;--line:#dfe3df;--paper:#f6f7f4;--orange:#e5097f;--panel:#fff}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:Manrope,system-ui,sans-serif}button,select,textarea{font:inherit}.topbar{border-bottom:1px solid var(--line);background:#fafbf9;justify-content:space-between;align-items:center;height:68px;padding:0 5vw;display:flex}.brandmark{letter-spacing:-.03em;align-items:center;gap:10px;font-weight:800;display:flex}.brandmark svg{color:var(--orange)}.status{color:var(--muted);font:12px DM Mono,monospace}.dot{background:#55a66b;border-radius:50%;width:7px;height:7px;margin-right:8px;display:inline-block}.shell{max-width:1320px;margin:auto;padding:72px 5vw}.intro{max-width:650px}.eyebrow{letter-spacing:.14em;color:var(--orange);margin:0 0 18px;font:11px DM Mono,monospace}.intro h1{letter-spacing:-.075em;margin:0;font-size:clamp(48px,6vw,82px);line-height:.95}.intro h1 em{color:var(--orange);font-style:normal}.lede{color:var(--muted);max-width:530px;margin:24px 0 60px;font-size:15px;line-height:1.7}.workspace{grid-template-columns:390px minmax(0,1fr);align-items:start;gap:42px;display:grid}.controls{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px}.step{border-bottom:1px solid var(--line);grid-template-columns:32px 1fr;gap:12px;margin-bottom:25px;padding:0 0 28px;display:grid}.step>span{color:var(--orange);padding-top:4px;font:11px DM Mono,monospace}.step label{margin-bottom:10px;font-size:13px;font-weight:700;display:block}.step small{color:#929993;margin-left:5px;font-weight:400}select,textarea{border:1px solid var(--line);width:100%;color:var(--ink);background:#fafbf9;border-radius:9px;outline:none;padding:12px;font-size:13px}textarea{resize:vertical;height:126px;line-height:1.55}.copy-input{border:1px solid var(--line);width:100%;color:var(--ink);background:#fafbf9;border-radius:9px;outline:none;margin-top:8px;padding:12px;font-size:13px}.copy-input:focus,select:focus,textarea:focus{border-color:var(--orange)}.brand-meta{color:var(--muted);background:#f5f6f3;border-radius:8px;justify-content:space-between;align-items:center;margin:-10px 0 27px;padding:10px 12px;font:11px DM Mono,monospace;display:flex}.brand-meta i{border:1px solid #fff;border-radius:50%;width:14px;height:14px;margin-left:5px;display:inline-block;box-shadow:0 0 0 1px #ddd}.asset-row{flex-wrap:wrap;gap:9px;display:flex}.asset-row button{width:78px;height:64px;padding:7px;position:relative}.asset-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.asset-grid button{height:75px;padding:0;position:relative}.asset-row button,.asset-grid button{border:1px solid var(--line);cursor:pointer;background:#f6f7f4;border-radius:8px;overflow:hidden}.asset-row button.selected,.asset-grid button.selected{border:2px solid var(--orange)}.asset-row img,.asset-grid img{object-fit:contain;width:100%;height:100%}.asset-grid img{object-fit:cover}.asset-row svg,.asset-grid svg{background:var(--orange);color:#fff;border-radius:50%;padding:2px;position:absolute;top:4px;right:4px}.generate{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:14px;padding:13px;font-weight:700;display:flex}.generate:hover{background:var(--orange)}.generate:disabled{opacity:.45;cursor:not-allowed}.error{color:#b33d32;font-size:12px;line-height:1.4}.preview{min-width:0}.preview-head{justify-content:space-between;align-items:end;margin:4px 0 17px;display:flex}.preview-head h2{letter-spacing:-.04em;margin:0;font-size:22px}.preview-head .eyebrow{margin-bottom:8px}.canvas{border:1px solid var(--line);background:#e9ece8;border-radius:18px;justify-content:center;align-items:center;height:min(730px,68vh);min-height:500px;display:flex;position:relative;overflow:hidden}.canvas .reference,.canvas .final{object-fit:contain;width:100%;height:100%}.canvas .reference{opacity:.72;filter:saturate(.8)}.canvas .developing-image{object-fit:contain;opacity:.58;filter:blur(11px)saturate(.72);width:100%;height:100%;animation:2.4s ease-in-out infinite alternate develop;transform:scale(1.04)}.empty{text-align:center;color:#8d9690;font-size:13px}.empty svg{color:var(--orange);margin-bottom:10px}.developing{color:#fff;background:#171918d6;border-radius:8px;padding:11px 14px;font-size:12px;position:absolute;bottom:20px;left:20px}.pulse{background:var(--orange);border-radius:50%;width:7px;height:7px;margin-right:8px;animation:1.2s infinite pulse;display:inline-block}.progress{background:#d8ddd8;height:4px;position:absolute;bottom:0;left:0;right:0}.progress span{background:var(--orange);height:100%;transition:width .5s;display:block}.result-note{color:#67706a;align-items:center;gap:7px;margin-top:13px;font-size:12px;display:flex}.result-note svg{color:#55a66b}@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}@keyframes develop{0%{filter:blur(14px)saturate(.6);opacity:.45}to{filter:blur(5px)saturate(.85);opacity:.72}}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:900px){.shell{padding-top:45px}.workspace{grid-template-columns:1fr}.canvas{height:600px}.lede{margin-bottom:38px}}@media (max-width:520px){.topbar{padding:0 20px}.status{display:none}.shell{padding:40px 20px}.controls{padding:20px}.canvas{height:65vh;min-height:420px}.intro h1{font-size:52px}}