:root{color-scheme:dark;--bg:#0c0b10;--border:#2a2535;--muted:#a29aad;--purple:#ad89ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 0,#26153a66,transparent 40%),var(--bg);color:#f5f2fc;font:14px 'DM Sans',system-ui,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #bd9cff}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}[hidden]{display:none!important}header{height:88px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:24px;padding:0 4vw}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:white;letter-spacing:1px}.brand>b{font:600 25px 'DM Sans',sans-serif;background:linear-gradient(135deg,#c79cff,#7441e9);width:43px;height:43px;display:grid;place-items:center;border-radius:12px;color:#1a0c2c}.brand span{font-weight:700;font-size:17px}.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:3px}.private{margin-left:auto;color:var(--muted);font-size:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:10px 15px;border:1px solid #3b314b;border-radius:9px;color:#f5f2fc;background:#25202f;text-decoration:none;font-weight:600;white-space:nowrap}.button:hover:not(:disabled){background:#3b2b53;border-color:#8260ae}.button.primary{background:var(--purple);color:#160b2e;border-color:var(--purple)}.button.primary:hover:not(:disabled){background:#c6aaff}.button.subtle{background:transparent;color:#c0b5d0}.button.danger{color:#ffb7c4}main{max-width:1500px;margin:auto;padding:46px 4vw 50px}.hero{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:38px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--purple);margin:0 0 14px}h1{font:600 clamp(32px,3.4vw,49px)/1.12 'DM Sans',sans-serif;letter-spacing:-1.8px;margin:0 0 16px}h1 span{color:#bba0e7}.hero p:not(.eyebrow){color:var(--muted);line-height:1.65;margin:0}.daily{min-width:235px;border:1px solid var(--border);border-radius:16px;padding:24px;background:linear-gradient(140deg,#241a33,#15111d)}.daily strong{font:500 47px 'DM Sans',sans-serif;display:block}.daily strong span{font-size:24px;color:#877696}.daily>span{color:var(--muted);font-size:12px}.daily progress{margin-top:16px;height:5px}progress{accent-color:var(--purple);border:0;border-radius:5px;background:#302738;width:100%;height:6px}progress::-webkit-progress-bar{background:#302738;border-radius:5px}progress::-webkit-progress-value{background:var(--purple);border-radius:5px}.layout{display:grid;grid-template-columns:305px minmax(0,1fr);gap:22px;align-items:start}.panel{border:1px solid var(--border);border-radius:15px;background:#15131c}.recipe{padding:24px}.section-label{display:flex;gap:10px;align-items:center}h2{font:600 17px 'DM Sans',sans-serif;margin:0}.step{display:grid;place-items:center;width:25px;height:25px;border:1px solid #544366;color:#bd9ce8;font-size:11px;border-radius:8px}.muted,.hint{color:var(--muted)}.hint{font-size:12px;line-height:1.6;margin:8px 0 17px}.muted{font-size:12px;margin:10px 0 24px}label{display:block;font-weight:500;margin-top:20px;font-size:13px}select{display:block;width:100%;padding:11px 9px;margin-top:8px;border:1px solid #393143;border-radius:8px;background:#1c1725;color:#eee6f9;font-size:12px}.check{display:flex;align-items:flex-start;gap:10px;line-height:1.5}.check input{accent-color:var(--purple);width:16px;height:16px;margin:2px 0 0;flex-shrink:0}.check small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}output{float:right;color:var(--purple)}input[type=range]{width:100%;accent-color:var(--purple);margin:13px 0 0}.recipe-note{margin-top:23px;border-top:1px solid var(--border);padding-top:18px;color:var(--muted);font-size:12px;line-height:1.7}.recipe-note b{color:#cdb4ef}.batch{padding:25px;min-height:655px}.batch-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:10px}#queue-count{color:#b7a1d0;font-size:12px;background:#30243e;padding:3px 7px;border-radius:5px;margin-left:6px}.drop{width:100%;border:1px dashed #605071;border-radius:12px;background:linear-gradient(110deg,#241a33,#1c1626);padding:27px 12px;display:flex;align-items:center;flex-direction:column;gap:9px;color:#f5f2fc}.drop:hover,.drop.over{background:#30213f;border-color:#bb8fff}.upload-icon{width:38px;height:38px;border-radius:10px;background:#38224f;color:#c8a4ff;font-size:27px;margin-bottom:4px}.drop>span:not(.upload-icon){color:var(--muted);font-size:12px}.drop small{color:#a28ab6;font-size:11px}.empty{padding:46px 0 36px;text-align:center}.empty-steps{display:flex;justify-content:center;align-items:center;gap:24px;color:#ae8dd4}.empty-steps span{font-size:26px}.empty-steps b{display:block;font-size:12px;font-weight:500;color:#c4b8d3;margin-top:12px}.empty-steps i{font-style:normal;color:#61516f}.empty p{color:#9d8ca9;font-size:12px;margin-top:26px}.jobs{display:grid;gap:10px;max-height:510px;overflow:auto;margin:16px 0}.job{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:12px;background:#1b1722}.job img{width:52px;height:65px;object-fit:cover;border-radius:6px;background:#2b2039}.job-title{width:100%;border:0;color:white;background:transparent;font-size:13px;padding:3px 0}.job-title:focus{background:#302039}.job-info{min-width:0}.job-meta{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.6;overflow-wrap:anywhere}.job-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:210px}.job-actions .button{font-size:11px;padding:7px 10px;min-height:31px}.job.error{border-color:#8a465d}.job.ready{border-color:#514068}.job.done{border-color:#366252}.badge{color:#be97f8;font-weight:600}.job.done .badge{color:#8dd8ba}.job.error .badge{color:#ffb0b5}.batch-actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:20px;margin-top:12px}.status{font-size:12px;color:#cbb8df;margin:15px 0;line-height:1.6;overflow-wrap:anywhere}.export-footer{display:flex;justify-content:space-between;margin-top:18px;gap:8px}.footer-note{margin-bottom:0;font-size:11px}dialog{background:#17121f;color:#f5f2fc;border:1px solid #514060;border-radius:16px;padding:24px;width:min(900px,96vw);max-height:95dvh}dialog::backdrop{background:#030107c9;backdrop-filter:blur(6px)}.review-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:22px}.review-head h2{overflow-wrap:anywhere}.review-grid{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:26px}.monitor{display:flex;flex-direction:column;gap:10px;align-items:center}.monitor canvas{width:100%;max-height:62vh;object-fit:contain;background:#050406;aspect-ratio:9/16;border-radius:8px}.caption-editor h3{margin-top:0;font-size:15px}textarea{display:block;width:100%;height:300px;background:#0e0b13;color:white;border:1px solid #443450;border-radius:9px;padding:14px;resize:vertical;line-height:1.6;font-size:13px;margin-bottom:15px}#review-status{color:#c5a7ed;font-size:12px}body.working .recipe{opacity:.65}body.working .drop{opacity:.5}@media(max-width:950px){main{padding:30px 20px}.layout{grid-template-columns:260px minmax(0,1fr);gap:16px}.recipe,.batch{padding:18px}.job{grid-template-columns:42px minmax(0,1fr)}.job img{width:42px;height:56px}.job-actions{grid-column:2;justify-content:flex-start;max-width:none}.private{display:none}header .button{margin-left:auto}.daily{min-width:200px}.empty-steps{gap:12px}}@media(max-width:650px){header{height:72px;padding:0 18px;gap:10px}header .button{font-size:11px;padding:9px}.brand span{font-size:14px}.hero{align-items:flex-start;margin-bottom:24px}.hero p:not(.eyebrow){font-size:13px}.hero p br{display:none}.daily{min-width:95px;padding:14px}.daily strong{font-size:31px}.daily strong span{font-size:17px}.daily>span{font-size:10px;display:block;max-width:85px}h1{font-size:31px;letter-spacing:-1px}.eyebrow{font-size:9px}.layout{grid-template-columns:1fr}.recipe{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.recipe>.section-label,.recipe>.muted,.recipe>.recipe-note,.recipe>#music-name{grid-column:1/-1}.recipe>.muted{margin-bottom:0}.recipe>label{min-width:0}.recipe>p.hint:not(#music-name){display:none}.batch{min-height:550px}.empty-steps{gap:10px}.empty-steps b{font-size:10px}.review-grid{grid-template-columns:1fr}.monitor canvas{max-height:40vh;width:auto;max-width:100%}textarea{height:190px}.batch-actions .button{flex-grow:1}.daily progress{margin-top:10px}.drop strong{font-size:13px}.drop>span:not(.upload-icon){font-size:11px}main{padding:26px 15px}.review-head{margin-bottom:12px}.export-footer .button{font-size:11px}}
/* Keep the queue and its main actions in the first desktop viewport. */
main{padding-top:26px}.hero{margin-bottom:24px}.hero h1{font-size:34px;letter-spacing:-1px}.daily{padding:16px 22px}.daily strong{font-size:34px}.empty{padding:28px 0 18px}label,select,.job-title,.job-actions .button{font-size:14px}.hint,.job-meta,.status,.check small,.drop small,.recipe-note,.footer-note,.private,.muted{font-size:12px}.brand small{font-size:10px}.empty-steps b{font-size:14px}
@media(max-width:650px){.hero h1{font-size:27px}.daily{padding:12px;min-width:90px}.daily strong{font-size:28px}.recipe{display:block}.recipe>p.hint:not(#music-name){display:block}.job-actions .button{font-size:12px}.drop small{text-align:center}.empty-steps b{font-size:12px}}
@font-face{font-family:'DM Sans';src:url('./fonts/DM-Sans.ttf') format('truetype');font-weight:100 1000;font-display:swap}@font-face{font-family:'DM Sans';src:url('./fonts/DM-Sans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'DM Sans';src:url('./fonts/DM-Sans-Bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
.monitor #rendered-preview{width:100%;max-height:62vh;aspect-ratio:9/16;background:#050406;border-radius:8px}
#choose-music,#apply-music{font-size:12px;white-space:normal;width:100%;margin-top:8px}
@media(max-width:650px){.monitor #rendered-preview{max-height:50vh}}

.look-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-bottom:18px}.look-controls label{min-width:0;font-size:12px}.look-controls input[type=color]{display:block;width:100%;height:32px;margin-top:8px;border:1px solid #514060;border-radius:7px;background:#211a28}.look-controls .check{grid-column:1/-1}.recipe>.look-controls{grid-column:1/-1}.monitor #rendered-preview{width:100%;max-height:62vh;object-fit:contain;background:#050406;border-radius:8px}.monitor{align-self:start}.caption-editor h3{margin-top:18px}

@font-face{font-family:"Prisma Editorial";src:url("./fonts/Prisma-Editorial.ttf") format("truetype");font-weight:400;font-display:swap}@font-face{font-family:"DM Sans";src:url("./fonts/DM-Sans-BoldItalic.ttf") format("truetype");font-style:italic;font-weight:600 900;font-display:swap}

.saved-formula{grid-column:1/-1;margin:16px 0;padding:12px;border:1px solid #443450;border-radius:8px}.saved-formula summary{cursor:pointer;color:#cbb8df}.saved-formula input,.caption-timing-tools input{display:block;width:100%;background:#1c1725;color:#eee6f9;border:1px solid #443450;border-radius:7px;padding:9px;margin:8px 0}.saved-formula .button{margin-top:10px}.preview-frame{position:relative;width:100%;line-height:0}.preview-frame canvas{display:block}.preview-frame:has(canvas[hidden]) #safe-overlay{display:none}#safe-overlay{position:absolute;inset:12% 17% 23% 8%;border:2px dashed #dcc5ea;box-shadow:0 0 0 999px #13081e55;clip-path:inset(-200% -200%);pointer-events:none;line-height:1.3} .preview-frame{overflow:hidden;border-radius:8px}#safe-overlay span{display:block;padding:5px;background:#251530a8;color:white;font-size:10px}.caption-timing-tools{margin:12px 0}.caption-timing-tools label{margin-top:4px}.monitor>.hint{margin:0;font-size:10px}.monitor>.check{margin:0}.monitor .preview-frame canvas{max-height:none}.preview-frame{max-width:min(100%,34.875vh)}
@media(min-width:651px){.monitor{position:sticky;top:0}}@media(max-width:650px){.preview-frame{max-width:min(100%,22.5vh)}}

/* A single working surface; optional settings stay collapsed. */
.layout{display:flex;flex-direction:column;max-width:1000px;margin:auto;gap:16px}.layout>.batch{order:0;width:100%;min-height:0}.layout>.recipe{order:1;width:100%;padding:0;opacity:1}.customize-summary{padding:20px 24px;cursor:pointer;font-size:16px;font-weight:600}.customize-summary span{font-weight:400;color:var(--muted);font-size:14px;margin-left:12px}.settings-content{padding:0 24px 24px;max-width:680px}.recipe:not([open])>.settings-content{display:none}.hero{max-width:1000px;margin:0 auto 24px}.hero .eyebrow{display:none}.hero h1{font-size:30px}.hero .daily{min-width:140px}.daily>span{font-size:12px}.hero p:not(.eyebrow){font-size:16px}.export-settings{margin:12px 0}.export-settings>summary{font-size:14px;color:var(--muted);cursor:pointer}.drop{padding:30px 18px}.drop strong{font-size:18px}.drop>span:not(.upload-icon){font-size:14px}.batch-actions{margin-top:18px}.empty p{font-size:14px}.settings-content label,.settings-content select,.settings-content .look-controls label{font-size:14px}.recipe .recipe-note{font-size:14px}@media(max-width:650px){.layout>.recipe{display:block}.hero{display:block}.hero .daily{display:none}.hero h1{font-size:27px}.customize-summary span{display:block;margin:6px 0 0}.settings-content{padding:0 18px 18px}.empty-steps{gap:12px}.empty-steps b{font-size:12px}}

#caption-simple{display:grid;gap:10px;max-height:44vh;overflow-y:auto;margin:16px 0}.caption-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;align-items:start}.caption-row textarea{height:72px;min-height:52px;margin:0;padding:10px;font:400 16px/1.45 "DM Sans",sans-serif;resize:vertical}.caption-row .button{font-size:14px;padding:10px 5px}.caption-editor>details>summary{cursor:pointer;font-size:14px;color:#cbb8df;padding:12px 0}.caption-editor #caption-advanced{margin-bottom:16px}.caption-row textarea:invalid{border-color:#ff8899}#save-captions,#undo-captions,#download-srt{margin:4px 4px 4px 0}

.prisma-logo{width:58px;height:58px;object-fit:contain;border-radius:10px;flex-shrink:0;background:white}@media(max-width:650px){.prisma-logo{width:46px;height:46px}}