* { box-sizing: border-box; }
body { margin: 0; background: #111; color: #f5f5f5; font-family: system-ui, sans-serif; }
main { width: min(720px, calc(100% - 32px)); margin: 48px auto; }
form { display: grid; gap: 16px; margin: 28px 0; }
label { display: grid; gap: 6px; }
input, select, button, .button { font: inherit; padding: 10px; }
button, .button { cursor: pointer; }
.button { display: inline-block; background: #0a84ff; color: #fff; border: 1px solid #0a84ff; border-radius: 4px; text-decoration: none; }
.button:hover { background: #409cff; border-color: #409cff; }
#download { display: block; text-align: center; }
#progress, #error { margin: 20px 0; padding: 14px; background: #262626; }
#error { color: #ffd1d1; }
#preview { display: block; width: 100%; margin-top: 16px; background: #000; }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid #aaa; border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }