:root{font-family:system-ui,sans-serif;color:#17202a;background:#f4f6f8}body{margin:0}main{max-width:900px;margin:2rem auto;padding:2rem;background:white;border-radius:14px;box-shadow:0 3px 18px #0001}h1{margin-top:0}input{display:block;margin:1rem 0;padding:.6rem;border:1px solid #68737d;border-radius:6px}section{display:grid;grid-template-columns:1fr 1fr;gap:1rem}section div{min-width:0}img,canvas{max-width:100%;height:auto;border:1px solid #ccd2d8;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0/20px 20px}button{padding:.7rem 1rem;font-weight:700}.note{color:#56616b;font-size:.9rem}@media(max-width:650px){section{grid-template-columns:1fr}}
.dropzone{padding:1rem;border:2px dashed #68737d;border-radius:8px}.dropzone.dragging{border-color:#1769aa;background:#eaf4ff}.dropzone p{margin:.5rem 0 0;color:#56616b}