/* Task 052 B UI. All existing control IDs and real rendering remain active. */
:root{--ink:#142840;--blue:#185bd6;--mute:#52657c;--line:#d9e2ee;--bg:#f4f7fb}
body{padding:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65}
.shell{max-width:none;margin:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.header{background:#fff;padding:18px max(20px,calc((100vw - 1160px)/2));gap:18px;border-bottom:1px solid var(--line);flex-direction:row-reverse;align-items:center}
.header{flex-wrap:nowrap}.header #releaseVersion{flex:0 0 auto;max-width:170px;border-radius:20px;white-space:normal;font-size:11px}.b-panel.b-hero .b-hero-title{font-size:32px;line-height:1.4;margin:0 0 8px}
.brand{font-size:17px;letter-spacing:0;white-space:normal}.brand-mark{display:none}.header .tag{font-size:12px;margin:3px 0 0}.sample-banner{font-size:12px;background:#fff1d6;color:#724813;white-space:nowrap;flex-shrink:0}
.main{max-width:1208px;padding:24px;margin:0 auto}.b-panel{background:white;border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0;box-shadow:0 8px 26px #213e6410}
.b-hero{padding:0 0 20px;background:transparent;border:0;box-shadow:none}.b-eyebrow{font-size:12px;letter-spacing:.12em;color:#2859a3;font-weight:800;margin:0 0 5px}.b-hero-title{font-size:32px;line-height:1.4;margin:0 0 8px;letter-spacing:.02em}.b-lead{font-size:16px;color:var(--mute);margin:0 0 12px}.b-trial{display:inline-block;background:#fff8e9;border:1px solid #efdfbd;border-radius:8px;padding:8px 12px;color:#65532c;font-size:13px;margin:0}
.b-layout{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(360px,1.12fr);gap:24px;align-items:start}.b-preview{grid-column:1;grid-row:1/span 3}.b-entry{grid-column:2;grid-row:1}.b-output{grid-column:2;grid-row:2;background:#f8fbff;border-color:#c4d6ef}.b-settings{grid-column:2;grid-row:3}
.b-panel h2{font-size:19px;line-height:1.4;margin:0 0 14px}.b-panel h2 label{font:inherit}.b-step-label{display:table;background:#eaf2ff;color:#1858ae;font-size:12px;font-weight:800;border-radius:6px;padding:4px 8px;margin:0 0 9px}.b-progress{font-size:14px;color:#174c92;margin:4px 0 14px}.b-inline-actions{display:flex;justify-content:flex-end;margin:0 0 9px}.b-inline-actions .btn{border:0;padding:4px 0;background:transparent;text-decoration:underline;color:#1858ae;box-shadow:none}.b-shortcuts{display:flex;gap:8px}.b-shortcuts .btn{flex:1;min-width:0}.b-footer{max-width:1208px;margin:auto;padding:0 24px 30px;font-size:12px;color:var(--mute)}
.preview-card{padding:0;border:0;box-shadow:none;background:transparent}.above{flex-wrap:wrap;gap:6px;margin:0 0 15px}.label{font-size:13px;color:var(--mute)}.stage{max-width:360px;margin:auto;border-radius:5px;box-shadow:0 12px 30px #14284024}
.stage[data-scene-format="sample"]{aspect-ratio:9/16!important}.stage #intro{width:100%;height:100%;object-fit:contain}.stage canvas{display:block;width:100%;height:100%}
.preview-switch{margin:18px 0 12px}.preview-switch .btn{min-height:48px;font-size:14px;white-space:normal}.btn{border-radius:10px;font-size:15px;min-height:46px;padding:10px 14px;line-height:1.5;white-space:normal;color:var(--ink)}.btn.primary{background:var(--blue);border-color:var(--blue)}.btn:hover:not(:disabled){background:#edf3fc}.btn.primary:hover:not(:disabled){background:#124bb5}.btn:disabled{cursor:default;opacity:.55}.btn:active{transform:none}.btn:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #f1ae34;outline-offset:3px}
#bPreview{width:100%;min-height:48px}.note{font-size:14px;line-height:1.65;color:var(--mute);overflow-wrap:anywhere}.entry-note{margin:10px 0 0}#source{font-size:16px;min-height:154px;line-height:1.8;background:#fcfdff;padding:14px;border-radius:10px;resize:vertical}.draft-bar{margin-top:8px}.draft-bar #draftStatus{font-size:13px;color:var(--mute)}#generate{width:100%;font-size:16px;box-shadow:none;min-height:50px}.fix028-explain{margin:0 0 14px}#generateLive,#status:not(:empty){padding:10px 12px;background:#eef4fc;border-radius:9px;color:#174c92}#status:empty{display:none}#saved{padding:14px;background:#fff;border-color:#c8d8ec}#fileInfo:empty,#gifStatus:empty{display:none}.count{font-size:12px;flex-wrap:wrap}.count b{font-size:17px}.fix028-share-details{padding:0;border:1px solid var(--line);border-radius:10px;background:#fff}.fix028-share-details>button{margin:10px!important;width:calc(100% - 20px)!important}.fix028-share-details summary{padding:13px!important}
#controls{padding:0;border:0;min-width:0;margin:0}.collapser{border:0}.b-settings details{border:1px solid var(--line);border-radius:11px;margin:10px 0;overflow:hidden;background:white}.b-settings details>summary{display:flex;min-height:62px;padding:13px 15px;align-items:center;line-height:1.5;font-size:15px}.b-settings details>summary::after{flex:none;align-self:center}.b-settings details[open]>summary{background:#f0f5fd;border-bottom:1px solid var(--line)}details:not([open])>summary:after{content:'＋'}details[open]>summary:after{content:'−'}.b-summary-copy{min-width:0}.b-summary-copy strong,.b-summary-copy small{display:block}.b-summary-copy small{font-size:12px;color:var(--mute);font-weight:400;margin-top:2px}.b-settings .inside{padding:16px;font-size:14px}.b-settings .inside>label{display:block;margin:14px 0}.b-settings select,.b-settings input[type=number]{display:block;width:100%;min-height:44px;padding:8px;border:1px solid #bdcce0;border-radius:8px;margin:5px 0 0;background:white;color:var(--ink)}.b-settings input[type=range]{display:block;width:100%;min-height:44px;accent-color:var(--blue);margin:2px 0}.b-settings input[type=radio],.b-settings input[type=checkbox]{width:19px;height:19px;min-width:19px;accent-color:var(--blue);vertical-align:middle}.b-settings .scene-formats{grid-template-columns:1fr 1fr;gap:8px}.b-settings .scene-formats label{font-size:14px;min-height:46px;padding:9px}.b-settings .scene-formats label:has(input:checked){padding:8px}.b-range-scale{display:flex;justify-content:space-between;gap:5px;font-size:12px;color:var(--mute)}.b-range-scale p{margin:0 0 10px}#bChooseImage{width:100%;margin:0 0 10px}#brightnessReset,#removeBackground{display:block;width:100%;margin:9px 0}.settings label{display:block}.b-settings .inside>label>input[type=checkbox]{display:inline;width:19px;min-width:19px}.b-settings input:not([type=checkbox]):not([type=radio]){max-width:100%}
#typography044{padding:16px;margin:0;border:0;border-radius:0}#typography044>h2{display:none}#typography044 fieldset{border:0;padding:0;margin:12px 0}#typography044 legend{font-weight:750;font-size:14px;margin-bottom:8px}#typography044 .scope048{gap:8px}#typography044 .scope048 label{flex:1 1 160px;border:1px solid #d5e0ec;border-radius:8px;padding:9px;margin:0;min-height:46px;white-space:normal}#typography044 #mainStyle048>label{grid-template-columns:minmax(0,1fr) minmax(105px,58%);gap:10px;margin:12px 0;font-size:14px}#typography044 #mainStyle048 select,#typography044 #mainStyle048 input{margin:0}#typography044 .extra-style048,#typography044 #fixedRegions048{padding:0}#typography044 details>summary{padding:12px 14px}#typography044 .extra-style048>label,#typography044 #fixedRegions048 label{margin:12px}#typography044 .extra-style048>.note{margin:12px}#typography044 .format-actions047 .btn{flex:1 1 45%;min-width:0;font-size:14px}.palette048{grid-template-columns:repeat(4,minmax(0,1fr))}.palette-button048{font-size:13px;min-height:46px}.editing-target048{font-size:14px}.page-accordion048>summary{font-size:14px;overflow-wrap:anywhere}.page-inside048{padding:14px}.page-inside048 input[type=number]{width:100%;max-width:130px}.page-text{font-size:15px}dialog{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #b8c8dc;border-radius:16px;padding:24px}dialog::backdrop{background:#14284088}dialog h2{font-size:20px}dialog .actions{flex-wrap:wrap}dialog .actions>.btn{flex:1;min-width:100px}#formatDialog047 .format-actions047{display:flex}#formatDialog047 .btn{flex:1}
@media(max-width:760px){.header{padding:14px 16px;align-items:flex-start}.brand{font-size:15px}.header .tag{font-size:11px}.sample-banner{font-size:10px;max-width:110px;white-space:normal}.main{padding:18px 12px 28px}.b-hero{padding:0 4px 18px}.b-hero-title{font-size:25px}.b-lead{font-size:14px}.b-trial{font-size:12px}.b-layout{display:flex;flex-direction:column;gap:14px}.b-panel{width:100%;padding:18px;border-radius:14px}.b-hero{padding:0 4px 18px}.b-preview{order:0}.b-entry{order:1}.b-output{order:2}.b-settings{order:3}.stage{max-width:100%}.b-shortcuts .btn{font-size:14px;padding:10px 8px}.b-footer{padding:0 16px 25px}.b-settings .inside{padding:14px}#typography044{padding:14px}#typography044 #mainStyle048>label{grid-template-columns:1fr;gap:5px}.palette048{gap:6px}.palette-button048{font-size:12px}.b-settings .scene-formats{grid-template-columns:1fr 1fr}.b-settings .scene-formats label{font-size:13px}.b-panel h2{font-size:19px}}
@media(max-width:340px){.brand{font-size:13px}.header .tag{font-size:10px}.sample-banner{max-width:85px}.b-settings .scene-formats{grid-template-columns:1fr}.palette048{grid-template-columns:repeat(2,minmax(0,1fr))}.b-preview .btn{font-size:13px;padding:10px 8px}.b-settings .inside{padding:12px}#typography044{padding:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.b-output .primary-action-panel{padding:0;border:0;background:transparent;margin:0;gap:10px}#generateLive{display:none}#saved[hidden]{display:none!important}
@media(max-width:760px){.b-panel.b-hero .b-hero-title{font-size:25px}.header #releaseVersion{max-width:104px;font-size:10px;line-height:1.5}.header{gap:10px}.b-hero .b-eyebrow{margin-top:0}}

/* REV04: compact masthead and horizontal preview. Output pixels keep the chosen ratio. */
.header{padding:8px max(16px,calc((100vw - 1160px)/2));gap:10px;min-height:36px}.header .brand{font-size:13px;font-weight:650;line-height:1.25;letter-spacing:0}.header .tag{display:none}.header #releaseVersion{font-size:10px;padding:2px 8px;line-height:1.5;max-width:95px}
.main{padding-top:12px}.b-panel.b-hero{padding:0 0 12px}.b-panel.b-hero .b-hero-title{font-size:26px;line-height:1.35;letter-spacing:-.02em;margin:0 0 4px}.b-hero .b-journey{font-size:14px;line-height:1.6;margin:0 0 3px;color:#1858ae;font-weight:650}.b-hero .b-lead{font-size:13px;line-height:1.6;margin:0;color:#52657c}
.b-preview .stage,.b-preview .stage[data-scene-format]{aspect-ratio:16/9!important;max-width:none;width:100%}.b-preview .stage canvas,.b-preview .stage #intro{width:100%;height:100%;object-fit:contain}.b-preview .above{margin-bottom:10px}.b-preview .preview-switch{margin:12px 0 8px}.b-preview>.note{margin-bottom:0;font-size:12px}
@media(max-width:760px){.header{padding:8px 16px;gap:8px}.header .brand{font-size:12px;line-height:1.25}.header #releaseVersion{font-size:9px;max-width:80px;padding:2px 7px}.main{padding-top:10px}.b-panel.b-hero{padding:0 4px 10px}.b-panel.b-hero .b-hero-title{font-size:clamp(18px,5.1vw,24px);line-height:1.35;letter-spacing:-.02em;margin-bottom:4px}.b-hero .b-journey{font-size:12px;line-height:1.6;margin-bottom:3px}.b-hero .b-lead{font-size:12px;line-height:1.6}.b-preview{padding:16px}.b-preview .above{margin-bottom:8px}.b-preview .label{font-size:12px}.b-preview .preview-switch{margin-top:10px}.b-preview>.note{font-size:12px;line-height:1.6}}