html[data-theme] .preview-stack{position:static;max-height:none;overflow:visible}
/* Use the available screen width, with text and composition in separate rows. */
html[data-theme] main,html[data-theme] .gif-main,html[data-theme] .photo-workspace{max-width:none;width:100%;padding-left:16px;padding-right:16px}
html[data-theme] .studio-header{min-height:72px;padding:12px 16px;gap:20px}
html[data-theme] .studio-toolbar{padding:8px 16px}
html[data-theme] .studio-intro{padding:20px 0 18px;gap:16px}
html[data-theme] .studio-intro h1{font-size:clamp(1.4rem,2.1vw,2rem);margin-bottom:6px}
html[data-theme] .studio-eyebrow{margin-bottom:6px;font-size:.6rem}
html[data-theme] .studio-description{font-size:.78rem}
html[data-theme] .studio-local{padding:7px 12px;font-size:.65rem}
.workspace-jumps{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:5px;width:fit-content;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}
.workspace-jumps a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;text-decoration:none;color:var(--ui-text);font-size:.76rem;font-weight:600}
.workspace-jumps a:hover{background:var(--ui-soft);color:var(--ui-accent)}
.workspace-jumps a:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
html[data-theme] main>.photo-workspace{padding-left:0;padding-right:0}
.workspace-jumps span{color:var(--ui-accent);font-size:.65rem;letter-spacing:.08em}
#formatter,#scene-workspace{scroll-margin-top:16px}
html[data-theme] #scene-workspace{width:100%;margin-top:24px;border-radius:16px;border:1px solid var(--ui-border);box-shadow:var(--studio-shadow);background:var(--ui-surface)}
html[data-theme] #scene-workspace>summary{background:linear-gradient(110deg,var(--studio-glow),transparent 65%),var(--ui-surface);min-height:60px;padding:14px 20px}
html[data-theme] #scene-workspace .composition-stage{height:70vh;min-height:420px;max-height:90vh;margin:12px;display:flex;align-items:flex-start;justify-content:flex-start;border-radius:12px}
html[data-theme] #scene-workspace .composition-stage canvas{flex:none;margin:auto}
html[data-theme] #scene-workspace .inline-screenshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;align-items:start}
#scene-workspace .inline-screenshot #media-controls{grid-column:2 / -1}
#scene-workspace .inline-screenshot #media-list{padding:0}
#scene-workspace .inline-screenshot .hint{margin:0}
html[data-theme] .preview-drawer,html[data-theme] .editing-panel{border-radius:16px}
html[data-theme] .preview-drawer>summary{min-height:58px;padding:14px 18px}
html[data-theme] .canvas-selectionbar{position:static}
@media(min-width:1900px){html[data-theme] main{padding-left:24px;padding-right:24px}}
@media(max-width:850px){html[data-theme] main,html[data-theme] .photo-workspace{padding-left:10px;padding-right:10px}html[data-theme] #scene-workspace .inline-screenshot{grid-template-columns:1fr}#scene-workspace .inline-screenshot #media-controls{grid-column:auto}html[data-theme] #scene-workspace .composition-stage{min-height:300px;margin:8px}.workspace-jumps{width:100%}.workspace-jumps a{flex:1;padding:8px;font-size:.7rem}}
html[data-theme] .adjustable-workspace{position:relative;grid-template-columns:minmax(280px,var(--editor-width,35%)) minmax(0,1fr);gap:28px}
.workspace-divider{position:absolute;top:0;bottom:0;left:calc(var(--editor-width,35%) + 7px);width:14px;padding:0;background:transparent!important;cursor:col-resize;transform:none!important;z-index:2;border:0}
.workspace-divider:after{content:'';width:3px;height:64px;background:var(--ui-border);border-radius:5px;position:sticky;top:45vh}
.workspace-divider:hover:after{background:var(--ui-accent)}
html[data-theme] .expanded-canvas{position:fixed;inset:16px;z-index:90;overflow:auto;box-shadow:0 0 0 30px #080a18cc}
html[data-theme] .expanded-canvas .canvas-workbench{height:calc(100vh - 250px)!important;max-height:none}
html[data-theme] .canvas-workbench{height:560px;min-height:260px;max-height:85vh;resize:vertical;overflow:auto;overscroll-behavior:contain;position:relative;border-radius:14px;background-color:#101521;padding:24px;display:block}
html[data-theme] .canvas-workbench canvas{display:block;margin:auto;box-shadow:0 12px 36px #0005}
html[data-theme] .canvas-commandbar,html[data-theme] .canvas-selectionbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--ui-border);background:var(--ui-soft)}
.canvas-commandbar label{display:flex;align-items:center;flex-direction:row;margin:0;gap:8px}.canvas-commandbar input{max-width:140px}.canvas-commandbar output{min-width:70px;font-size:.75rem}.canvas-label{font-size:.64rem;letter-spacing:.1em;color:var(--ui-accent);margin-right:auto}.canvas-help{font-size:.68rem;color:var(--ui-muted)}
.canvas-selectionbar>span{margin-right:auto;font-size:.75rem;color:var(--ui-muted)}.canvas-selectionbar button{padding:6px 10px;font-size:.72rem}
.canvas-selectionbar label{margin:0;display:flex;flex-direction:row;align-items:center;gap:5px;font-size:.7rem}.canvas-selectionbar input{max-width:70px;min-height:30px!important;padding:6px!important}
.canvas-selectionbar{position:sticky;top:0;z-index:3}
html[data-theme] .segment-item{display:grid;grid-template-columns:1fr;text-align:left;gap:4px;width:100%;padding:14px}.segment-excerpt{font-weight:400;font-size:.73rem;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.segment-item small{font-size:.66rem;color:var(--ui-accent)}
html[data-theme] .photo-stage .crop-wrap{margin:auto;display:block}
html[data-theme] .photo-stage.grid-hidden .crop-box:before,html[data-theme] .photo-stage.grid-hidden .crop-box:after{display:none}
html[data-theme] .photo-canvas-toolbar{padding:14px 18px;background:var(--ui-soft)}
@media(max-width:850px){html[data-theme] .adjustable-workspace{grid-template-columns:minmax(0,1fr)}.workspace-divider{display:none}html[data-theme] .canvas-workbench{height:420px;padding:12px}.canvas-help{display:none}}
/* Dedicated editing lanes keep source text, filters and scene segments apart. */
html[data-theme] #formatter{display:grid;grid-template-columns:minmax(270px, .9fr) minmax(0,1.65fr) minmax(250px,.8fr);gap:16px;align-items:start}
#formatter>*{min-width:0}
html[data-theme] #formatter .editing-panel,html[data-theme] .filter-panel{overflow:hidden;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);box-shadow:var(--studio-shadow)}
html[data-theme] #formatter .preview-stack{min-width:0}
html[data-theme] #formatter .panel-drawer>summary,html[data-theme] .segment-panel>details>summary{padding:16px;background:linear-gradient(120deg,var(--studio-glow),transparent),var(--ui-surface);font-weight:650}
html[data-theme] #formatter #source{min-height:380px;max-height:65vh}
html[data-theme] #formatter .preview-stage{height:65vh;min-height:380px}
html[data-theme] #formatter .two-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#formatter .preview-drawer>summary{flex-wrap:wrap;gap:8px}
#formatter #preview-meta{flex-basis:100%;order:3}
html[data-theme] #composer{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);align-items:start;gap:0}
.segment-panel,.scene-canvas-panel{min-width:0}
html[data-theme] .segment-panel{border-right:1px solid var(--ui-border);background:var(--ui-surface);height:100%}
html[data-theme] .segment-panel .segment-drawer{border:0;border-radius:0;background:transparent}
html[data-theme] .segment-panel #segment-controls{padding:16px}
html[data-theme] .segment-panel #segment-list{max-height:280px;overflow:auto}
html[data-theme] .segment-panel #segment-text{min-height:180px;max-height:360px}
html[data-theme] .scene-canvas-panel .canvas-selectionbar input{width:64px}
html[data-theme] .scene-canvas-panel .position-toolbar{gap:10px;padding:12px 16px}
html[data-theme] .scene-canvas-panel .composition-stage{height:70vh}
html[data-theme] .segment-item.selected{border-color:var(--ui-accent);background:linear-gradient(120deg,var(--studio-glow),var(--ui-surface))}
@media(max-width:1100px){html[data-theme] #formatter{grid-template-columns:minmax(250px,.85fr) minmax(0,1.4fr)}html[data-theme] #formatter .filter-panel{grid-column:1/-1}html[data-theme] #composer{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:700px){html[data-theme] #formatter,html[data-theme] #composer{grid-template-columns:minmax(0,1fr)}html[data-theme] .segment-panel{border-right:0;border-bottom:1px solid var(--ui-border)}html[data-theme] #formatter #source{min-height:240px}html[data-theme] #formatter .preview-stage{min-height:300px}}
@media(min-width:701px){html[data-theme] #formatter .editing-panel,html[data-theme] #formatter .filter-panel{max-height:85vh;overflow:auto;scrollbar-gutter:stable}html[data-theme] #formatter #source{min-height:260px;height:32vh}html[data-theme] .segment-panel{max-height:90vh;overflow:auto;scrollbar-gutter:stable}}
/* One continuous chat board; hidden side panels give their width to the preview. */
html[data-theme] #formatter{--chat-lane:minmax(260px,.85fr);--filter-lane:minmax(250px,.75fr);grid-template-columns:var(--chat-lane) minmax(0,1.7fr) var(--filter-lane);gap:0;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);box-shadow:var(--studio-shadow);overflow:hidden}
.chat-board-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--ui-border);background:linear-gradient(110deg,var(--studio-glow),transparent 70%)}
.board-kicker{font-size:.6rem;letter-spacing:.13em;color:var(--ui-accent);font-weight:700}
.chat-board-header h2{margin:4px 0 0;font-size:1.05rem;color:var(--ui-text)}
.chat-board-toggles{display:flex;gap:8px;flex-wrap:wrap}
.chat-board-toggles button{font-size:.73rem;min-height:34px}
html[data-theme] #formatter .editing-panel,html[data-theme] #formatter .filter-panel,html[data-theme] #formatter .chat-preview-drawer{border-radius:0;box-shadow:none;border:0;background:transparent}
html[data-theme] #formatter .editing-panel{grid-column:1;border-right:1px solid var(--ui-border)}
html[data-theme] #formatter .preview-stack{grid-column:2;grid-row:2}
html[data-theme] #formatter .filter-panel{grid-column:3;grid-row:2;border-left:1px solid var(--ui-border)}
html[data-theme] #formatter:has(.chat-drawer:not([open])){--chat-lane:0px}
html[data-theme] #formatter:has(#chat-filters:not([open])){--filter-lane:0px}
#formatter .editing-panel:has(.chat-drawer:not([open])),#formatter .filter-panel:has(#chat-filters:not([open])){display:none}
html[data-theme] #formatter .preview-stage{margin:12px}
@media(max-width:1000px) and (min-width:701px){html[data-theme] #formatter{--chat-lane:minmax(210px,.8fr);--filter-lane:minmax(210px,.75fr)}}
@media(max-width:700px){html[data-theme] #formatter{grid-template-columns:minmax(0,1fr)}.chat-board-header{flex-wrap:wrap;padding:14px}.chat-board-toggles{width:100%}.chat-board-toggles button{flex:1}html[data-theme] #formatter .editing-panel,html[data-theme] #formatter .preview-stack,html[data-theme] #formatter .filter-panel{grid-column:1;grid-row:auto;border-left:0;border-right:0;border-bottom:1px solid var(--ui-border)}}