*{margin:0;padding:0;box-sizing:border-box;font:inherit;border:none;outline:none}html{height:100%}body{font-family:Arial,sans-serif;background:#adf;min-height:100vh}#app{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%}.container{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 12px #00000080;text-align:center;width:90%}h1{font-size:2rem;font-weight:900}.container>p{font-style:italic;margin-top:.2rem;margin-bottom:1rem}.main-content{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.upload-box{position:relative;border:2px dashed #3b82f6;border-radius:8px;background-color:#f3f4f6;cursor:pointer;aspect-ratio:16 / 9;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.upload-box.dragging{border-color:#3b82f6;background-color:#e0f2fe}.upload-box.has-preview{border-style:solid;border-color:#d1d5db;background-color:#f9fafb}.placeholder{text-align:center;color:#6b7280}.browse{color:#3b82f6;text-decoration:underline;cursor:pointer}.preview-img{display:none;width:100%;height:100%;object-fit:contain;position:absolute;top:0;left:0}.caption-box{width:100%}.caption-box label{font-weight:700;display:block}.caption-box textarea{width:100%;border:2px solid #d1d5db;border-radius:8px;padding:.75rem;background:#f9fafb;resize:none;font-size:.95rem;line-height:1.5em;min-height:16em;color:#374151}button{align-self:center;background-color:#3b82f6;color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .2s ease;display:block;margin:0 auto}button:hover{background-color:#2563eb}@media (min-width: 768px){.main-content{flex-direction:row;align-items:stretch}.upload-box,.caption-box{flex:1}button{width:150px}.caption-box textarea{height:100%;min-height:auto}}