.composer{--composer-surface: #111;--composer-line: #303030;--composer-muted: #a0a0a0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"prompt prompt prompt" "references references references" "mode settings generate";align-items:center;gap:0 16px;padding:20px;border:1px solid var(--composer-line);border-radius:20px;background:var(--composer-surface)}.composer button,.composer select,.composer textarea{font:inherit}.composer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.composer button{cursor:pointer}.composer [hidden]{display:none!important}.composer .composer-label,.composer .setting-label{font-size:14px;font-weight:500;color:#bdbdbd}.composer .composer-prompt{grid-area:prompt}.composer .composer-prompt>.composer-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.composer textarea{display:block;width:100%;height:100px;padding:4px 4px 20px;resize:vertical;min-height:100px;max-height:300px;border:0;outline:none;background:transparent;color:#fff;font-size:18px;line-height:1.55;caret-color:var(--orange)}.composer textarea::placeholder{color:var(--composer-muted);opacity:1}.composer textarea:focus-visible{outline:none}.composer .composer-mode{grid-area:mode;display:flex;gap:2px;margin:0;padding:3px;border:1px solid #292929;border-radius:10px}.composer .composer-mode label{position:relative;cursor:pointer}.composer .composer-mode input{position:absolute;opacity:0;width:1px;height:1px}.composer .composer-mode span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 11px;border-radius:7px;font-size:14px;font-weight:500;color:var(--composer-muted);transition:background .18s ease-out,color .18s ease-out}.composer .composer-mode input:checked+span{background:#303030;color:#fff}.composer .composer-mode label:hover span{color:#fff}.composer .composer-mode input:focus-visible+span{outline:2px solid var(--orange);outline-offset:3px}.composer .composer-mode svg{width:16px;height:16px}.composer .composer-references{grid-area:references;margin-bottom:20px}.composer .reference-heading{display:none}.composer .reference-list,.composer .reference-previews{display:flex;align-items:center;gap:10px}.composer .reference-previews:empty{display:none}.composer .reference-add{display:flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border:1px dashed #444;border-radius:8px;color:#bdbdbd;background:transparent;font-size:14px!important}.composer .reference-add:hover{border-color:#888;color:#fff;background:#202020}.composer .reference-add:disabled{opacity:.45;cursor:default}.composer .reference-preview{position:relative;width:54px;height:54px}.composer .reference-preview img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid #444;border-radius:8px}.composer .reference-remove{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #555;border-radius:50%;background:#252525;color:#fff}.composer .reference-remove svg{width:12px;height:12px}.composer .reference-remove:hover{background:#444}.composer .composer-settings{grid-area:settings;display:flex;justify-content:flex-end;gap:16px}.composer .setting{display:flex;align-items:center;gap:7px}.composer .setting-label{font-size:13px;color:var(--composer-muted)}.composer .setting-control{position:relative;display:flex;align-items:center}.composer .setting select{appearance:none;min-height:44px;padding:0 19px 0 4px;border:0;border-radius:5px;background:transparent;color:#fff;font-size:14px;font-weight:500;cursor:pointer}.composer .setting select option{background:#1b1b1b;color:#fff}.composer .setting-control>svg:last-child{position:absolute;right:0;width:12px;height:12px;pointer-events:none;color:var(--composer-muted)}.composer .setting-control .ratio-icon,.composer .setting select[hidden]{display:none}.composer .setting-trigger{min-height:44px;padding:0 19px 0 4px;border:0;border-radius:5px;background:transparent;color:#fff;font:500 14px Barlow,sans-serif;cursor:pointer}.composer .setting-trigger:focus{outline:none}.composer .setting-trigger:focus-visible{outline:1px solid #ddd;outline-offset:3px}.composer .setting-control>svg:last-child{transition:transform .16s ease-out}.composer .setting-control:has(.setting-trigger[aria-expanded=true])>svg:last-child{transform:rotate(180deg)}.composer .setting-menu{position:fixed;inset:auto;margin:0;padding:6px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#555 #191919;border:1px solid #353535;border-radius:10px;background:#191919;color:#fff;box-shadow:0 12px 28px #00000059}.composer .setting-menu::-webkit-scrollbar{width:6px}.composer .setting-menu::-webkit-scrollbar-track{background:#191919}.composer .setting-menu::-webkit-scrollbar-thumb{background:#555;border-radius:6px}.composer .setting-menu::-webkit-scrollbar-thumb:hover{background:#777}.composer .setting-menu::backdrop{background:transparent}.composer .setting-option{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;min-height:44px;gap:16px;padding:10px 12px;box-sizing:border-box;border:0;border-radius:6px;background:transparent;color:#bdbdbd;text-align:left;white-space:nowrap;font:500 15px/1.4 Barlow,sans-serif;cursor:pointer}.composer .setting-option[aria-selected=true]{background:#303030;color:#fff}.composer .setting-option[aria-selected=true]:after{content:"";width:9px;height:5px;margin-left:12px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}.composer .setting-option+.setting-option{margin-top:3px}.composer .setting-option:not([aria-selected=true]):hover{background:#222;color:#fff}.composer .setting-option[aria-selected=true]:hover{background:#303030}.composer .setting-option:focus{outline:none}.composer .setting-option:focus-visible{outline:1px solid #ddd;outline-offset:-2px}.composer .generate-button{grid-area:generate;display:flex;align-items:center;justify-content:center;gap:20px;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--orange);color:#000;font-weight:600!important;transition:background .18s ease-out}.composer .generate-button:hover{background:#ff713e}.composer .generate-button:active{background:#ed4b11}.composer-status{min-height:20px;margin:14px 20px 0;color:#a0a0a0;font-size:14px;line-height:1.5;text-align:center}.composer-status.is-error{color:#ff9570}@media(min-width:761px)and (max-width:900px){.composer .setting{gap:3px}.composer .composer-settings{gap:10px}.composer{column-gap:12px}.composer .generate-button{gap:10px;padding:0 14px}}@media(max-width:760px),(max-width:1000px)and (pointer:coarse)and (hover:none){.composer{grid-template-columns:1fr;grid-template-areas:"mode" "prompt" "references" "settings" "generate";gap:28px;padding:0;border:0;border-radius:0;background:transparent}.composer .composer-mode{gap:4px;padding:4px;border-color:#252525;border-radius:12px;background:#111}.composer .composer-mode label{flex:1}.composer .composer-mode span{min-height:42px;font-size:16px;border-radius:8px}.composer .composer-mode svg{width:18px;height:18px}.composer .composer-prompt>.composer-label{position:static;display:block;width:auto;height:auto;clip-path:none;margin-bottom:10px}.composer .composer-label,.composer .setting-label{font-size:14px;color:#bdbdbd}.composer textarea{height:160px;min-height:160px;padding:16px;border:1px solid var(--composer-line);border-radius:12px;background:var(--composer-surface);font-size:16px}.composer .composer-references{margin:0}.composer .reference-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.composer .reference-count{color:var(--composer-muted);font-size:13px;font-variant-numeric:tabular-nums}.composer .reference-add{min-height:54px;padding:12px;border-radius:10px}.composer .reference-preview{width:64px;height:64px}.composer .reference-remove{width:28px;height:28px}.composer .reference-list:has(.reference-preview) .reference-add span{display:none}.composer .composer-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px}.composer .setting{display:block;min-width:0}.composer .setting-label{display:block;margin-bottom:10px}.composer .setting-control{min-height:52px;padding:8px 14px;border:1px solid var(--composer-line);border-radius:10px;background:var(--composer-surface)}.composer .setting select{width:100%;min-width:0;min-height:34px;padding-left:0;font-size:16px}.composer .setting-trigger{width:100%;min-width:0;min-height:34px;padding:0 20px 0 0;text-align:left;font-size:16px}.composer .setting-control:has(.setting-trigger:focus-visible){outline:1px solid #ddd;outline-offset:3px}.composer .setting-trigger:focus-visible{outline:none}.composer .setting-control>svg:last-child{right:14px}.composer .setting-control .ratio-icon{display:block;margin-right:8px;color:var(--composer-muted);pointer-events:none}.composer .generate-button{min-height:52px;gap:12px;border-radius:12px;font-size:16px!important}.composer-status{margin:16px 0 0;text-align:left}}@media(max-width:350px){.composer .composer-settings{grid-template-columns:1fr}.composer .reference-list,.composer .reference-previews{gap:8px}.composer .reference-preview{width:56px;height:56px}}.composer .composer-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.composer>.composer-expandable,.composer .composer-inner,.composer>.composer-footer,.composer .composer-controls{display:contents}.composer .composer-mode{min-width:0}.composer .reference-remove{box-sizing:border-box}.composer .reference-preview{flex-shrink:0}.composer .setting-menu{z-index:30}@media(prefers-reduced-motion:reduce){.composer,.composer .composer-mode span,.composer .generate-button{transition:none}}.composer .setting-trigger:disabled{color:var(--composer-muted);cursor:default}.composer .reference-list,.composer .reference-previews{flex-wrap:wrap}.composer .generate-button:disabled{opacity:.55;cursor:wait}@media(min-width:761px){.composer[data-format=video] .composer-settings{gap:10px}.composer[data-format=video] .setting-label{font-size:12px}}@media(max-width:760px),(max-width:1000px)and (pointer:coarse)and (hover:none){.studio-composer[data-format=video] .composer-settings{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.studio-composer[data-format=video] .setting{flex-wrap:wrap;justify-content:flex-start}.studio-composer[data-format=video] .setting-label{font-size:11px}}.composer{--compact-action:192px;--generate-width:122px;--composer-morph:.32s;--composer-ease:cubic-bezier(.16,1,.3,1);position:relative;width:100%;display:flex;flex-direction:column;gap:0;padding:10px 10px 10px 22px;border:1px solid #474747;background:#191919;border-radius:36px;box-shadow:0 14px 40px #0005;overflow:hidden;transition:width var(--composer-morph) var(--composer-ease),padding var(--composer-morph) var(--composer-ease),border-radius var(--composer-morph) var(--composer-ease),background var(--composer-morph) var(--composer-ease),border-color var(--composer-morph) var(--composer-ease)}.composer.is-expanded{padding:20px;border-radius:20px;background:#111;border-color:#303030}.composer>.composer-expandable{display:grid;width:100%;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--composer-morph) var(--composer-ease)}.composer .composer-inner{display:block;overflow:hidden;min-height:0}.composer.is-expanded>.composer-expandable{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows var(--composer-morph) var(--composer-ease),opacity .18s 90ms}.composer .composer-prompt{min-width:0;width:100%;padding-right:var(--compact-action)}.composer.is-expanded .composer-prompt{padding-right:0}.composer textarea{height:44px;min-height:44px;max-height:300px;padding:9px 0;resize:none;overflow:hidden;font-size:16px;line-height:26px;white-space:nowrap;transition:height var(--composer-morph) var(--composer-ease)}.composer.is-expanded textarea{white-space:pre-wrap;overflow-y:auto;padding:4px 4px 20px;font-size:18px;line-height:1.55;resize:vertical}.composer>.composer-footer{display:block;position:relative;width:100%;height:0;margin-top:0;transition:height var(--composer-morph) var(--composer-ease),margin-top var(--composer-morph) var(--composer-ease)}.composer .composer-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px;padding-right:calc(var(--compact-action) + 16px);opacity:0;visibility:hidden}.composer.is-expanded .composer-controls{opacity:1;visibility:visible;transition:opacity .18s 90ms}.composer.is-expanded>.composer-footer{height:44px}.composer .composer-actions{grid-area:generate;position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;width:var(--compact-action);min-height:44px}.composer .generate-button{position:static;width:var(--generate-width);flex-shrink:0}.composer:not(.is-expanded) .generate-button{gap:12px;padding:0 20px;border-radius:26px;font-size:14px}.composer .collapse-composer{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;padding:0;border:0;border-radius:50%;background:transparent;color:var(--composer-muted)}.composer .collapse-composer svg{transform:rotate(180deg);width:17px;height:17px}.composer .composer-mode{flex-shrink:0}@media(min-width:1001px),(min-width:761px)and (pointer:fine),(min-width:761px)and (hover:hover){.composer.is-expanded{display:grid;column-gap:16px}.composer.is-expanded>.composer-expandable,.composer.is-expanded .composer-inner,.composer.is-expanded>.composer-footer,.composer.is-expanded .composer-controls{display:contents}.composer.is-expanded .composer-inner{overflow:visible}.composer.is-expanded>.composer-footer{height:auto;position:static;width:auto}.composer.is-expanded .composer-controls{height:auto;padding-right:0}.composer.is-expanded .composer-actions{position:static;width:auto}.composer.is-expanded .generate-button{width:auto}}@media(min-width:761px)and (max-width:900px){.composer.is-expanded{column-gap:12px}}@media(max-width:760px),(max-width:1000px)and (pointer:coarse)and (hover:none){.composer:not(.is-expanded){--compact-action:160px;--generate-width:100px;padding:9px 9px 9px 17px;border-radius:30px}.composer,.composer.is-expanded{transition:none}.composer.is-expanded textarea{height:160px;min-height:160px;max-height:160px;resize:none;transition:none}.composer.is-expanded>.composer-expandable,.composer.is-expanded>.composer-footer,.composer.is-expanded .composer-controls{transition:none}.composer .collapse-composer{display:none}.studio-composer.composer.is-expanded{--compact-action:160px;--generate-width:100px;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;border-bottom:0;box-shadow:none}.studio-composer.is-expanded>.composer-expandable{grid-column:1;grid-row:1}.studio-composer.is-expanded>.composer-prompt{grid-column:2;grid-row:1}.studio-composer.is-expanded:has(.reference-preview)>.composer-expandable{grid-column:1/-1}.studio-composer.is-expanded:has(.reference-preview)>.composer-prompt{grid-column:1/-1;grid-row:2}.studio-composer>.composer-expandable{order:0}.studio-composer .composer-prompt{order:1}.studio-composer>.composer-footer{order:2}.studio-composer .collapse-composer{display:none}.studio-composer .composer-prompt>.composer-label,.studio-composer .reference-heading{display:none}.studio-composer .composer-references{margin-bottom:4px}.studio-composer .reference-list{flex-wrap:nowrap;min-width:0;max-width:100%;padding:7px 7px 3px 0;overflow-x:auto;overscroll-behavior-x:contain}.studio-composer .reference-previews{flex-wrap:nowrap;flex-shrink:0}.studio-composer .reference-add{flex-shrink:0}.studio-composer .reference-add{min-height:44px;padding:10px}.studio-composer .reference-add span{display:none}.studio-composer .reference-preview{width:44px;height:44px}.studio-composer textarea{padding:10px 0;border:0;border-radius:4px;background:transparent;font-size:16px;line-height:24px}.studio-composer.is-expanded textarea{height:54px;min-height:54px;max-height:54px;padding:10px 0;font-size:16px;line-height:24px;resize:none;transition:none}.studio-composer.is-expanded>.composer-footer{grid-column:1/-1;display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:44px minmax(52px,auto);align-items:center;column-gap:clamp(4px,2vw,12px);height:auto;margin-top:2px}.studio-composer.is-expanded .composer-controls{display:contents}.studio-composer.is-expanded .composer-actions{grid-column:2;grid-row:2;position:static;width:auto;min-width:0;min-height:52px;gap:clamp(4px,1.5vw,10px)}.studio-composer .composer-mode{grid-column:1;grid-row:2;justify-self:start;padding:3px;gap:2px;border-radius:10px}.studio-composer .composer-mode span{min-height:36px;padding:0 clamp(3px,1.5vw,8px);font-size:12px;gap:clamp(3px,1vw,5px)}.studio-composer .composer-mode svg{width:15px;height:15px}.studio-composer .composer-settings{grid-column:1/-1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.studio-composer .setting{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}.studio-composer .setting-label{margin-bottom:0;font-size:12px}.studio-composer .setting-control{min-height:44px;padding:0;border:0;background:transparent}.studio-composer .setting-trigger{min-height:44px;padding:0 19px 0 0;font-size:13px}.studio-composer .setting select{min-height:44px;padding:0 19px 0 0;font-size:16px}.studio-composer .setting-control>svg:last-child{right:0}.studio-composer .setting-control .ratio-icon{display:none}.studio-composer .generate-button{min-height:44px;padding:0 13px;gap:7px;font-size:12px!important}.studio-composer .generate-button svg{width:15px;height:15px}.studio-composer.is-expanded .generate-button{width:auto;min-width:max-content;flex:0 1 100px;padding-inline:clamp(5px,2vw,13px);white-space:nowrap}}@media(max-width:760px),(max-width:1000px)and (pointer:coarse)and (hover:none){.composer:not(.is-expanded) .composer-prompt>.composer-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}.composer:not(.is-expanded) textarea{padding:10px 0;border:0;border-radius:4px;background:transparent;font-size:16px;line-height:24px}.composer:not(.is-expanded) .generate-button{min-height:44px;padding:0 13px;gap:7px;font-size:12px!important}.composer:not(.is-expanded) .generate-button svg{width:15px;height:15px}.composer:not(.studio-composer).is-expanded{display:grid;gap:28px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}.composer:not(.studio-composer).is-expanded>.composer-expandable,.composer:not(.studio-composer).is-expanded .composer-inner,.composer:not(.studio-composer).is-expanded>.composer-footer,.composer:not(.studio-composer).is-expanded .composer-controls{display:contents}.composer:not(.studio-composer).is-expanded .composer-inner{overflow:visible}.composer:not(.studio-composer).is-expanded textarea{min-height:160px;padding:16px;border:1px solid var(--composer-line);border-radius:12px;background:var(--composer-surface);font-size:16px}.composer:not(.studio-composer).is-expanded .composer-actions{position:static;width:auto}.composer:not(.studio-composer).is-expanded .generate-button{width:auto;flex:1}}@media(prefers-reduced-motion:reduce){.composer,.composer textarea,.composer>.composer-expandable,.composer>.composer-footer,.composer .composer-controls{transition:none!important}}.composer .generation-cost{display:inline-flex;align-items:center;gap:5px;color:var(--composer-muted);font-size:14px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.composer .generation-cost svg{width:16px;height:16px;fill:currentColor;stroke:none}@media(max-width:760px),(max-width:1000px)and (pointer:coarse)and (hover:none){.composer .composer-actions{gap:10px}.composer .generation-cost{font-size:12px}}@media(max-width:380px){.studio-composer[data-format=video] .setting:not(.duration-setting) .setting-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}@media(max-width:760px),(max-width:1000px)and (pointer:coarse)and (hover:none){.studio-composer .composer-mode span{min-height:44px}.studio-composer .reference-remove{width:32px;height:32px}.composer:not(.studio-composer) .reference-list{flex-wrap:nowrap;max-width:100%;padding:7px 7px 3px 0;overflow-x:auto;overscroll-behavior-x:contain}.composer:not(.studio-composer) .reference-previews{flex-wrap:nowrap;flex-shrink:0}.composer:not(.studio-composer) .reference-add{flex-shrink:0}}