:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e6e8ee;background:#0f1117;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{justify-content:center;align-items:flex-start;min-height:100vh;margin:0;padding:40px 16px;display:flex}.card{background:#181b24;border:1px solid #2a2f3d;border-radius:16px;width:100%;max-width:640px;padding:28px}h1{margin:0 0 20px;font-size:1.6rem}h2{text-transform:uppercase;letter-spacing:.08em;color:#8a91a5;margin:0 0 10px;font-size:.85rem}section{margin-bottom:24px}button{font:inherit;color:inherit;cursor:pointer;background:#222736;border:1px solid #2f3546;border-radius:10px;padding:10px 16px}button:hover:not(:disabled){border-color:#5865f2}button:disabled{opacity:.45;cursor:not-allowed}.segmented{flex-wrap:wrap;gap:8px;display:flex}.segmented button.active{color:#fff;background:#5865f2;border-color:#5865f2}.options{gap:8px;display:grid}.option{cursor:pointer;border:1px solid #2f3546;border-radius:10px;align-items:center;gap:12px;padding:10px 14px;display:flex}.option.active{background:#1f2340;border-color:#5865f2}.option span{flex-direction:column;display:flex}.option small{color:#8a91a5}.hint{color:#8a91a5;margin:8px 0;font-size:.85rem}.controls{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.record{color:#fff;background:#c62f3c;border-color:#c62f3c;font-weight:600}.stop{color:#111;background:#e6e8ee;font-weight:600}.primary{color:#fff;background:#5865f2;border-color:#5865f2;font-weight:600}.timer{font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:1.4rem;display:flex}.dot{background:#e5484d;border-radius:50%;width:10px;height:10px;animation:1s infinite blink}@keyframes blink{50%{opacity:.2}}.meter{background:#262b3a;border-radius:4px;flex:1;min-width:120px;height:8px;overflow:hidden}.meter div{background:linear-gradient(90deg,#3ecf8e,#f5c542 70%,#e5484d);height:100%;transition:width 60ms linear}.row{gap:8px;margin-top:14px;display:flex}.result{flex-direction:column;gap:8px;margin-top:16px;display:flex}.result audio{width:100%}.result a{color:#8b95ff;font-size:.9rem}.error{color:#ff8a8a;background:#3a1c22;border-radius:10px;padding:10px 14px}.filename{color:#8a91a5;flex-direction:column;gap:6px;margin-top:14px;font-size:.85rem;display:flex}.filename-input{background:#11141b;border:1px solid #2f3546;border-radius:10px;display:flex;overflow:hidden}.filename-input:focus-within{border-color:#5865f2}.filename-input input{min-width:0;font:inherit;color:#e6e8ee;background:0 0;border:0;outline:none;flex:1;padding:10px 12px;font-size:1rem}.filename-input .ext{color:#8a91a5;background:#1b1f2b;padding:10px 12px;font-size:1rem}.background{flex-direction:column;gap:6px;margin-top:14px;display:flex}.field-label{color:#8a91a5;font-size:.85rem}.background-row{align-items:center;gap:14px;display:flex}.thumb{color:#4b5266;background:#000;border:1px solid #2f3546;border-radius:8px;flex:none;justify-content:center;align-items:center;width:112px;height:63px;font-size:.8rem;display:flex;overflow:hidden}.thumb img{object-fit:contain;width:100%;height:100%}.background-info{flex-direction:column;gap:8px;min-width:0;display:flex}.background-name{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.row.tight{margin-top:0}label.button{cursor:pointer;background:#222736;border:1px solid #2f3546;border-radius:10px;padding:10px 16px}label.button:hover{border-color:#5865f2}label.button.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.result video{background:#000;border-radius:10px;width:100%;max-height:360px}