:root{color-scheme:dark;--bg:#151914;--bar:#10140f;--panel:#1d231b;--field:#171d16;--line:#364331;--ink:#eaf0e5;--muted:#a8b8a3;--signal:#def4a3;--active:#303f29;font:14px/1.45 system-ui,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
body,h1,h2,p{margin:0}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button,select,input:not([type=range]),textarea{border:1px solid var(--line);border-radius:7px;background:var(--field);padding:7px 9px;min-width:0}
button,select{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
button:not(:disabled):hover{border-color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
button.primary{background:var(--signal);border-color:var(--signal);color:#172012;font-weight:700}
h2{font-size:1rem}
small,#scope,#status,#timeline-caption{color:var(--muted)}
.logo{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--signal);color:#182313;font-size:18px;flex:none}
#login{width:min(340px,calc(100% - 40px));margin:13vh auto;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
#login h1{letter-spacing:-.065em;font-size:27px}
#login p{margin:6px 0;color:var(--muted)}
#login form,dialog label{display:grid;gap:8px;margin-top:12px}
#studio{display:grid;position:relative;min-height:100dvh;grid-template-columns:minmax(0,1fr) minmax(270px,30%);grid-template-rows:auto minmax(300px,1fr) auto auto auto;grid-template-areas:'head head' 'stage chat' 'timeline chat' 'drawer chat' 'status status'}
#studio[data-chat=false]{grid-template-columns:1fr;grid-template-areas:'head' 'stage' 'timeline' 'drawer' 'status'}
header{grid-area:head;display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--bar);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:7px;font-size:23px;letter-spacing:-.075em}
.project-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-back{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;color:var(--ink);text-decoration:none}
.project-back:hover{border-color:var(--signal)}
#library{min-height:100dvh;background:radial-gradient(ellipse at 20% 0,#202d1c,var(--bg) 62%)}
#library header{padding-inline:max(16px,calc((100% - 1180px)/2))}
.library-workspace{flex:1;margin-left:8px;color:var(--muted);font-size:12px}
.library-content{width:min(1180px,calc(100% - 40px));margin:auto;padding:clamp(30px,7vw,75px) 0}
.library-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.library-eyebrow{color:var(--signal);letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:700}
.library-heading h1{margin-top:5px;font-size:clamp(33px,6vw,56px);letter-spacing:-.055em;line-height:1.06}
#library-count{margin-top:8px;color:var(--muted)}
#library-status:not(:empty){margin-bottom:18px;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.project-card{display:block;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none}
.project-card:hover{border-color:var(--signal)}
.project-cover{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(ellipse at 45% 80%,#405635,transparent 70%),#232e22}
.project-cover::before{content:'✧';font-size:38px;color:#a3bc7f;opacity:.45}
.project-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-cover span{position:absolute;top:10px;right:10px;padding:3px 7px;border-radius:5px;background:#10140feb;color:var(--ink);font:11px monospace}
.project-detail{padding:13px 14px 14px}
.project-detail h2{overflow-wrap:anywhere;line-height:1.25}
.project-detail p,.project-detail time{display:block;color:var(--muted);font-size:12px;margin-top:4px}
#library-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:52px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
#library-empty h2{color:var(--ink)}
#new-project-dialog{width:360px}
#new-project-error:not(:empty){margin-top:9px;color:#ffb5a4}
.stage{grid-area:stage;display:grid;grid-template-rows:1fr auto;min-width:0}
.monitor{position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#253728,#0e140f 72%);min-height:330px;padding:17px;overflow:hidden}
.monitor-label{position:absolute;top:10px;left:12px;color:var(--muted);font:11px monospace;text-transform:uppercase;z-index:1}
#canvas{height:min(100%,58vh);min-height:200px;aspect-ratio:9/16;max-width:100%;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#1c281d}
#canvas[data-format="16:9"],#canvas[data-format="landscape"]{height:auto;width:min(100%,800px);aspect-ratio:16/9}
#canvas[data-format="1:1"]{height:auto;width:min(100%,52vh);aspect-ratio:1}
#canvas[data-format="4:5"],#canvas[data-format="portrait"]{aspect-ratio:4/5}
#canvas :is(img,video){position:absolute;width:100%;height:100%;object-fit:cover}
#preview-caption{position:absolute;inset:auto 8px 13%;font:400 clamp(19px,3vw,36px)/1 Georgia,serif;text-align:center;text-wrap:balance;text-shadow:0 1px 8px black}
#empty-preview{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;color:var(--muted)}
.transport{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 12px;background:var(--bar);font:11px monospace}
input[type=range]{width:100%;accent-color:var(--signal);min-width:0}
.timeline{grid-area:timeline;padding:12px 15px;background:var(--bar);border-top:1px solid var(--line)}
.timeline-header,.drawer-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.timeline-header h2,.drawer-head h2{flex:1}
#clips,#assets{display:flex;gap:5px;overflow:auto;min-width:0}
#clips button{flex:1 0 80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-height:49px;background:linear-gradient(#202c22,#121914);text-align:left}
#clips button[aria-pressed=true]{border-color:var(--signal);background:var(--active)}
#timeline-caption{font-size:11px;margin-top:5px}
#storyboard{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;font-size:13px}
#storyboard summary{cursor:pointer}
#continuity{color:var(--muted);white-space:pre-line;margin:8px 0}
#scenes{max-height:11rem;overflow:auto}
#scenes ol{padding-left:22px;margin:4px 0 8px}
.drawer{grid-area:drawer;padding:12px 15px;background:var(--panel);border-top:1px solid var(--line)}
.tool-fields{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.tool-fields label{display:grid;gap:4px;font-size:11px}
.tool-fields input[type=number]{width:70px}
.clip-actions{align-self:end;display:flex;gap:4px;flex-wrap:wrap}
.upload{font-size:11px}
#chat{grid-area:chat;display:flex;flex-direction:column;min-width:0;background:var(--panel);border-left:1px solid var(--line);padding:14px;gap:10px}
.chat-head{display:flex;align-items:center;gap:8px}
.chat-head button{margin-left:auto}
.chat-head small{font-size:10px}
#conversation{flex:1;min-height:70px;max-height:440px;display:flex;flex-direction:column;gap:7px;overflow:auto;overflow-wrap:anywhere}
#conversation p{max-width:95%;background:var(--field);border:1px solid var(--line);border-radius:4px 9px 9px;padding:8px}
#conversation p.mine{background:var(--active);align-self:end}
#conversation .chat-reference{max-width:95%;max-height:160px;object-fit:contain;align-self:start;border-radius:6px}
#chat-attachments{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#chat-attachments input{max-width:100%}
.composer{display:grid;gap:7px;border:1px solid var(--line);border-radius:8px;padding:9px;background:var(--field)}
.composer textarea{width:100%;resize:vertical}
.pickers,.composer-actions{display:flex;gap:5px;flex-wrap:wrap}
.pickers select,.composer-actions button{font-size:12px}
.composer-actions{justify-content:space-between}
#scope{font-size:11px}
#chat-launch,#review{display:none}
#status{grid-area:status;padding:6px 15px;border-top:1px solid var(--line);font-size:12px}
dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;max-width:calc(100% - 30px)}
dialog::backdrop{background:#080d08bb}
dialog div{display:flex;justify-content:end;gap:5px;margin-top:14px}
@media(max-width:680px){
  #studio,#studio[data-chat=false]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(260px,1fr) auto auto auto auto;grid-template-areas:'head' 'stage' 'timeline' 'drawer' 'dock' 'status'}
  header{padding:8px;gap:4px}
  .brand{font-size:19px}
  .project-title{font-size:12px}
  .project-back{min-height:38px;padding-inline:6px}
  .project-back span:last-child{display:none}
  .library-content{width:calc(100% - 28px)}
  .library-heading{align-items:start;flex-direction:column}
  header button{padding-inline:5px}
  #chat-toggle{display:none}
  .monitor{min-height:290px}
  #canvas{height:min(41vh,320px)}
  #chat-launch{grid-area:dock;display:block;position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:1;margin:8px;text-align:left;background:var(--active)}
  #chat-launch[aria-expanded=true]{visibility:hidden}
  #chat-launch span{float:right}
  #chat{position:fixed;z-index:2;bottom:0;inset-inline:0;max-height:min(68dvh,470px);overflow:auto;border-radius:16px 16px 0 0;border-top:1px solid var(--line);box-shadow:0 -12px 30px #0008}
  #conversation{min-height:40px;max-height:140px}
  #review:not([hidden]){display:block}
}
@media(pointer:coarse){button,select{min-height:44px}.composer textarea{font-size:16px}}