@font-face{font-family:Manrope;src:url('/static/fonts/manrope-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('/static/fonts/manrope-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('/static/fonts/manrope-500.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Manrope;src:url('/static/fonts/manrope-800.ttf') format('truetype');font-weight:800;font-display:swap}
:root{color-scheme:dark;--bg:#0c100d;--surface:#131914;--lime:#d5ff60;--ink:#f5f5ee;--muted:#b8beb7;--line:#293129}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:500 14px/1.5 Manrope,Arial,sans-serif}button,input,textarea,select{font:inherit}button,a,label.upload,summary{touch-action:manipulation}button,a,select{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button{border:0}img{display:block}h1,h2,p{margin:0}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}
.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 40px;gap:0}.brand{font-size:20px;font-weight:800;letter-spacing:-.7px;width:260px;flex:none}.topbar nav{display:flex;align-self:stretch;gap:38px}.nav-item{position:relative;background:none;padding:0;font-size:13px;color:var(--muted)}.nav-item.active{color:var(--ink);font-weight:800}.nav-item.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--lime)}.prototype-label{margin-left:auto;color:var(--muted);font-size:12px}.workspace{display:grid;grid-template-columns:30.7% 1fr;min-height:calc(100vh - 64px)}.settings{border-right:1px solid var(--line);padding:40px 30px 14px 40px}.settings h1{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.25}.intro{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.55}.mode-switch{display:flex;border:1px solid var(--line);border-radius:40px;margin:22px 0 20px;padding:2px}.mode-switch button{height:46px;flex:1;background:transparent;border-radius:30px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px}.mode-switch button.selected{color:#101609;background:var(--lime);font-weight:800}.mode-switch img,.secondary img,.primary img,.upload img,.icon-button img{width:21px;height:21px;filter:invert(94%) sepia(4%) saturate(254%) hue-rotate(22deg)}.mode-switch .selected img,.primary img{filter:none}.field-label,legend{display:block;font-size:14px;font-weight:700;margin:0 0 10px}.prompt-wrap{position:relative;margin-bottom:20px}textarea,select{width:100%;color:var(--ink);border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 16px;line-height:1.55;font-size:13px}textarea{resize:vertical;min-height:70px}.prompt-wrap textarea{height:118px;min-height:118px;padding-bottom:32px;display:block}.counter{position:absolute;right:15px;bottom:11px;color:#929c91;font-size:10px;pointer-events:none}.reference-heading{display:flex;justify-content:space-between;align-items:center}.field-label small{font-weight:500;color:var(--muted);font-size:12px}.reference-row{display:flex;gap:12px;margin-bottom:20px}.reference-row>img{width:106px;height:112px;object-fit:cover;border-radius:11px}.upload{position:relative;width:140px;min-height:112px;border:1px dashed #3a4439;border-radius:11px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;font-size:11px;cursor:pointer;color:var(--muted)}.upload:hover,.reference-row.dragging .upload{border-color:var(--lime);color:var(--lime)}.upload:focus-within{outline:2px solid var(--lime);outline-offset:3px}.upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload img{width:24px;height:24px}.text-button{background:none;color:var(--muted);font-size:11px;text-decoration:underline}.formats{border:0;padding:0;margin:0 0 18px;min-width:0}.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.format-grid label{position:relative;cursor:pointer}.format-grid input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.format-grid span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px 10px;background:var(--surface);border:1px solid transparent;border-radius:11px;font-size:12px}.format-grid img{width:21px;height:21px;filter:invert(95%)}.format-grid input:checked+span{border-color:var(--lime);color:var(--lime)}.format-grid input:checked+span img{filter:invert(94%) sepia(39%) saturate(951%) hue-rotate(22deg)}.format-grid input:focus-visible+span{outline:2px solid var(--lime);outline-offset:3px}select{height:48px;padding-right:35px;appearance:auto;background-image:none}.advanced{margin:16px 0 18px}.advanced summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--muted);font-size:13px;padding:2px 0}.advanced summary::-webkit-details-marker{display:none}.advanced summary img{width:18px;filter:invert(85%)}.advanced[open] summary{margin-bottom:18px}.advanced[open] summary img{transform:rotate(180deg)}.advanced p{color:var(--muted);font-size:11px;margin-top:8px}.primary{background:var(--lime);color:#111709;min-height:50px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800}.generate{width:100%;font-size:13px}.primary:hover{background:#e2ff92}.demo-note{margin-top:4px;font-size:10px;text-align:center;color:#939d92;line-height:1.5}.results{padding:48px 40px 28px 38px;min-width:0}.eyebrow{font-size:13px;color:var(--lime);margin:0 0 5px}.results h2{font-size:36px;line-height:1.3;letter-spacing:-1.1px;font-weight:800}.result-description{font-size:13px;color:var(--muted);margin:7px 0 29px;line-height:1.5}.result-grid{display:grid;grid-template-columns:minmax(0,3.07fr) minmax(0,1fr);gap:20px;align-items:stretch}.preview-frame{position:relative;aspect-ratio:1;overflow:hidden;border-radius:14px;background:#171b16;border:1px solid var(--line);align-self:start;display:flex;align-items:center;justify-content:center}.main-image{width:100%;height:100%;object-fit:cover}.preview-frame[data-ratio='9:16']{aspect-ratio:9/16;max-height:min(650px,calc(100vh - 400px));width:auto;justify-self:center}.preview-frame[data-ratio='16:9']{aspect-ratio:16/9;align-self:center}.preview-frame[data-ratio='1:1']{max-height:min(860px,calc(100vh - 400px));width:auto;justify-self:center}.preview-frame[data-ratio='4:5']{aspect-ratio:4/5;max-height:min(730px,calc(100vh - 400px))}.thumbnails{display:flex;flex-direction:column;gap:12px}.thumbnail{position:relative;padding:0;border-radius:13px;overflow:hidden;background:var(--surface);border:1px solid transparent;flex:1;min-height:0;aspect-ratio:auto}.thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s}.thumbnail.selected{border-color:var(--lime);box-shadow:0 0 0 1px #d5ff6020}.thumbnail:hover img{opacity:.8}.result-actions{display:flex;gap:16px;margin-top:28px}.secondary{min-height:50px;padding:12px 30px;border:1px solid var(--line);border-radius:12px;background:#101510;display:flex;align-items:center;justify-content:center;gap:13px;font-size:13px;min-width:210px}.secondary:hover{border-color:#68765c;background:var(--surface)}.status{color:var(--muted);font-size:12px;margin-top:17px;min-height:18px}.duration-label{margin-top:18px}.error{color:#ffb5aa;font-size:12px;margin:-13px 0 20px}.loading-overlay{position:absolute;inset:0;background:#0c100ddd;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center}.loading-overlay>img{width:30px;filter:invert(90%);animation:pulse 1s infinite alternate}.loading-overlay button{background:none;text-decoration:underline;color:var(--muted);padding:12px}.overlay-hint{font-size:11px;color:var(--muted)}.main-video{width:100%;height:100%;object-fit:cover;background:#000}.reference-row.disabled{opacity:.45;pointer-events:none}.muted-note{color:var(--muted);font-size:11px;margin:-13px 0 12px}#reference-note{margin:0;color:#929c91;font-size:11px;margin-left:7px;font-weight:500}#reference-list{display:flex;flex-wrap:wrap;gap:10px}#reference-list:not(:empty){margin-bottom:20px}.ref-thumb{position:relative;width:86px;height:92px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}.ref-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ref-remove{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#0c100d99;color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}.ref-remove:hover{background:#ffb5aa;color:#101609}
@media(max-width:720px){.ref-thumb{width:78px;height:84px}}dialog{color:var(--ink);width:min(800px,calc(100vw - 32px));max-height:85vh;border:1px solid #45513e;border-radius:20px;background:var(--bg);padding:32px}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:24px}.dialog-heading h2{font-size:28px}.icon-button{background:var(--surface);padding:10px;border-radius:50%}.history-note{font-size:12px;color:var(--muted);margin-top:24px}#history-items{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.history-item{background:none;text-align:left;padding:0;border-radius:10px}.history-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.history-item strong,.history-item small{display:block;margin-top:7px}.history-item small{color:var(--muted);font-size:11px}.history-item p{margin-top:8px;font-size:12px;overflow-wrap:anywhere}.history-item:hover img{outline:1px solid var(--lime)}#history-count{color:var(--lime);font-size:10px;margin-left:4px}@keyframes pulse{to{opacity:.3}}
@media(min-width:1600px){.workspace{grid-template-columns:450px 1fr}.result-grid{max-width:1150px}.settings{padding-right:40px}}
@media(max-width:1100px){.topbar{padding-inline:24px}.brand{width:230px}.settings{padding:32px 22px}.results{padding:32px 24px}.workspace{grid-template-columns:330px 1fr}.results h2{font-size:29px}.result-grid{grid-template-columns:1fr}.thumbnails{flex-direction:row}.thumbnail{flex:0 1 90px;aspect-ratio:1}.result-actions{gap:10px;flex-wrap:wrap}.secondary{min-width:0;padding-inline:20px}.result-description{margin-bottom:22px}.format-grid{gap:8px}}
@media(max-width:720px){.topbar{height:64px;padding:0 18px;justify-content:space-between}.brand{font-size:17px;width:auto}.topbar nav{gap:16px}.nav-item{font-size:11px}.prototype-label{display:none}.workspace{display:flex;flex-direction:column}.settings{padding:28px 22px;border-right:0;border-bottom:1px solid var(--line)}.settings h1{font-size:27px}.intro br{display:none}.intro{font-size:13px}.mode-switch{margin-top:24px}.reference-row>img{height:100px;width:100px}.upload{min-height:100px}.prompt-wrap textarea{height:130px}.results{padding:28px 22px 40px}.results h2{font-size:29px}.result-description{font-size:12px}.result-grid{gap:14px}.thumbnail{flex:1;max-width:110px}.result-actions{gap:10px;margin-top:20px}.secondary{font-size:12px;flex:1;padding:12px;gap:7px;white-space:nowrap}.secondary img{width:18px}.preview-frame[data-ratio='9:16']{max-height:500px}.result-description{margin-top:8px}.demo-note{font-size:11px}.generate{min-height:52px}.format-grid span{padding:13px}.status{font-size:11px}#history-items{grid-template-columns:repeat(2,1fr)}dialog{padding:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* --- Video chat: interview that assembles the video prompt. Studio visual
   language only: the same surfaces, lines and lime accents. --- */
#video-chat{margin-bottom:24px}
.chat-messages{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:14px;scrollbar-width:thin;scrollbar-color:#3a4439 transparent}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb{background:#3a4439;border-radius:3px}
.msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.5;overflow-wrap:break-word;white-space:pre-wrap}
.msg.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.user{align-self:flex-end;background:#d5ff601f;border:1px solid #3a4439;border-bottom-right-radius:4px}
.msg.error{align-self:stretch;max-width:100%;background:transparent;border:1px solid #ffb5aa;color:#ffb5aa;font-size:12px}
.msg.typing{display:flex;gap:5px;padding:14px 16px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:chat-blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}
.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes chat-blink{0%,100%{opacity:.25}50%{opacity:1}}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:-2px}
.chip{padding:9px 14px;border:1px solid #3a4439;background:var(--surface);color:var(--muted);border-radius:20px;font-size:12px;line-height:1.4;text-align:left}
.chip:hover{border-color:var(--lime);color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.prompt-card{align-self:stretch;background:var(--surface);border:1px solid var(--lime);border-radius:12px;padding:13px}
.prompt-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prompt-card strong{font-size:13px;color:var(--lime)}
.prompt-card .words{color:var(--muted);font-size:11px;white-space:nowrap}
.prompt-card pre{margin:10px 0 11px;max-height:200px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px;font-size:11px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;font-family:Manrope,Arial,sans-serif}
.prompt-card .card-actions{display:flex;gap:9px}
.chat-composer{display:flex;gap:9px;align-items:flex-end;margin-top:12px}
.chat-composer textarea{flex:1;resize:none;min-height:46px;max-height:184px;padding:12px 14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a4439 transparent}
.chat-composer textarea::-webkit-scrollbar{width:6px}
.chat-composer textarea::-webkit-scrollbar-thumb{background:#3a4439;border-radius:3px}
.chat-composer textarea::-webkit-scrollbar-track{background:transparent}
.chat-send{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;background:var(--lime);color:#111709;border-radius:11px;padding:0}
.chat-send img{width:19px;height:19px}
.chat-send:hover{background:#e2ff92}
.chat-hint{margin:7px 0 0;color:#929c91;font-size:10px;display:flex;justify-content:space-between;align-items:baseline}
#chat-reset{padding:0}
@media(max-width:1100px){.chat-messages{max-height:300px}}
/* --- One-viewport budget: the settings column is height-locked to the
   viewport, and its flexible children (prompt textarea / interview chat)
   absorb the leftover space, so the page never grows a scrollbar on
   desktop screens of any normal height. Mobile stacks as before. --- */
.video-settings-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:721px){
  .settings{height:calc(100vh - 64px);display:flex;flex-direction:column;padding-top:28px}
  #studio-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .prompt-wrap{flex:1 1 auto;min-height:76px;display:flex;flex-direction:column}
  .prompt-wrap textarea{flex:1 1 76px;height:auto;min-height:76px;max-height:300px}
  /* Both tabs run the interview chat, so its flex layout is unconditional. */
  #studio-chat{display:flex;flex-direction:column;flex:1 1 auto;min-height:200px;margin-bottom:18px}
  .chat-messages{flex:1 1 auto;min-height:0;height:auto;max-height:none}
  .chat-composer{flex:none}
  .intro,.demo-note{display:none}
  .mode-switch{margin:20px 0 18px}
  .reference-row{margin-bottom:18px}
  .formats{margin-bottom:18px}
  .advanced{margin:14px 0 16px}
  .video-settings-row{margin-bottom:0}
  .reference-row>img{width:86px;height:92px}
  .upload{min-height:92px}
}
@media(max-width:720px){.settings{height:auto;display:block}#studio-form{display:block}.chat-messages{max-height:280px}}

/* --- Collapsible chat: the arrow between the log and the composer expands
   the chat over the generation blocks (reference, format, motion, duration,
   advanced) and hides them until it is collapsed again. On wide screens the
   height-locked column makes the log grow by itself once the blocks are
   hidden; on phones the expansion raises the log cap instead. */
.chat-expand{display:flex;align-items:center;justify-content:center;width:34px;height:26px;background:none;padding:0;margin:2px auto 0;color:var(--muted);border-radius:50%}
.chat-expand:hover{background:#ffffff12}
.chat-expand img{width:18px;height:18px;filter:invert(75%);transition:transform .2s}
.chat-expand:hover{color:var(--lime)}
.chat-expand:hover img{filter:invert(94%) sepia(39%) saturate(951%) hue-rotate(22deg)}
#studio-chat.expanded .chat-expand img{transform:rotate(180deg)}
@media(max-width:720px){#studio-chat.expanded .chat-messages{max-height:56vh}}