:root{--app-safe-top:0px;--app-safe-right:0px;--app-safe-bottom:0px;--app-safe-left:0px}
.rotate-hint{display:none;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;background:#eee8fb;border-radius:10px;color:#665180;font-size:12px;line-height:1.5}.rotate-hint>span{font-size:26px}.rotate-hint b{display:block}
#screenStatus{position:fixed;z-index:31;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;padding:12px 16px;background:#25202f;color:#fff;border-radius:12px;font-size:12px}
@media(orientation:portrait) and (max-width:760px){.rotate-hint{display:flex}#fullscreenOpen{font-size:10px;padding:5px 7px}.header-actions{gap:4px}header{padding:0 10px}.brand{font-size:20px}}
@media(min-width:560px) and (orientation:landscape){
 body{height:100dvh;overflow:hidden;padding:max(env(safe-area-inset-top),var(--app-safe-top)) max(env(safe-area-inset-right),var(--app-safe-right)) max(env(safe-area-inset-bottom),var(--app-safe-bottom)) max(env(safe-area-inset-left),var(--app-safe-left));display:flex;flex-direction:column}
 header{flex:0 0 42px;height:42px;padding:0 14px;border-radius:0}.brand{font-size:22px}.header-actions{gap:6px}.header-actions button{min-height:34px;padding:6px 10px;font-size:11px}
 main{flex:1;min-height:0;width:100%;max-width:1600px;padding:7px 10px 0;display:flex;flex-direction:column;overflow:hidden;gap:6px}
 .connection{flex:none;margin:0;padding:6px 10px;font-size:10px}.steps{flex:none;gap:6px;margin:0}.steps button{display:flex;align-items:center;gap:8px;padding:7px 12px;min-height:40px}.steps span{font-size:10px;margin:0}.steps b{font-size:12px}.steps small{font-size:10px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-has-video=true] #workflowChoice,body[data-has-video=true] #upscaleOpen{display:none}
 .editor{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,34vw,370px);gap:10px;align-items:stretch;width:100%;max-width:none;margin:0}
 .workspace,body[data-step=mask] .workspace,body[data-step=reference] .workspace{display:flex;flex-direction:column;width:auto;min-height:0;position:static;padding:0;background:transparent;gap:0}
 .viewer{display:flex;flex:1;min-height:0;flex-direction:column;border-radius:12px}.viewer-head,body[data-step=mask] .viewer-head{display:flex;flex:none;padding:3px 10px;font-size:10px;min-height:32px}
 .scene-wrap,body[data-step=mask] .scene-wrap{flex:1;min-height:0;max-height:none;aspect-ratio:auto;width:100%}.viewer .transport{flex:none;padding:4px 8px;gap:7px;font-size:9px;min-height:40px}.viewer .transport button{min-width:40px;min-height:34px}.transport input[type=range]{height:28px;margin:0}.viewer-hint{display:none}
 .panel{width:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;border-radius:12px;scrollbar-width:thin;scroll-padding:12px}.panel h2{font-size:19px;margin-bottom:10px}.panel .eyebrow{margin-bottom:5px}.panel p{font-size:11px;line-height:1.55}.panel .fine{font-size:10px}.panel textarea{font-size:16px;min-height:90px;padding:10px;line-height:1.5}.primary{min-height:44px;padding:11px;margin-top:10px}
 .mask-toolbar{padding:7px;gap:4px;margin-bottom:12px;background:#f7f6fa;border-color:#e8e5ef}.mask-toolbar .auto-select{flex:1;min-width:52px;min-height:44px;padding:4px;font-size:11px;letter-spacing:-.3px}.mask-toolbar .icon-tool{width:44px;min-width:44px}.mask-toolbar #autoTools{flex-basis:100%}.mask-toolbar #autoTools button{min-height:40px}.mask-toolbar .mask-tool-hint{font-size:10px}.mask-toolbar label{min-width:0}.mode-options{grid-template-columns:1fr 1fr;gap:6px}.mode-options button{padding:9px;min-height:70px}.mode-options b{font-size:11px}.mode-options small{font-size:10px}.mask-files{margin:8px 0}
 .reference-source{margin:8px 0 12px;padding:8px;gap:8px}.reference-source img{width:82px;height:58px}.reference-source b{font-size:11px}.reference-source small{font-size:10px}.approved-reference{padding:8px;display:grid;grid-template-columns:82px minmax(0,1fr);column-gap:8px;align-items:center}.approved-reference img{grid-row:span 2;width:82px;height:65px;max-height:65px}.approved-reference b{font-size:11px;margin:0}.approved-reference .text-button{min-height:32px;padding:4px 0;font-size:11px}.video-prompt-section{margin-top:12px;padding-top:12px}.video-prompt-section h2{font-size:18px}.quality{margin-top:12px;padding-top:10px}.video-status{padding:10px;margin-top:12px}
 #appFooter{flex:none;min-height:26px;margin:0;padding:2px 4px;gap:10px;font-size:9px;flex-wrap:nowrap}.beeble-attribution{font-size:10px}.beeble-attribution img{width:18px;height:18px}
 /* The entry screen places the upload beside the choice of editing modes. */
 body[data-has-video=false] main{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px 14px;overflow:auto;padding:10px 16px 0}
 body[data-has-video=false] .connection{grid-column:1/-1}body[data-has-video=false] .steps{display:none}body[data-has-video=false] .workflow-choice{grid-column:1;grid-row:2;display:grid;max-width:none;margin:0;align-self:stretch;grid-template-columns:1fr 1fr;gap:8px}body[data-has-video=false] .workflow-choice button{padding:12px;gap:5px;align-content:center}body[data-has-video=false] .workflow-choice b{font-size:14px}body[data-has-video=false] .workflow-choice span:not(.choice-icon){font-size:10px}
 body[data-has-video=false] .editor{grid-column:2;grid-row:2/4;display:block;max-width:none;min-height:0;width:100%;margin:0}body[data-has-video=false] .workspace{display:none}body[data-has-video=false] .panel{height:100%}body[data-has-video=false] .upload-card{margin-top:10px;min-height:48px}body[data-has-video=false] #videoPanel .fine{margin-top:10px}body[data-has-video=false] .upscale-entry{grid-column:1;grid-row:3;margin:0;max-width:none;width:100%;font-size:11px;min-height:44px}body[data-has-video=false] #appFooter{grid-column:1/-1;grid-row:4}
 dialog:not(#imageViewer){max-height:calc(100dvh - max(16px,var(--app-safe-top)) - max(16px,var(--app-safe-bottom)));padding:16px;scroll-padding:12px}dialog .dialog-heading h2{font-size:19px}.comparison img{height:44dvh}.image-viewer-bar{padding-top:max(6px,env(safe-area-inset-top),var(--app-safe-top));padding-left:max(12px,env(safe-area-inset-left),var(--app-safe-left));padding-right:max(12px,env(safe-area-inset-right),var(--app-safe-right));padding-bottom:6px}.image-viewer-bar button{min-height:40px}
 #clipDialog,#frameDialog{width:min(940px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:6px 18px}#clipDialog:not([open]),#frameDialog:not([open]){display:none}#clipDialog .dialog-heading,#frameDialog .dialog-heading{grid-column:1/-1}#clipSource,#frameDialog>p{grid-column:1/-1;margin:0!important}#clipVideo,#frameVideo{grid-column:1;grid-row:3/11;height:100%;max-height:calc(100dvh - 120px);min-height:0;object-fit:contain;align-self:center}#clipDialog>:not(.dialog-heading):not(#clipSource):not(#clipVideo),#frameDialog>:not(.dialog-heading):not(p):not(#frameVideo){grid-column:2}#clipDialog .clip-range{margin-top:0;gap:2px}#clipDialog .clip-range input[type=range]{margin:0;height:24px}#clipDialog .fine{margin:3px 0;font-size:10px}#clipDialog .notice{margin:2px 0;padding:6px}.clip-summary b{font-size:11px}.clip-summary button{min-height:32px;padding:5px}
}
@media(min-width:560px) and (max-width:740px) and (orientation:landscape){.mask-toolbar .auto-select{flex-basis:100%}.mask-toolbar .icon-tool{flex:1}.steps small{display:none}.steps button{min-height:38px}}