:root{ --w:2048; --h:692; }
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;background:#f5f5f5;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.app{max-width:1200px;margin:20px auto;padding:0 16px}
h1{font-size:18px;margin:0 0 10px;font-weight:900}
.panel{display:grid;gap:10px;margin-bottom:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#333;margin-bottom:6px}
input{width:100%;height:40px;border:1px solid #ddd;border-radius:10px;padding:0 12px;font-size:15px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:0;background:#111;color:#fff;padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer}
.hint{font-size:12px;color:#666}

/* PREVIEW responsiva sin scroll */
.frame{border:1px dashed #d2d2d2;background:#fff;border-radius:12px;padding:10px;overflow:hidden}
.preview{display:block;width:100%;height:auto;aspect-ratio: var(--w) / var(--h);max-width:100%}