/* Fixed editing workspace: the parameter body owns the only persistent scroll. */
:root{--base:#f0f0ee;--panel:#fff;--surface:#f6f6f4;--border:#dadad8;--muted:#676765;--text:#393937;--lime:#737371;font-size:15px}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh;display:grid;grid-template-rows:68px minmax(0,1fr)}
button,input,select,textarea{font-size:15px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,#inspector-body:focus-visible{outline:3px solid #737371;outline-offset:2px}
.app-header{height:68px;padding:0 24px;background:#fcfcfa;border-bottom-color:#d6d6d4}
.brand{font-size:27px;font-weight:700;color:#5e5e5c}.button{font-size:15px;font-weight:600;min-height:42px;border-radius:9px}
.workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 336px;min-height:0;height:100%;overflow:hidden}
.sidebar,.main,.inspector{min-height:0;overflow:hidden}
.sidebar{padding:22px 14px 16px;gap:12px;background:#f4f4f2}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:1px;color:#666664;flex-shrink:0}
#tool-list{flex-shrink:0}.tool{min-height:45px;padding:11px 12px;margin:2px 0;color:#5d5d5b;border-radius:9px}
.tool-copy b{font-size:15px;font-weight:500}.tool-symbol{display:none}
.tool.active{background:#eeeeec;border-color:#ccccca;color:#5e5e5c;box-shadow:none}.tool.active .tool-copy b{font-weight:700}
.tool:hover{background:#ececea}.sidebar-divider{margin:4px 6px;flex-shrink:0}
#asset-list{flex:1;min-height:0;overflow:hidden}
.asset-item{height:40px;margin-bottom:6px;min-width:0}.asset-load{font-size:13px;padding:9px 10px;background:#fcfcfa}
.asset-item .icon-button{width:24px}.asset-pagination{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:13px;color:#5d5d5b}
.asset-pagination button:disabled{cursor:default;opacity:.35}
.sidebar-bottom{margin-top:0;padding:0 6px;flex-shrink:0}.sidebar-bottom .text-button{margin-top:0;font-size:14px}
.main{max-width:none;margin:0;width:100%;padding:20px 24px;display:grid;grid-template-rows:minmax(0,1fr) 164px 112px;gap:14px;background:#f3f3f1}
.page-heading{margin:0;min-height:0}.page-heading h1{font-size:25px;font-weight:700;letter-spacing:0;margin:0}
.preview-panel{max-width:none;min-height:0;display:grid;grid-template-rows:46px minmax(0,1fr) 48px;border-radius:12px;border-color:#d1d1cf;box-shadow:0 4px 16px #5c5c5a08}
.preview-toolbar{height:auto;padding:0 14px;background:#fcfcfa}.preview-label{font-size:14px;font-weight:600;color:#5d5d5b}
.preview-actions{gap:6px}.preview-actions>.select-control{width:146px}.preview-actions .select-trigger{font-size:14px;min-height:34px;padding:6px 10px;background:#f4f4f2;color:#525250}
.icon-button{color:#696967;width:32px;height:32px}.icon-button.active,.icon-button:hover{color:#5e5e5c;background:#f0f0ee}
.preview-surround{min-height:0;overflow:hidden;padding:16px;background:#e5e5e3}
.stage,.stage.portrait{flex:none;max-width:100%;max-height:100%;min-height:0;border-radius:4px;box-shadow:0 3px 14px #3f3f3d14}
.checker{background-color:#ececea;background-image:conic-gradient(#e0e0de 25%,transparent 0 50%,#e0e0de 0 75%,transparent 0);background-size:20px 20px}
.stage.checker-dark{background-color:#383836;background-image:conic-gradient(#424240 25%,transparent 0 50%,#424240 0 75%,transparent 0)}
.safe-guides{border-color:#82828066}.safe-guides::before,.safe-guides::after{background:#82828066}
.background-bar{min-height:0;flex-wrap:nowrap;padding:8px 14px;gap:12px;background:#fcfcfa;font-size:13px;color:#5d5d5b;overflow:hidden}
.background-options{gap:8px;flex-shrink:0}.bg-swatch{width:23px;height:23px;border-radius:5px;border:1px solid #a2a2a0}
.bg-swatch.dark{background:#333331}.bg-swatch.blue{background:#dededc}.bg-swatch.selected{outline:2px solid #737371;outline-offset:2px}
.text-button{font-size:14px;color:#5d5d5b}.background-bar .text-button{font-size:13px;margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.timeline{margin:0;padding:10px 14px 11px;min-height:0;border-radius:12px;background:#fcfcfa;box-shadow:none}
.transport{gap:10px;padding-bottom:8px;min-height:37px}.play-button{width:32px;height:32px;font-size:13px}
.timecode{font-size:13px;color:#676765}.timecode b{color:#454543}.timeline-fps{font-size:12px;color:#676765}
.timing-controls{gap:12px;padding:9px 0 0;grid-template-columns:1fr 1fr 1.12fr}
.timing-controls>label{font-size:13px;color:#5d5d5b;flex-direction:row;align-items:center;gap:8px}
.timing-input{background:#f4f4f2;border-color:#cececc}.timing-input input{font-size:15px;padding:6px 2px 6px 8px;color:#454543}.timing-input>span{font-size:12px;color:#676765;padding-right:6px}
.timeline-track{margin-top:10px;height:44px}.ticks{font-size:11px;color:#676765;margin-bottom:6px}.clip{height:24px;font-size:12px;color:#626260;background:#ececea;border-color:#cececc}.clip-wave{opacity:.25}.timeline-track::after{top:19px;bottom:0}
.styles-section{margin:0;min-height:0;display:grid;grid-template-rows:20px minmax(0,1fr);gap:8px}
.section-heading{margin:0}.section-heading h2{font-size:16px;font-weight:700}.preset-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:0}
.preset{display:grid;grid-template-rows:minmax(0,1fr) 31px;background:#f1f1ef;border-color:#d1d1cf;min-width:0;min-height:0;border-radius:9px}
.preset canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;min-height:0}.preset-caption{display:block;font-size:14px;padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#5d5d5b;background:#fcfcfa}
.preset.selected{border-color:#737371;box-shadow:0 0 0 1px #737371}.preset.selected .preset-caption{background:#eeeeec;color:#5e5e5c;font-weight:600}
.inspector{background:#fff;display:flex;flex-direction:column;border-color:#d0d0ce;box-shadow:none}
.inspector-heading{padding:22px 22px 18px;flex-shrink:0}.inspector-heading strong{font-size:17px;font-weight:700}
.inspector-tabs{flex-shrink:0;padding:0 22px;gap:18px}.inspector-tabs button{font-size:15px;padding-bottom:14px;color:#676765;min-height:38px}
.inspector-tabs button.active{color:#5e5e5c;border-bottom-width:3px;font-weight:700}
#inspector-body{min-height:0;flex:1;display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px 20px 28px 22px;scrollbar-width:thin;scrollbar-color:#acacaa #f5f5f3}
.control-section+.control-section{margin-top:25px;padding-top:22px;border-top:1px solid var(--border)}
.control-heading{font-size:14px;font-weight:700;letter-spacing:0;color:#50504e;margin-bottom:18px}
.field{font-size:14px;color:#646462;gap:8px;margin-bottom:18px}.field input,.field select,.field textarea{font-size:15px;background:#fafaf8;border-color:#cececc;min-height:42px}
.field textarea{resize:none;min-height:92px}.field-row{gap:12px}.input-unit span{font-size:12px;color:#676765}.color-field input[type=text]{font-size:14px}
input[type=color]{width:42px;height:42px}.help,.inspector .help{font-size:13px;color:#676765;line-height:1.75}.range-row input[type=number]{font-size:14px;width:72px}
.check-field{font-size:14px;color:#5d5d5b;gap:10px;margin:18px 0}input[type=checkbox]{width:17px;height:17px;flex-shrink:0}
.position-grid{width:112px;gap:6px}.position-grid button{height:30px;background:#f4f4f2;border-color:#c8c8c6;color:#696967;font-size:15px}
.select-trigger{font-size:15px;min-height:42px;color:#50504e;background:#fafaf8;border-color:#cececc}.select-option{font-size:15px;padding:11px 12px}.select-menu{color:#50504e}
.select-trigger::after{border-color:#71716f}.pill{font-size:12px}.export-summary strong{font-size:16px}.export-summary p{font-size:14px;color:#676765}#export-dialog .help{font-size:14px}
#toast{font-size:15px;background:#424240;color:#fff}
.preview-panel.expanded-preview{position:fixed;inset:16px;max-width:none;z-index:10;display:grid;grid-template-rows:48px minmax(0,1fr) 50px;background:#e5e5e3;box-shadow:0 0 0 100vmax #424240cc}
.expanded-preview .stage,.expanded-preview .stage.portrait{max-height:100%;max-width:100%;aspect-ratio:auto}
@media(min-width:1700px){.workspace{grid-template-columns:210px minmax(0,1fr) 370px}.main{padding:24px 32px;gap:16px;grid-template-rows:minmax(0,1fr) 164px 120px}.page-heading h1{font-size:28px}.tool-copy b{font-size:16px}}
@media(max-width:1200px){.workspace{grid-template-columns:164px minmax(0,1fr) 310px}.main{padding:16px;gap:12px}.sidebar{padding:18px 10px 14px}.timing-controls{gap:8px}.timing-controls>label{font-size:12px;gap:5px}.background-bar{gap:9px}.background-bar>span{display:none}.preset-list{gap:7px}.preset-caption{font-size:13px}}
@media(max-width:1000px){.workspace{grid-template-columns:76px minmax(0,1fr) 290px}.sidebar{padding:18px 6px;gap:10px}.sidebar>.eyebrow{display:none}.sidebar-divider{display:block}.tool{padding:10px 4px;justify-content:center;min-height:45px}.tool-copy{display:none}.tool-symbol{display:block;font-size:20px}.sidebar-bottom{display:block;padding:0}.sidebar-bottom .text-button{font-size:12px}.sidebar #asset-list{display:block}.asset-load{font-size:12px;padding:7px 3px}.asset-item{gap:1px}.asset-item .icon-button{width:18px}.asset-pagination{font-size:11px;gap:0}.asset-pagination .icon-button{width:20px}.main{padding:14px;grid-template-rows:minmax(0,1fr) 184px 104px;gap:10px}.timing-controls>label{flex-direction:column;align-items:stretch;gap:4px}.preview-surround{padding:10px}.background-bar{padding:8px 10px;gap:8px}.background-options{gap:6px}.bg-swatch{width:21px;height:21px}.background-bar .text-button{font-size:12px}.inspector-heading{padding:20px 18px 16px}#inspector-body{padding-left:18px;padding-right:16px}.preview-label{font-size:13px}.preview-actions>.select-control{width:125px}.preview-actions .select-trigger{font-size:12px}.preview-toolbar{padding:0 10px}.preset-caption{font-size:12px;padding:6px 3px}}
@media(max-height:740px) and (min-width:761px){body{grid-template-rows:60px minmax(0,1fr)}.app-header{height:60px}.main{padding-top:12px;padding-bottom:12px;gap:10px;grid-template-rows:minmax(0,1fr) 154px 90px}.page-heading h1{font-size:23px}.sidebar{padding-top:12px;padding-bottom:12px;gap:8px}.tool{min-height:39px;padding-top:8px;padding-bottom:8px}.preview-panel{grid-template-rows:40px minmax(0,1fr) 42px}.timeline{padding:8px 12px}.transport{min-height:31px;padding-bottom:6px}.timing-controls{padding-top:7px}.timeline-track{margin-top:7px}.timing-controls>label{flex-direction:row;align-items:center}.timing-input input{padding-top:5px;padding-bottom:5px}.styles-section{grid-template-rows:18px minmax(0,1fr);gap:6px}.preset{grid-template-rows:minmax(0,1fr) 28px}.preset-caption{padding:4px 5px}.preview-surround{padding:10px}}
@media(max-width:760px){body{grid-template-rows:58px minmax(0,1fr)}.app-header{height:58px;padding:0 12px}.brand{font-size:23px}.header-right{gap:6px}.header-right .button{font-size:13px;min-height:36px;padding:7px 10px}.workspace{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:52% minmax(0,1fr)}.sidebar{width:auto;grid-row:1 / 3;display:flex;border-right:1px solid var(--border);border-bottom:0;padding:10px 5px;gap:8px}.sidebar #tool-list{display:block}.tool{width:100%;margin:2px 0;padding:10px 3px;min-height:42px}.tool-copy{display:none}.sidebar-bottom .text-button{font-size:11px}.sidebar #asset-list{display:block}.main{width:100%;padding:10px;grid-template-rows:minmax(0,1fr) 44px 36px;gap:7px}.page-heading h1{font-size:20px}.preview-panel{grid-template-rows:34px minmax(0,1fr) 32px}.preview-toolbar{padding:0 7px}.preview-label{font-size:12px}.preview-actions{gap:2px}.preview-actions>.select-control{width:115px}.preview-actions .select-trigger{min-height:28px;font-size:12px;padding:4px 6px}.preview-actions .icon-button{width:25px;height:28px;font-size:18px}.preview-surround{min-height:0;padding:7px}.background-bar{padding:4px 8px;gap:7px}.background-options{gap:7px}.bg-swatch{width:18px;height:18px}.background-bar .text-button{font-size:11px}.timeline{padding:3px 7px;border-radius:8px;display:flex;align-items:center}.transport{border:0;flex:1;padding:0;gap:4px;min-height:30px}.timecode{font-size:11px;gap:4px}.play-button{width:27px;height:27px}.timeline-fps,.timing-controls,.timeline-track{display:none}.styles-section{display:block}.section-heading{display:none}.preset-list{height:100%;gap:5px}.preset{display:flex;align-items:center;justify-content:center}.preset canvas{display:none}.preset-caption{width:100%;font-size:11px;padding:7px 2px;background:transparent}.inspector{grid-column:2;width:auto;border-left:0;border-top:1px solid #d0d0ce;min-height:0}.inspector-heading{padding:10px 16px 8px}.inspector-heading strong{font-size:15px}.inspector-tabs{padding:0 16px;gap:20px}.inspector-tabs button{font-size:14px;min-height:31px;padding-bottom:8px}#inspector-body{display:block;padding:16px;overflow-y:auto}.control-section+.control-section{border-top:1px solid var(--border);margin-top:22px;padding-top:20px}.field{font-size:14px}.field input,.field textarea,.select-trigger{font-size:16px}.expanded-preview .background-bar>span{display:none}}

/* Shared transport controls: consistent geometry and explicit actions. */
.transport .transport-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;height:34px;min-width:34px;width:auto;padding:0 8px;border:1px solid #d6d6d4;border-radius:7px;background:#f4f4f2;color:#666664;font-family:inherit;font-weight:500;font-size:12px;line-height:1;white-space:nowrap}
.transport .transport-button span{font-size:12px}
.transport .transport-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.transport .transport-button:hover{background:#eeeeec;border-color:#bcbcba}
.transport .transport-button.active{background:#eeeeec;border-color:#c2c2c0;color:#5e5e5c}
.transport .play-button{padding:0;width:34px}
@media(max-width:1000px){.transport{gap:6px;flex-wrap:wrap}.transport .timecode{font-size:12px;gap:4px}.transport .timeline-spacer{display:none}.transport .timeline-fps{margin-left:auto}}
@media(max-width:760px){.transport{flex-wrap:nowrap;gap:5px}.transport .transport-button{height:32px;min-width:32px;padding:0 6px}.transport .play-button{width:32px;padding:0}.transport .timecode{font-size:10px;gap:3px}.transport .transport-button span{font-size:11px}}

/* Neutral workspace with a restrained sage selection accent. */
:root{--base:#f3f3f1;--surface:#f5f5f3;--border:#deded9;--text:#2b2e2c;--muted:#737670;--lime:#536f60}
.brand{color:#252b27}.app-header,.sidebar{background:#fafaf8}.main{background:#f1f1ee}
.button.primary{background:#303a33;border-color:#303a33;color:#fff;box-shadow:none}.button.primary:hover{background:#455349}
.tool.active{background:#e8eee8;border-color:#c7d3c9;color:#344a3b;box-shadow:none}.tool:hover{background:#eeefeb}
.inspector-tabs button.active{color:#3b5845;border-color:#6d8673}.preset.selected{border-color:#7a8f7e;box-shadow:0 0 0 1px #7a8f7e}.preset.selected .preset-caption{background:#e8eee7;color:#344a3b}
.checker{background-color:#efefec;background-image:conic-gradient(#e0e1dc 25%,transparent 0 50%,#e0e1dc 0 75%,transparent 0)}
.stage.checker-dark{background-color:#282c29;background-image:conic-gradient(#323733 25%,transparent 0 50%,#323733 0 75%,transparent 0)}
.bg-swatch.dark{background:#292e2b}.bg-swatch.blue{background:#d4d7d0}.bg-swatch.selected{outline-color:#728877}
.transport{flex-wrap:nowrap}.transport .timeline-spacer{display:block;flex:1;min-width:0}.transport .timeline-fps{margin-left:0;margin-right:4px}
.transport .transport-button{background:#f5f5f1;border-color:#d9dbd3;color:#555e55}.transport .transport-button:hover{background:#ebeee7;border-color:#bfc9bc}.transport .transport-button.active{background:#e7eee4;border-color:#b8c8b4;color:#3c573b}
.transport #restart{margin-left:auto}.transport .timeline-spacer+#fps-label+#restart{margin-left:0}
@media(max-width:1000px){.transport .timeline-fps{display:none}.transport .timeline-spacer{display:block}}
@media(max-width:760px){.transport{gap:5px}.transport .timeline-spacer{display:block}.transport .timecode{font-size:10px}}

/* Templates apply parameters once; the inspector contains the complete editor. */
.main{grid-template-rows:minmax(0,1fr) 164px}
#inspector-body .preset-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#inspector-body .preset{display:flex;flex-direction:column;width:100%;background:#f0f0ed;border:1px solid #d1d1cf;box-shadow:none;transition:border-color .15s,transform .15s}
#inspector-body .preset:hover{border-color:#829484;transform:translateY(-1px)}
#inspector-body .preset:active{transform:translateY(0);background:#e8eee7}
.preset-preview{display:block;width:100%;aspect-ratio:1.75;background:#f0f0ed;overflow:hidden}
#inspector-body .preset canvas{display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:auto}
#inspector-body .preset-caption{display:flex;flex-direction:column;gap:5px;width:100%;background:#f0f0ed;color:#424942;font-size:14px;padding:10px 4px 12px;line-height:1.4;white-space:normal}
#inspector-body .preset-caption span{font-family:inherit;font-size:12px;color:#7c837b;font-weight:400}
.template-intro{margin:0 0 20px;color:#646c63;font-size:14px;line-height:1.8}
@media(max-width:1000px){.main{grid-template-rows:minmax(0,1fr) 184px}}
@media(max-height:740px) and (min-width:761px){.main{grid-template-rows:minmax(0,1fr) 154px}}
@media(max-width:760px){.main{grid-template-rows:minmax(0,1fr) 44px}}