:root{--bg:#f7f7f5;--paper:#fff;--ink:#30343a;--muted:#85878c;--line:#e6e7e9;--green:#ba604b;--soft:#fbf0ec;--accent:#c97560;--cyan:#6a9da8;--mono:'SFMono-Regular',Consolas,monospace}
body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC',sans-serif;-webkit-font-smoothing:antialiased}main{max-width:1540px;padding:0 40px 48px}button{border-radius:8px;transition:background 180ms ease,border-color 180ms ease,box-shadow 180ms ease;color:var(--ink);font-size:13px;font-weight:500}button:hover{background:#f5f5f4;border-color:#d3d4d7}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default;opacity:.4}.primary{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 2px 4px #a4574010}.primary:hover{background:#b96753;border-color:#b96753}.chosen{background:var(--soft)!important;color:#a6503f;border-color:#d8a596!important;box-shadow:0 0 0 2px #c9756008}svg{width:18px;height:18px;flex-shrink:0}h1{letter-spacing:-.7px;font-weight:600}p{color:#7b7f85}input,textarea,select{background:#fff;border-color:var(--line);border-radius:7px}label{color:#686c73}input[type=range],input[type=checkbox]{accent-color:var(--accent)}.flow-topbar{height:72px}.flow-topbar #brandHome{font-size:19px;color:var(--ink);letter-spacing:-.5px}.flow-topbar #brandHome span{letter-spacing:0;color:#93969b;border-left:1px solid var(--line);padding-left:14px}.flow-topbar select{color:#777b82;font-size:12px}.flow-steps{padding:24px 0;gap:32px;border-bottom:1px solid var(--line)}.flow-steps button{color:#85898f;font-size:12px;padding:7px 9px;gap:9px}.flow-steps button.current{color:#ac5d4c;background:#fcf1ed}.flow-steps button:hover{background:#f1f1ef;color:var(--ink)}.flow-steps button.done{color:#686c73}.flow-steps b{font-family:var(--mono);border-color:#dadcdf;background:#fff;color:#93979c;width:23px;height:23px}.flow-steps .current b{background:#c97560;border-color:#c97560}.flow-steps .done b{background:#f1f2f2;color:#85898f}.flow-heading{margin:38px auto 30px}.flow-heading>span,.eyebrow{color:#ad7668;font-family:var(--mono);letter-spacing:1.8px;font-size:10px}.flow-heading h1{font-size:30px}.flow-heading p{font-size:13px}.focus-panel,.panel,.plan-groups,.output-card,.production-controls{border-color:var(--line);box-shadow:0 2px 5px #30343a03;border-radius:12px}.pill{background:#f6eeea;color:#ad6d5d}.plan-summary{background:#f0f1f1;border:1px solid var(--line);border-radius:12px}.plan-summary strong{font-family:var(--mono);font-size:26px;color:#45494f}.plan-summary>div{border-color:#dfe1e2}.plan-summary span,.plan-groups summary>span,.plan-groups small{color:#85898f}.ai-recommendation{background:#fffcfa;border-color:#eaded8}.ai-recommendation p{color:#7c7b7b}.step-note summary{color:#777b82}.suggestions>div{background:#f0f2f2}.first-ready{background:#eff4f4;border:1px solid #dce6e7}.first-ready i,i{background:var(--cyan)}.first-ready span{color:#68858b;font-family:var(--mono)}.first-player{background:#edeff0}.bar{background:#edf0f1}.bar b{background:var(--accent)}.source{background:#f4f4f3}.first-clip-notice,.first-clip-notice:hover{background:#fffffff5;border:1px solid var(--line);color:var(--ink);box-shadow:0 8px 28px #3b414012;backdrop-filter:blur(8px)}.first-clip-notice p{color:#85898f}.first-clip-notice button{color:var(--green)}.first-clip-notice .notice-close{color:#8e9298}.first-clip-notice .notice-close:hover{background:#f1f2f2}#toast{background:#fff;color:#474d54;border:1px solid var(--line);box-shadow:0 6px 22px #35383c12}dialog::backdrop{background:#30343a80}.thumb{background:#e9ebec}.clip:hover{border-color:#d4a595}.source-choice .pill{background:#eff3f3;color:#60828a}
/* Layout workbench */
.studio-page .heading{margin:24px 0 22px;align-items:center}.studio-page .heading h1{font-size:27px;margin:9px 0}.studio-page .heading p{font-size:12px}.studio-page .heading .eyebrow{display:none}.studio-page #layoutBack{padding:0;background:none;border:0;font-size:11px;color:#8c9096}.studio-page #layoutNext{padding:12px 20px}.studio-page>.step-note{margin:18px 0 0;padding:14px 0 0}.simple-editor{border-radius:14px;background:#fff;border-color:#e2e4e6;box-shadow:0 4px 18px #373d4204}.simple-toolbar{height:64px;padding:12px 20px;background:#ffffffd9;gap:16px}.workspace-caption{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600}.live-dot{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 3px #6a9da80c}.ratio-chip{font-family:var(--mono);font-size:10px;font-weight:400;color:#9499a0;background:#f3f4f5;border-radius:4px;padding:4px 7px;margin-left:3px}.simple-toolbar .preview-picker{margin:0 0 0 auto;display:flex;gap:10px;align-items:center;font-size:11px;min-width:0;color:#969ba2}.preview-picker select{width:240px;max-width:25vw;margin:0;padding:7px 10px;font-size:11px;white-space:nowrap;text-overflow:ellipsis}.simple-toolbar #undo{display:flex;gap:7px;align-items:center;padding:7px 10px;border-color:transparent;color:#858990}.simple-workspace{display:grid;grid-template-columns:218px minmax(300px,1fr) 268px;min-height:620px;align-items:stretch}.studio-left{position:static;inset:auto;width:auto;background:#fcfcfb;padding:0;border-right:1px solid var(--line)}.rail-section{padding:22px 18px;border-bottom:1px solid var(--line)}.section-caption{font-size:12px;font-weight:600;color:#51565e;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-caption>span{font-size:10px;font-weight:400;color:#9a9ea4}.preset-card{display:flex;align-items:center;gap:10px;width:100%;padding:10px 8px;border:1px solid transparent;background:transparent;text-align:left;margin:4px 0}.preset-card>span:nth-child(2){flex:1;min-width:0}.preset-card strong{font-size:12px;font-weight:500;display:block}.preset-card small{display:block;font-size:9px;color:#999da3;margin-top:5px;white-space:nowrap}.preset-card[aria-pressed=true]{border-color:#d9a18f;box-shadow:0 0 0 3px #c9756007;background:#fff9f6}.preset-sample{display:flex;flex-direction:column;align-items:center;justify-content:center;width:35px;height:46px;border-radius:5px;background:#eef0f1;border:1px solid #e2e5e6;font-size:15px;color:#737a82;flex-shrink:0}.preset-sample i{width:17px;height:2px;background:#bcc1c6;border-radius:1px;margin:4px 0 0}.preset-sample.bold{font-weight:800;font-size:19px}.preset-sample.soft{background:#f6f0ec;color:#a07e71}.preset-sample.soft span{background:#fff9f5;padding:2px}.preset-check{display:none;color:var(--accent)}.preset-check svg{width:13px}.preset-card[aria-pressed=true] .preset-check{display:block}.add-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px}.add-menu button{padding:10px 7px;display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:11px;background:#fff}.add-menu svg{width:15px;color:#9298a0}.layer-section{border:0}.layer-row{width:100%;border:1px solid transparent;background:none;display:flex;gap:10px;text-align:left;align-items:center;padding:11px 9px;margin-bottom:4px;color:#737983}.layer-row>span:first-of-type{flex:1;font-size:12px}.layer-row small{display:block;font-size:9px;color:#a1a5aa;margin-top:5px}.layer-row svg{width:16px}.layer-row.is-selected{background:#fcf3ef;border-color:#e6b9aa;color:#ac6452;box-shadow:0 0 0 2px #c9756005}.layer-dot{width:5px;height:5px;border-radius:50%;background:#cbd0d5}.is-selected .layer-dot{background:var(--accent)}.canvas-side{background:#f1f2f3;padding:30px 20px 20px;gap:15px;min-width:0;position:relative;justify-content:center}.canvas{width:254px;height:auto;aspect-ratio:9/16;background:#e8eaec;box-shadow:0 3px 12px #30363a10;border:1px solid #dfe2e4}.canvas>img{height:100%;position:absolute;inset:0;pointer-events:auto}.block.hitbox.sel{border:1.5px solid #d2826b;box-shadow:0 0 0 3px #e7b29f24}.block.hitbox:hover{border-color:#e9b4a1}.module-label{background:#c97560;border-radius:3px 3px 0 0;top:-19px;font-size:9px;padding:3px 5px}.block .handle{border:1.5px solid #c97560;width:9px;height:9px;background:white}.delete-module{border-color:#e7c2b4;color:#b96d56!important;width:23px;height:23px;right:-12px;top:-12px;font-size:17px;box-shadow:none}.canvas-side #previewStatus{font-size:10px;color:#8c929a;min-height:24px}.preview-footer{display:flex;align-items:center;gap:10px}.preview-footer button{display:flex;align-items:center;gap:8px;padding:9px 15px;font-size:11px;background:#ffffffc7;border-color:#dfe2e4}.preview-footer svg{width:13px;height:13px}.canvas-help{font-size:10px;color:#a1a5aa;margin:0}.simple-side{padding:0 20px;max-height:none;overflow:visible;border-left:1px solid var(--line);background:#fff;display:block}.inspector-caption{height:62px;border-bottom:1px solid var(--line);margin:0}.selected-props{margin:0;padding:18px 0;border:0}.property-heading{padding:0 0 17px;justify-content:space-between;border-bottom:1px solid #f0f1f2;margin-bottom:18px}.property-heading strong{font-size:13px!important;font-weight:500}.property-heading #removeBlock{width:29px;height:29px;padding:5px;border:0;background:none;color:#a0a4ab}.property-heading #removeBlock:hover{color:#b16652;background:var(--soft)}.property-heading svg{width:16px;height:16px}.selected-props label{font-size:11px;margin:0 0 18px;color:#737983}.content-field textarea{min-height:75px;font-size:12px;line-height:1.8;background:#fafbfb}.field-hint{display:block;font-size:9px;color:#a1a5ab;margin-top:7px;line-height:1.6}.font-row{align-items:flex-end;gap:8px;margin-bottom:20px}.font-row label{margin:0;flex:1}.font-row select{padding:8px;font-size:12px}.font-row #boldText{width:34px;height:34px;padding:0;font-weight:650}.size-field output{float:right;font-family:var(--mono);font-size:11px;color:#858c95}.size-field input{margin-top:12px;accent-color:var(--accent)}.style-row{display:grid;grid-template-columns:46px 1fr;gap:15px}.style-row input[type=color]{width:36px;height:32px;padding:3px;background:white}.align-options{gap:0;margin-top:8px}.align-options button{padding:8px 4px;font-size:10px;border-radius:0;height:32px}.align-options button:first-child{border-radius:5px 0 0 5px}.align-options button:last-child{border-radius:0 5px 5px 0}.advanced-style{border-top:1px solid var(--line);padding:18px 0}.advanced-style summary{color:#7c828a;font-size:11px;cursor:pointer;margin-bottom:18px}.advanced-style summary>span{float:right;color:#a2a6ad;font-size:10px}.advanced-style input[type=color]{width:38px;height:30px;padding:3px}.advanced-style .row{margin-bottom:18px}.inspector-empty{text-align:center;padding:96px 0}.inspector-empty>svg{width:29px;height:29px;color:#bdc3c9;margin-bottom:20px}.inspector-empty h3{font-size:13px;font-weight:500}.inspector-empty p{font-size:11px;line-height:1.9;color:#9b9fa6}.inspector-empty>span{display:block;font-size:10px;color:#afb3b8;margin-top:24px}#inlinePreview:empty{display:none}#inlinePreview video{width:190px;max-height:335px;border-radius:4px}.studio-page>.step-note{font-size:11px}.studio-page>.step-note summary{font-size:11px}.simple-side .small{font-size:11px}#previewStatus:hover{background:#e9ecee}.updating>img{opacity:.8}
@media(min-width:1450px){.canvas{width:280px}.simple-workspace{min-height:675px}.canvas-side{padding-top:34px;padding-bottom:26px}}
@media(max-width:1100px){main{padding:0 24px 32px}.simple-workspace{grid-template-columns:182px minmax(260px,1fr) 230px}.rail-section{padding:20px 12px}.simple-side{padding:0 16px}.preset-card{gap:7px;padding:8px 5px}.preset-card small{font-size:8px}.preset-sample{width:28px;height:39px}.flow-steps{gap:16px}.canvas{width:236px}.canvas-side{padding:28px 10px 18px}.canvas-help{font-size:9px}}
@media(max-width:850px){.simple-workspace{grid-template-columns:170px 1fr}.simple-side{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:0 22px}.inspector-empty{padding:24px}.inspector-empty>svg,.inspector-empty>span{display:none}.selected-props{max-width:520px;margin:auto}.simple-toolbar .preview-picker{font-size:0}.preview-picker select{max-width:35vw}.canvas{width:254px}.flow-steps{gap:4px}.flow-steps button{font-size:10px;padding:6px;gap:5px}.studio-page .heading h1{font-size:24px}}
@media(max-width:550px){main{padding:0 14px 25px}.flow-topbar #brandHome{font-size:17px}.flow-topbar #brandHome span{display:none}.flow-topbar{height:60px}.flow-steps{padding:16px 0;gap:0}.flow-steps button{font-size:0;gap:4px}.flow-steps button.current{font-size:10px}.studio-page .heading{display:flex;align-items:end;gap:10px}.studio-page .heading p{max-width:210px;font-size:11px}.studio-page #layoutNext{font-size:11px;padding:10px}.simple-workspace{display:flex;flex-direction:column}.studio-left{border:0;display:grid;grid-template-columns:1fr 1fr}.studio-left .rail-section:first-child{grid-column:1/-1}.rail-section{padding:14px}.section-caption{margin-bottom:10px}#studioLooks{display:flex;gap:4px}.preset-card{padding:7px 4px;justify-content:center}.preset-card small,.preset-check,.preset-sample{display:none}.preset-card strong{font-size:11px}.layer-section{border-bottom:1px solid var(--line)}.layer-row{padding:4px 6px}.layer-row small{display:none}.layer-row>span:first-of-type{font-size:10px}.canvas-side{order:2;padding:28px 12px 18px}.simple-side{order:3;width:100%}.simple-toolbar{padding:10px;gap:6px}.workspace-caption{font-size:10px}.ratio-chip{display:none}.preview-picker select{max-width:145px;font-size:10px}.simple-toolbar #undo{font-size:10px;padding:4px}.canvas{width:244px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Compact desktop / side-panel: keep canvas and inspector together. */
@media(min-width:551px) and (max-width:850px){.flow-topbar{height:58px}.flow-steps{padding:15px 0}.studio-page .heading{margin:18px 0}.studio-page .heading h1{font-size:23px;margin:7px 0}.simple-toolbar{height:51px;padding:9px 14px}.simple-workspace{grid-template-columns:minmax(240px,1fr) 224px;min-height:0}.studio-left{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;background:#fcfcfb}.rail-section{padding:12px 14px;border-bottom:0}.rail-section:first-child{border-right:1px solid var(--line)}.section-caption{font-size:10px;margin-bottom:9px}.section-caption>span{display:none}#studioLooks{display:flex;gap:4px}.preset-card{margin:0;padding:7px 5px;justify-content:center;background:white;border-color:#e8e9eb}.preset-card strong{font-size:10px}.preset-sample,.preset-card small,.preset-check{display:none}.add-menu{display:flex;gap:5px}.add-menu button{padding:7px 6px;font-size:10px;gap:4px;white-space:nowrap;flex:1;justify-content:center}.add-menu svg{width:12px;height:12px}.layer-section{grid-column:1/-1;padding:8px 14px;border-top:1px solid #eff0f1;display:flex;align-items:center;gap:12px}.layer-section>.section-caption{margin:0;flex-shrink:0;color:#969ba2;font-weight:400}#studioLayers{display:flex;gap:6px}.layer-row{width:auto;padding:5px 10px;margin:0;gap:6px}.layer-row>span:first-of-type{font-size:10px}.layer-row small,.layer-dot{display:none}.layer-row svg{width:13px;height:13px}.simple-side{grid-column:auto;border-left:1px solid var(--line);border-top:0;padding:0 16px}.inspector-caption{height:44px;font-size:10px}.canvas-side{padding:26px 12px 16px;justify-content:flex-start;gap:10px}.canvas{width:218px}.canvas-help{font-size:8px}.inspector-empty{padding:75px 0}.inspector-empty>svg{display:inline-block}.selected-props{padding-top:14px}.property-heading{margin-bottom:14px;padding-bottom:12px}.selected-props label{font-size:10px;margin-bottom:14px}.content-field textarea{min-height:65px}.advanced-style{padding-top:14px}.field-hint{font-size:8px}.style-row{gap:10px}.align-options button{font-size:9px}.preview-picker select{width:230px;max-width:38vw}}
.add-menu button span{white-space:nowrap}