.app{flex-direction:column;gap:1rem;max-width:860px;margin:0 auto;padding:2rem 1rem;font-family:system-ui,sans-serif;display:flex}.app h1{margin:0;font-size:1.75rem}.app input{border:1px solid #ccc;border-radius:8px;padding:.6rem .8rem;font-size:16px}.hint{color:#777;margin:-.5rem 0 0;font-size:.8rem}.error{color:#b3261e;background:#fdecea;border-radius:8px;margin:0;padding:.6rem .8rem}.previews{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;display:grid}.preview-card{background:#fff;border:1px solid #eee;border-radius:12px;flex-direction:column;align-items:center;gap:.8rem;padding:1rem;display:flex}.preview-card h2{align-self:flex-start;margin:0;font-size:1rem}.preview-card canvas{max-width:100%;height:auto}.downloads{gap:.5rem;display:flex}.downloads button{cursor:pointer;background:#f5f5f5;border:1px solid #ccc;border-radius:8px;min-height:44px;padding:.45rem 1rem;font-size:.9rem}.downloads button:hover{background:#e5e5e5}.empty{color:#999}.card-header{justify-content:space-between;align-items:center;gap:.5rem;width:100%;display:flex}.size-control{border:1px solid #ccc;border-radius:8px;display:flex;overflow:hidden}.size-control button{cursor:pointer;background:#f5f5f5;border:none;min-height:44px;padding:.6rem .9rem;font-size:.9rem}.size-control button+button{border-left:1px solid #ccc}.size-control button.active{color:#fff;background:#2563eb}@media (width<=640px){.previews{grid-template-columns:1fr}.app{padding:1rem .75rem}.downloads{flex-wrap:wrap;justify-content:center}.downloads button{flex:auto;min-width:88px}}