:root{--line:#ddded6;--paper:#fafaf6;--ink:#233e30;--control:34px;--icon:30px}
.studioShell{display:block;min-height:calc(100dvh - 61px)}.studioActions,.insert{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper)}.studioActions button{display:grid;text-align:left;line-height:1.3}.studioActions small{color:#566456}.studioActions button:nth-child(2){background:#eeeaf8}.studioActions button:nth-child(3){background:#e2eff1}.studioBody{display:grid;grid-template-columns:74px 222px minmax(0,1fr) 244px;min-height:calc(100dvh - 120px)}.rail{display:grid;align-content:start;gap:5px;padding:8px;background:#eef0e8;border-right:1px solid var(--line)}.rail button{display:grid;justify-items:center;gap:1px;padding:5px 2px;font-size:10px;background:transparent;border-color:transparent}.rail b{font-size:17px;line-height:1.2}.library,.inspector{min-width:0}.library h2,.inspector h2{margin-bottom:12px}.work{display:flex;flex-direction:column;min-width:0}.work .stage{flex:1;min-height:350px}.insert{padding:8px}.insert button{padding-inline:8px;font-size:12px}.stack{display:grid;gap:6px}.stack button{text-align:left}.row{display:flex;align-items:center;gap:6px;margin:6px 0}.row>*{min-width:0}.row>.grow{flex:1}.micro{font-size:12px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.fields label{font-size:12px}.inspector select,.library select,.modal select{width:100%;border:1px solid var(--line);border-radius:6px;background:white;min-height:34px;color:#212522}.iconButton{width:var(--icon);height:var(--icon);min-height:var(--icon);padding:0}.delete{color:#a3333a;background:#fff3f3}.layerText{position:absolute;padding:2px 5px;cursor:move;touch-action:none;max-width:85%;overflow-wrap:anywhere}.layerText.active{outline:1px dashed #e2ff8e}.palette{display:flex;gap:6px}.palette button{width:30px;min-height:30px}.dialogBody{display:grid;gap:10px;margin-top:14px}.dialogBody textarea{font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;width:100%;min-height:86px}.studioExpanded .rail,.studioExpanded .library,.studioExpanded .inspector{display:none}.studioExpanded .studioBody{grid-template-columns:1fr}body.dark .studioShell{background:#111b22;color:#e8eff1}body.dark .studioShell :is(.rail,.library,.inspector,.insert,.studioActions){background:#253138;color:#e8eff1;border-color:#425259}body.dark .stage{background-color:#1d292f;background-image:radial-gradient(#435159 1px,transparent 1px)}body.dark .stage .muted{color:#b7cccc}
@media(max-width:1050px){.studioBody{grid-template-columns:65px 175px minmax(0,1fr)}.studioBody .inspector{grid-column:2/-1}.work .stage{min-height:290px}}
@media(max-width:650px){.studioBody{display:flex;flex-direction:column}.studioBody .work{order:-2}.studioBody .rail{order:-1;display:flex;flex-wrap:wrap}.rail button{flex:1 0 16%}.work .stage{order:0;min-height:205px}.studioActions{padding:8px}.studioActions small{display:none}}
.art:after{background:linear-gradient(90deg,var(--art-bg,#16291f) 39%,transparent 77%)}.art[data-ratio="9:16"]:after{background:linear-gradient(var(--art-bg,#16291f) 38%,transparent 75%)}.work .stage{overflow:auto}.work .stage>[data-art]{width:calc(100% * var(--zoom,1));min-width:0}.layerText{font-size:clamp(8px,2.8cqw,40px);line-height:1.1}

body {
 --button-bg:#fff;--button-text:#273b30;--button-line:#cfd8cd;
 --button-hover:#eef3e9;--button-active:#e0eddb;--button-active-line:#779472;
 --button-primary:#254634;--button-primary-hover:#356047;--button-primary-text:#fff;
 --button-focus:#4d7952;--button-danger:#a72e3d;--button-danger-bg:#fceff0;--button-danger-line:#e9bdc3;
}
body.dark {
 --button-bg:#172233;--button-text:#d6e3ee;--button-line:#41566a;
 --button-hover:#22374a;--button-active:#173c4b;--button-active-line:#4ec8db;
 --button-primary:#3fc5dc;--button-primary-hover:#71d9e8;--button-primary-text:#06232f;
 --button-focus:#79e6f4;--button-danger:#ffbdc6;--button-danger-bg:#32232e;--button-danger-line:#8b5563;
}
button:not(.asset) {
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 min-height:var(--control);padding:6px 10px;border:1px solid var(--button-line);
 border-radius:6px;background:var(--button-bg);color:var(--button-text);
 font-size:12px;font-weight:600;line-height:16px;
 transition:background-color .15s,border-color .15s,color .15s;
}
button svg {width:16px;height:16px;flex:none}
button:not(.asset):hover:not(:disabled) {background:var(--button-hover);border-color:var(--button-active-line)}
button:not(.asset)[aria-pressed=true] {background:var(--button-active);border-color:var(--button-active-line)}
button:not(.asset):focus-visible {outline:2px solid var(--button-focus);outline-offset:2px}
button.primary:not(.asset) {background:var(--button-primary);border-color:var(--button-primary);color:var(--button-primary-text)}
button.primary:not(.asset):hover:not(:disabled) {background:var(--button-primary-hover)}
button:not(.asset):disabled {opacity:.5;cursor:not-allowed}
button:is(.iconButton,.uiIconButton):not(.asset) {min-width:var(--icon);min-height:var(--icon);width:var(--icon);height:var(--icon);padding:0}
button.uiDeleteButton:not(.asset) {color:var(--button-danger);background:var(--button-danger-bg);border-color:var(--button-danger-line)}
button.uiDeleteButton:not(.asset):hover {border-color:var(--button-danger)}
.rail button:not(.asset) {display:grid;gap:3px;padding:5px 2px;border-color:transparent;background:transparent;font-size:10px}
.rail button:not(.asset)[aria-pressed=true] {background:var(--button-active);border-color:var(--button-active-line)}
.studioActions button[data-demo]:nth-child(-n+3) {display:grid;justify-items:start;gap:0;padding-inline:11px}
.studioActions button[data-demo]:nth-child(2) {background:#eeeaf8;color:#463565;border-color:#dcd3ee}
.studioActions button[data-demo]:nth-child(3) {background:#e2eff1;color:#204b56;border-color:#c8dfe3}
body.dark .studioActions button[data-demo]:nth-child(2) {background:#302743;color:#e2d4ff;border-color:#66568a}
body.dark .studioActions button[data-demo]:nth-child(3) {background:#193b48;color:#abebf7;border-color:#417685}
body.dark .studioActions small {color:inherit}
.stack button:not(.asset) {justify-content:flex-start}
.stack button.uiIconButton:not(.asset) {justify-content:center}
.top #save {border-color:var(--button-active-line)}
@media(prefers-reduced-motion:reduce){button:not(.asset){transition:none}}
body.dark {background:#111b22;color:#e8eff1;color-scheme:dark}
body.dark :is(.top,.out .card,.login,.modal) {background:#253138;border-color:#425259;color:#e8eff1}
body.dark :is(.muted,.label) {color:#b7cccc}
.studioActions button[data-demo]:nth-child(-n+3):hover {border-color:var(--button-active-line)}

/* Segmented controls and button groups. */
:is(#mediaFilters,#ratios,#formats,.stagebar .actions:has(#zoom)) {
 gap:0;
}
:is(#mediaFilters,#ratios,#formats,.stagebar .actions:has(#zoom)) > button:not(.asset) {
 position:relative;
}
:is(#mediaFilters,#ratios,#formats,.stagebar .actions:has(#zoom)) > button:not(.asset):not(:first-child) {
 margin-inline-start:-1px;
 border-start-start-radius:0;
 border-end-start-radius:0;
}
:is(#mediaFilters,#ratios,#formats,.stagebar .actions:has(#zoom)) > button:not(.asset):not(:last-child) {
 border-start-end-radius:0;
 border-end-end-radius:0;
}
:is(#mediaFilters,#ratios,#formats,.stagebar .actions:has(#zoom)) > button:is(:hover,:focus-visible,[aria-pressed=true]) {
 z-index:1;
}
.stagebar .actions:has(#zoom) {align-items:center}
.stagebar #zoom {min-height:var(--icon);min-width:52px;font-variant-numeric:tabular-nums}
.stagebar .actions #hand:not(.asset) {margin-inline-start:8px;border-radius:6px}
.stagebar .actions #plus:not(.asset) {border-start-end-radius:6px;border-end-end-radius:6px}
#formats > button:not(.asset) {padding-inline:8px}

/* Compact studio controls and surface geometry from the supplied design system. */
:root {
 --studio-control-radius:.4rem;
 --studio-field-radius:.45rem;
 --studio-card-radius:.75rem;
}
button:not(.asset) {border-radius:var(--studio-control-radius)}
button.primary:not(:disabled):active {transform:scale(.98)}
button:not(.asset):disabled {opacity:.45}
:is(.library,.inspector,.login,.modal) :is(input:not([type=color],[type=range]),select,textarea) {
 border-radius:var(--studio-field-radius);
}
:is(.library,.inspector,.login) :is(input:not([type=color],[type=range]),select) {min-height:34px}
.rail button:not(.asset) {border-radius:var(--studio-field-radius)}
:is(.card,.modal) {border-radius:var(--studio-card-radius)}
#featureDialog {
 width:min(560px,calc(100% - 32px));
 border:1px solid var(--button-line);
 background:var(--paper);
 padding:0;
 box-shadow:0 18px 60px #10231d40;
}
#featureDialog > .row {margin:0;padding:16px 20px;border-bottom:1px solid var(--button-line)}
#featureTitle {margin:0;font-size:20px;line-height:1.25;letter-spacing:-.025em}
#featureBody {padding:18px 20px;margin:0}
#featureBody > p {margin:0}
#featureBody > button {justify-self:start}
.creativeField {display:grid;gap:6px;font-size:12px;font-weight:650}
.creativeField textarea {
 background:var(--button-bg);
 color:var(--button-text);
 border-color:var(--button-line);
 font-size:14px;
 min-height:120px;
 resize:vertical;
}
.creativeField textarea:focus-visible {outline:2px solid var(--button-focus);outline-offset:1px}
.creativeOptions,.creativeFooter {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.creativeOptions button:not(.asset) {border-radius:999px}
.creativeFooter {
 justify-content:space-between;
 margin-top:6px;
 padding-top:14px;
 border-top:1px solid var(--button-line);
}
.creativeFooter .primary {margin-inline-start:auto}
body.dark #featureDialog {background:#253138}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body {font-family:Manrope,system-ui,sans-serif}
#featureTitle {font-weight:800}

.creativeLaunchers {display:flex;flex-wrap:wrap;gap:7px;padding:4px;border:1px solid var(--button-line);border-radius:12px}
.studioActions .creativeLaunchers button[data-demo] {
 display:grid;grid-template-columns:40px minmax(0,1fr) 14px;align-items:center;gap:10px;
 min-height:60px;padding:8px;border-radius:9px;text-align:left;
 background:var(--launch-surface);border-color:var(--launch-border);color:var(--launch-ink);
}
.creativeLaunchers button:nth-child(1) {--launch-surface:#f3eaf7;--launch-border:#c8a9d6;--launch-ink:#523366;--thumb-a:#a45b9c;--thumb-b:#58407d}
.creativeLaunchers button:nth-child(2) {--launch-surface:#eeedf9;--launch-border:#b7b6dd;--launch-ink:#39417b;--thumb-a:#8179c8;--thumb-b:#3c587f}
.creativeLaunchers button:nth-child(3) {--launch-surface:#e7f1f2;--launch-border:#a7c9ce;--launch-ink:#285660;--thumb-a:#4a9b9e;--thumb-b:#354e76}
.studioActions .creativeLaunchers button:hover {border-color:var(--launch-ink);box-shadow:0 2px 8px #10231d17}
.launcherThumb {
 display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:white;
 background:linear-gradient(140deg,var(--thumb-a),var(--thumb-b));
 box-shadow:inset 0 0 0 1px #ffffff54,inset 0 5px 6px #ffffff24;
}
.launcherThumb svg {width:24px;height:24px}
.launcherCopy {display:grid;gap:2px}
.launcherCopy small {color:inherit;font-size:10px;font-weight:500}
.launcherArrow {align-self:start;font-size:14px}

#featureDialog:is(.creativeDialog,.posterDialog) {
 max-height:calc(100dvh - 32px);
 color:var(--button-text);border-radius:10px;
}
#featureDialog:is(.creativeDialog,.posterDialog)::backdrop {backdrop-filter:blur(4px)}
#featureDialog.creativeDialog {width:min(850px,calc(100% - 32px))}
#featureDialog.creativeDialog > .row {padding:24px 26px 0;border:0}
.featureKicker {display:block;margin-bottom:7px;color:#8a5329;font-size:10px;font-weight:800;letter-spacing:.12em}
body.dark .featureKicker {color:#f0bf8c}
#featureDialog.creativeDialog #featureBody {gap:14px;padding:20px 26px 24px}
.referenceIntro {font-size:14px;line-height:1.65}
.creativeField {gap:14px;margin-top:6px}
.creativeField textarea {min-height:100px;font:13px/1.5 ui-monospace,monospace}
.referenceHelp {padding:13px 15px;border:1px solid var(--button-line);border-radius:10px;background:var(--button-hover);font-size:12px}
.referenceHelp p {margin:6px 0;color:var(--button-text)}
.referenceHelp span {color:var(--button-text);font-size:11px}
.referenceSubmit {margin-top:5px}
.referenceSubmit p {margin:0;color:var(--button-text);font-size:11px;line-height:1.65}
.referenceSubmit .referenceStatus {margin-top:8px;color:inherit;font-weight:700}
.referenceSection {margin-top:8px;padding-top:18px;border-top:1px solid var(--button-line)}
.referenceSection h3 {margin:0 0 5px;font-size:14px}
.referenceSection p {margin:0 0 14px;font-size:12px}
.referencePromptGrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.referencePromptGrid button:not(.asset) {display:grid;align-content:start;gap:7px;padding:12px 14px;text-align:left;border-radius:10px}
.referencePromptGrid button > span {display:flex;align-items:center;gap:8px}
.referencePromptGrid button > span span {margin-inline-start:auto}
.referencePromptGrid small {font-size:11px;font-weight:500;line-height:1.6}
.referenceGroup,.videoReferenceOptions,.referenceCheck {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.videoReferenceOptions {gap:24px}
.videoReferenceOptions > div > span {display:block;margin-bottom:7px;font-size:12px}
.referenceCheck {font-size:11px}
.referenceCheck input {width:auto;min-height:0;margin:0}
.referenceCheck svg {width:16px;height:16px}
.referenceSection video {display:block;width:100%;max-height:440px;background:#111;border-radius:10px;margin:14px 0}

#featureDialog.posterDialog {width:min(1280px,calc(100% - 32px));border-radius:16px}
#featureDialog.posterDialog.posterExpanded {width:calc(100% - 16px);max-width:none;max-height:calc(100dvh - 16px)}
#featureDialog.posterDialog > .row {padding:24px 26px;background:var(--button-hover);align-items:start;gap:8px}
.featureIntro {margin:5px 0 0;font-size:12px}
#featureDialog.posterDialog #featureBody {padding:0;gap:0}
.posterFilters {display:grid;gap:14px;padding:17px 26px 12px}
.posterToolbar,.posterInline,.posterSearch {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.posterCaption {font-weight:750;font-size:11px;margin:0 0 -6px}
.posterInline strong {font-size:11px;margin-right:6px}
.posterSearch input {flex:1;min-width:150px;background:var(--button-bg);color:var(--button-text);border-color:var(--button-line)}
.posterAccount {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:12px}
.posterAccount small {flex-basis:100%}
.posterBrowse {display:grid;grid-template-columns:62% 38%;min-height:302px;border-block:1px solid var(--button-line)}
.posterGallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:12px;padding:20px 24px}
.posterGallery .asset {margin:0;padding:6px;background:var(--button-bg);color:var(--button-text);border-color:var(--button-line);border-radius:10px;font-size:11px}
.posterGallery .asset[aria-pressed=true] {border-color:var(--button-active-line);background:var(--button-active)}
.posterGallery img {height:auto;aspect-ratio:4/3;object-fit:cover;background:#253138}
.posterGallery [data-portrait=true] img {object-fit:contain}
.posterPreview {display:grid;align-content:center;justify-items:center;text-align:center;padding:22px;background:var(--button-hover);border-inline-start:1px solid var(--button-line);font-size:12px;gap:8px}
.posterPreview > svg {width:30px;height:30px}
.posterPreview img {width:100%;max-height:210px;object-fit:contain;border-radius:6px}
.posterFoot {padding:14px 26px;font-size:10px}
@media(max-width:650px){
 .studioActions .creativeLaunchers button[data-demo] {grid-template-columns:40px 1fr;gap:7px}
 .launcherArrow {display:none}
 #featureDialog.creativeDialog > .row,#featureDialog.posterDialog > .row {padding-inline:16px}
 #featureDialog.creativeDialog #featureBody,.posterFilters,.posterGallery,.posterFoot {padding-inline:16px}
 .referencePromptGrid,.posterBrowse {grid-template-columns:1fr}
 .posterGallery {grid-template-columns:repeat(2,minmax(0,1fr))}
 .posterPreview {border-inline-start:0;border-top:1px solid var(--button-line)}
}

body.dark {
 --studio-field-bg:#101d29;
 --studio-field-text:#e8eff1;
 --studio-field-border:#42566a;
 --studio-field-placeholder:#a6b9c8;
}
body.dark :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea) {
 background:var(--studio-field-bg);
 color:var(--studio-field-text);
 border-color:var(--studio-field-border);
 color-scheme:dark;
}
body.dark :is(input,textarea)::placeholder {
 color:var(--studio-field-placeholder);
 opacity:1;
}