[hidden]{display:none!important}
#open-reel{display:flex;gap:9px;align-items:center;border:1px solid #5b417d;background:#2b2045;border-radius:9px;padding:10px 17px;color:#f2eafb}#open-reel:hover{background:#3b2a59}#open-reel span{display:inline}
.reel-dialog{width:min(660px,calc(100vw - 28px));max-height:94dvh;padding:20px;background:#10121c;border-color:#363040;overflow:auto}.reel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.reel-heading h2{font-size:20px;font-weight:600}.reel-heading .icon-button{padding:5px}.reel-layout{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:24px;align-items:start}.reel-preview-frame{aspect-ratio:9/16;position:relative;background:#080b12;border:1px solid #2b2736;border-radius:8px;overflow:hidden}.reel-preview-frame canvas,.reel-preview-frame video{display:block;width:100%;height:100%;object-fit:contain}.reel-preview-frame video{position:absolute;inset:0;background:#080b12}.reel-preview-transport{display:flex;align-items:center;gap:9px;margin-top:7px;height:32px}.reel-preview-transport .icon-button{padding:5px}.reel-preview-transport svg{width:16px;height:16px}.reel-preview-transport input{margin:0;flex:1;min-width:0}.reel-preview-transport output{font-size:10px;color:#aaa4b7;font-variant-numeric:tabular-nums;min-width:32px}.reel-options{min-width:0;display:flex;flex-direction:column;align-self:stretch}.reel-song{font-size:14px;font-weight:550;line-height:1.4;margin-bottom:15px;overflow-wrap:anywhere}.reel-time-fields,.reel-output-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reel-options label{margin:0 0 12px;font-size:11px;color:#aaa4b7}.reel-options input[type=text],.reel-options select{display:block;margin-top:6px;background:#171824;border-color:#393143;padding:10px;font-size:13px;color:#f1edf6;min-height:40px}.reel-time-fields input{font-variant-numeric:tabular-nums}.reel-output-fields{margin-top:18px}.reel-output-fields select{padding-right:4px;font-size:12px}.reel-lengths{display:flex;align-items:center;gap:6px}.reel-lengths button{font-size:11px;padding:5px 9px;border-color:#34303f;border-radius:5px;color:#b7b0c2}.reel-lengths output{margin-left:auto;white-space:nowrap;font-size:10px;color:#aaa4b7}.reel-options .reel-sound-label{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px;padding-top:9px;font-size:12px;color:#e6deef}.reel-export-area{margin-top:auto;padding-top:18px}.reel-export-button{width:100%;background:#b99ae5;color:#150d22;border-color:#b99ae5;font-size:13px;font-weight:600;padding:12px}.reel-export-button:hover{background:#cbb0ef}.reel-export-area .status{font-size:11px;min-height:18px;line-height:1.4;margin-bottom:8px}.reel-export-area progress{display:block;width:100%;height:4px;margin-bottom:10px;accent-color:#bb98eb}.reel-download{display:block;text-align:center;padding:11px;margin-top:8px;border:1px solid #4b3b63;border-radius:7px;font-size:12px;color:#ddc3ff}.reel-options [aria-invalid=true]{border-color:#d78a9b!important}
.song-loading{width:min(350px,calc(100vw - 40px));padding:24px;background:#11131e;border-color:#393241}.song-loading::backdrop{background:#080910a8;backdrop-filter:blur(12px)}.song-loading h2{font-size:18px;margin-bottom:9px}.song-loading #song-loading-name{font-size:12px;line-height:1.45;color:#b6afc2;min-height:18px}.song-loading progress{display:block;width:100%;height:4px;accent-color:#ba99e7;margin:23px 0 13px}.song-loading #song-loading-phase{font-size:11px;color:#b7a9c7}.song-loading button{display:block;margin:19px 0 0 auto;font-size:11px;padding:7px 12px}.song-loading:focus{outline:none}
@media(max-width:620px){.reel-dialog{padding:16px;width:calc(100vw - 20px);max-height:96dvh}.reel-heading{margin-bottom:10px}.reel-layout{grid-template-columns:1fr;gap:13px}.reel-preview-column{width:min(100%,calc(39dvh * 9 / 16));margin:auto}.reel-song{font-size:12px;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reel-output-fields{margin-top:12px}.reel-options label{margin-bottom:8px}.reel-options input[type=text],.reel-options select{font-size:16px;padding:8px;min-height:39px}.reel-options .reel-sound-label{margin:0}.reel-export-area{padding-top:4px}.reel-export-area .status:empty{display:none}.reel-lengths output{font-size:11px}.reel-output-fields{grid-template-columns:1.4fr 1fr}#open-reel{padding:8px 11px;gap:6px;font-size:12px}#open-reel svg{width:18px;height:18px}}
@media(prefers-reduced-motion:no-preference){.reel-dialog[open]{animation:reel-in .16s ease-out}@keyframes reel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}

body:has(dialog[open]){overflow:hidden}.reel-dialog{scrollbar-width:thin;scrollbar-color:#51445e transparent}.reel-sound-label input:checked+.switch{background:#b99ae5}