/* Light, canvas-first editing surface. */
:root{color-scheme:light;color:#222326;background:#f5f5f6;--muted:#73757b;--line:#e3e4e8;--panel:#fcfcfd;--field:#f0f0f2;--accent:#3478f6}
body{background:#f5f5f6;font-size:12px;-webkit-font-smoothing:antialiased}
button,input,select{color:#26272b}button{background:#f0f0f2;border-color:transparent;border-radius:8px}button:hover{background:#e7e8eb;border-color:#d9dbe0}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.section-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body>header{height:64px;padding:0 22px;background:#f5f5f6;border:0;gap:24px}
.brand{font-size:17px;letter-spacing:-.65px;color:#242529;gap:4px}.brandmark{width:30px;height:30px;border-radius:9px;background:#242529;color:white;font-size:22px;margin-right:7px}.brandmark span{font-size:13px}.studio{color:#808189}
.project-name{border-left-color:#dedfe3;padding-left:24px;gap:4px}.project-name input{color:#292a30;font-size:12px;font-weight:500}.project-name>span{color:#777b83;font-size:10px}
.header-actions{gap:8px}.header-actions button{font-size:12px;padding:9px 14px;background:#fcfcfd;border:1px solid #e0e1e5}.header-actions button:hover{background:#eeeef1}.history-actions{border-color:#dedfe3;gap:3px;padding-right:12px}.history-actions button{border-color:transparent;background:transparent;color:#73757c}
#export{background:#25262a;border-color:#25262a;color:#fff;border-radius:9px;font-weight:500}#export:hover{background:#414349}
main{height:calc(100vh - 64px);min-height:0;padding:0 10px 10px;gap:10px;background:#f5f5f6;grid-template-columns:258px minmax(340px,1fr) 286px}
.library,.inspector,.card-editor{background:var(--panel);border:1px solid var(--line);border-radius:22px;scrollbar-color:#caccd2 transparent;scrollbar-width:thin}
.library{padding:22px 14px 16px}.library-title{padding:0 6px}.library-title h1{font-size:15px;font-weight:550;letter-spacing:-.3px;color:#27282e;margin-bottom:7px}.library-title p{font-size:11px;color:#82848c;line-height:1.6;margin-bottom:22px}
.tabs{background:transparent;padding:0;gap:5px;margin:0 0 18px;border:0}.tabs button{font-size:12px;color:#71737b;padding:8px 12px!important;border-radius:8px;flex:1}.tabs button.active{background:#eaeaec;color:#242529}.tabs span{color:#777b83;font-size:10px}
#template-search{border:1px solid #e0e1e5;background:#f4f4f6;color:#27282e;border-radius:9px;padding:11px 12px;font-size:12px}#template-search::placeholder{color:#90929a}
.template-filters{gap:2px;margin:12px 0 18px}.template-filters button{color:#777b83;font-size:10px;padding:6px 8px}.template-filters button[aria-pressed=true]{background:#eaeef9;color:#3166c3;border-color:transparent}
.template-grid{gap:13px 10px}.template-card{padding:5px;border:1px solid #e5e6ea;background:#f5f5f7;border-radius:10px;transition:border-color .15s,box-shadow .15s}.template-card:hover{background:#eeeef2;border-color:#b6b9c2}.template-card.active{background:#edf3ff;border-color:#75a3ff;box-shadow:0 0 0 1px #75a3ff}.template-card canvas{border-radius:6px;background:#e8e9ed;aspect-ratio:1.15}.template-card .card-label{font-size:11px;font-weight:450;color:#666973;padding:8px 1px 3px;min-height:28px}.template-card.active .card-label{color:#285bba}
.local-note{color:#868992;font-size:10px;padding:22px 6px 0}.dot{background:#8b98aa;width:5px;height:5px}.local-note .dot{background:#72a889}.media-row{color:#575b65;border-color:#e4e5e9;background:transparent;font-size:11px;border-radius:8px}.media-row[aria-pressed=true]{background:#eaf1ff;border-color:#a3c0ff;color:#285bba}
.workspace{position:relative;background:none;border-radius:0;padding:0 18px 0 62px;overflow:hidden}
.stage-toolbar{height:52px;min-height:52px;color:#868994;font-size:11px;gap:10px}.stage-toolbar>div{font-size:10px;color:#8a8d95;letter-spacing:.6px}.stage-toolbar #template-title{color:#60636c;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-viewport{margin:26px 12px 48px;min-height:120px;overflow:visible}.stage{outline:1px solid #82abff;box-shadow:0 4px 20px #202c4010;background:#fff}
.stage::before{content:attr(data-artboard);position:absolute;left:0;top:-25px;color:#737983;font-size:10px;white-space:nowrap;letter-spacing:.1px}
.stage::after{content:attr(data-dimensions);position:absolute;bottom:-29px;left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:5px;background:var(--accent);color:#fff;font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.canvas-tools{position:absolute;left:2px;top:58px;display:flex;flex-direction:column;gap:6px;padding:6px;background:#fcfcfdd9;border:1px solid #e0e2e7;border-radius:23px;z-index:2}
.canvas-tools button{display:grid;place-items:center;width:34px;height:36px;padding:8px;border:0;border-radius:50%;background:transparent;color:#666974}.canvas-tools button:hover{background:#e9ebef;color:#242529}.canvas-tools button[aria-pressed=true]{background:#e6edfc;color:#3478f6}.canvas-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.playback{height:48px;min-height:48px;max-width:680px;width:100%;align-self:center;padding:0 13px;margin:0 0 22px;gap:14px;background:#fcfcfd;border:1px solid #e0e2e7;border-radius:24px;box-shadow:0 2px 6px #25334d04}.playback #play{background:#e9e9ed;color:#30323a;border-radius:50%;width:29px;height:29px;flex-basis:29px}.playback #time{font-size:11px;color:#777b85}
input[type=range]{accent-color:#6c7f9f;height:3px}.playback #scrub{accent-color:#3478f6;height:3px}
.shots{background:#fcfcfd;border:1px solid #e1e3e8;border-radius:16px;min-height:146px;padding:15px 16px 8px}.shots-heading{margin-bottom:12px;gap:9px}.shots h2{font-size:12px;font-weight:500;color:#41454f}.shots h2 span{background:#eeeef2;color:#7a7d87}.shots-heading>span{color:#9497a0;font-size:10px}.shots-heading button{background:#f1f2f5;border-color:transparent;color:#606570;border-radius:7px;font-size:10px;padding:6px 9px}
#selection-actions{margin-bottom:8px}#selection-count{font-size:11px;color:#747a86}#selection-actions button{background:#f0f1f5;color:#636976;border-color:transparent}
.shot{background:#f3f4f7;border-color:#e0e3ea;border-radius:8px}.shot.selected{background:#eaf1ff;border-color:#679afc}.shot canvas,.card-editor-preview{background:repeating-conic-gradient(#f5f5f7 0% 25%,#e9ebef 0% 50%) 50%/12px 12px}.shot-label{color:#6f7580}.shot-label button{color:#9196a0}.shot-add{color:#878f9d;border-color:#cdd3df;background:transparent;border-radius:9px}.shot-selection-box{border-color:#3478f6;background:#3478f619}.wireframe-note{color:#9196a0;font-size:11px}
.workspace footer{padding:11px 3px 0;min-height:30px;color:#969aa3;font-size:9px}kbd{color:#808591;border-color:#d9dce3;background:#f9f9fb;font-size:9px}
.inspector-shell{border-radius:22px}.inspector{padding:22px 18px 18px}.inspector h2{font-size:14px;color:#30343b;font-weight:550;margin-bottom:9px}.inspector h2 span{color:#747b88}.template-detail{font-size:11px;line-height:1.65;color:#8a8f99;margin:0 0 16px}
.inspector>.direction-control{background:var(--panel);top:-22px;border-color:#e8e9ee;padding:12px 0;margin-bottom:4px}#direction-buttons{padding:3px;background:#f0f0f3;border-radius:8px;gap:3px}#direction-buttons button{font-size:10px;padding:8px 3px;color:#858a96;background:transparent}#direction-buttons button:hover{background:#e4e6ec;color:#545d6d}#direction-buttons button[aria-pressed=true]{background:#fff;color:#414955;box-shadow:0 1px 3px #29395116;border-radius:6px}
.inspector section.inspector-group{border-color:#ebecf0}.section-toggle{padding:18px 0;min-height:52px}.section-toggle .section-caption,.section-toggle[aria-expanded=true] .section-caption{font-size:12px;letter-spacing:0;color:#414650;font-weight:500}.section-toggle::after{color:#8f97a5!important}.section-body{padding-bottom:21px}.section-body label,label{font-size:11px;color:#747b87}.section-body .tip,.template-detail,.wireframe-note{color:#8c929e}.section-body .tip{font-size:10px;line-height:1.65;margin-top:12px}
select,.format-select{background:#f0f0f3;color:#464e5b;border:1px solid transparent;font-size:11px;border-radius:8px;padding:9px 10px}.section-body select{margin-top:9px}.format-controls{border-color:#e7e9ee}.format-label{color:#737c8b}.format-custom input,#easing-values input{background:#f0f0f3;color:#424956;border:1px solid transparent;border-radius:7px}.format-custom input[aria-invalid=true]{border-color:#ce665f}
.slider-number,.section-body .slider-number{background:#f0f0f3;border-color:transparent;color:#465061;border-radius:6px;padding:5px 7px;font-size:11px;min-width:52px}.slider-number:hover{border-color:#c7cdd8}.slider-number:focus{border-color:#3478f6}.slider-unit,output{color:#9198a5;font-size:10px}.switch-row input{accent-color:#454e5d;width:14px;height:14px}
.upload-box{border:1px dashed #cfd4de;background:#f5f6f9;color:#68768a;border-radius:9px;font-size:11px;padding:15px 10px}.upload-box:hover{background:#edf2fc;border-color:#96b3e7}.upload-box span{color:#949dac}
.reset{color:#8b93a0;font-size:10px}.reset:hover{color:#3478f6;background:transparent}.music-track{border-color:#e4e7ed}.music-track .reset{padding:5px 0}.swatch.active{outline-color:#628bcb}.swatch:hover{border-color:#fff}input[type=color]{border-radius:5px}
#visual-presets button{background:#f1f2f6;color:#8792a4;border-color:transparent;font-size:10px;border-radius:7px}#visual-presets button.active{background:#e8effc;color:#3478f6;border-color:#a9c3f3}.entrance-details{border-color:#e3e7ef}.entrance-details summary{color:#7f8b9f}
.step-easing{background:#f5f6f9;border-color:#e1e5ed;border-radius:10px}#easing-graph{background:#fff}.easing-grid{stroke:#e7eaf0}.easing-diagonal{stroke:#b9c2d0}#easing-path{stroke:#3478f6}#easing-handles{stroke:#9aaecb}#easing-start,#easing-end{fill:#fff;stroke:#3478f6}#easing-dot{fill:#3478f6;stroke:#fff}#easing-graph text{fill:#939cab}#easing-start:hover,#easing-end:hover{fill:#e8f0ff;stroke:#3478f6}
.export-info>span{color:#9ba2ad}.export-info strong{color:#586478;font-size:16px}.export-info i{background:#e8edf5;color:#76859d}.export-info p{color:#9aa4b3}
.card-editor{padding:0 18px 20px}.card-editor-header{background:var(--panel);border-color:#e4e8ef}.card-editor-header h2{color:#455168;font-size:16px}.card-editor-header p,#card-editor #shot-selection-note{color:#8895a9}.card-editor-header button{color:#647993;background:#edf2fa}.card-editor-preview{border-radius:10px}
dialog{background:#fcfcfd;color:#343b48;border-color:#e1e5ec;border-radius:22px;box-shadow:0 20px 70px #17284225}dialog::backdrop{background:#34435c40;backdrop-filter:blur(4px)}dialog p{color:#8390a4}.export-symbol{color:#3478f6}progress{accent-color:#3478f6}.muted{color:#99a3b2!important}#toast{background:#28303d;color:#fff;border-radius:12px;box-shadow:0 5px 25px #17243820}
@media(max-width:1250px){main{grid-template-columns:222px minmax(320px,1fr) 258px;gap:8px;padding:0 8px 8px}.workspace{padding:0 10px 0 50px}.canvas-tools{left:0;padding:4px}.canvas-tools button{width:31px;height:33px}.library{padding:19px 11px}.inspector{padding:20px 15px}.template-filters button{font-size:9px;padding:5px 6px}.shots-heading>span{display:none}.preview-viewport{margin-left:4px;margin-right:4px}.stage-toolbar>div{display:none}}
@media(max-width:1100px){body>header{padding:0 14px;gap:14px}.header-actions button{padding:8px 10px;font-size:11px}.project-name{padding-left:14px}.shots{padding-left:10px;padding-right:10px}.workspace{padding-right:5px}.stage-toolbar #template-title{font-size:11px}.library-title p{font-size:10px}}
@media(max-height:820px){.library-title p{display:none}.library-title h1{margin-bottom:18px}.preview-viewport{margin-top:22px;margin-bottom:37px}.playback{margin-bottom:14px;height:42px;min-height:42px}.shots{min-height:138px}.stage-toolbar{height:40px;min-height:40px}.workspace footer{min-height:24px;padding-top:7px}.inspector{padding-top:18px}.inspector>.direction-control{top:-18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.template-card{transition:none}}

.stage{overflow:visible}.tabs button{white-space:nowrap}.tabs span{display:inline;margin-left:4px}.section-body label,label{color:#646c79}.section-body .tip,.template-detail,.wireframe-note{color:#7c8491}

/* LoopShots: compact panels surrounding a generous preview canvas. */
:root{--panel:#fff;--line:#ededee;--field:#f3f3f3;--accent:#555;color:#555;background:#f3f3f3}
body{background:#f3f3f3}main{height:100vh;padding:5px;gap:5px;grid-template-columns:218px minmax(340px,1fr) 270px;background:#f3f3f3}
.library,.inspector,.card-editor,.inspector-shell{border-radius:7px;border-color:#ededee;background:white}
.library{padding:5px 5px 0;overflow:hidden;display:flex;min-height:0}.library-title,.local-note,.library-note{display:none}
.library-content{overflow:auto;flex:1;min-height:0;scrollbar-width:none}
#templates-panel{position:relative;padding-bottom:18px}#template-search{position:sticky;top:0;z-index:2;background:#f4f4f4;border:0;padding:8px 10px;height:29px;font-size:11px;border-radius:5px;color:#555}
.template-filters{position:sticky;top:29px;z-index:2;background:#f3f3f3;border-radius:5px;margin:5px 0;gap:0;padding:2px;justify-content:space-between}.template-filters button{font-size:11px;padding:6px 8px;color:#717171;border:0;border-radius:4px}.template-filters button[aria-pressed=true]{color:#555;background:#fff;box-shadow:0 1px 3px #0000000c}
.template-grid{gap:5px}.template-card{background:#f2f2f2;border:0;border-radius:5px;padding:0;overflow:hidden;box-shadow:none}.template-card:hover{background:#e8e8e8;border:0}.template-card.active{background:#e6e6e6;box-shadow:inset 0 0 0 1px #a3a3a3;border:0}.template-card canvas{border-radius:5px;aspect-ratio:1.18;width:100%}.template-card .card-label,.template-card.active .card-label{color:#777;font-size:11px;font-weight:400;min-height:25px;padding:6px 3px;line-height:1.2}
.library .tabs{flex:none;margin:0;padding:4px 0;gap:3px;border-top:1px solid #f0f0f0}.tabs button{font-size:10px;padding:5px!important;color:#888;border-radius:4px}.tabs button.active{background:#f1f1f1;color:#555}.tabs span{font-size:9px}
.library-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 5px 10px;gap:8px;flex:none;border-top:1px solid #f0f0f0}.brand{color:#666;font-size:15px;letter-spacing:-.4px;font-weight:400;gap:7px;white-space:nowrap}.brand-symbol{font-size:19px;color:#444}.library-footer button{border:0;background:none;padding:0;width:24px;height:24px;color:#656575}
svg{vertical-align:middle}.library-footer svg,.stage-toolbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.workspace{padding:0;gap:5px;overflow:hidden;border-radius:0;background:transparent}.preview-panel{flex:1;min-height:0;display:flex;flex-direction:column;background-color:white;background-image:radial-gradient(circle,#f3f3f3 2px,transparent 2.6px);background-size:27px 27px;border:1px solid #fff;border-radius:7px;padding:3px}
.stage-toolbar{height:31px;min-height:31px;padding:0 6px;gap:12px;justify-content:flex-start}.stage-toolbar>div{display:block;font-size:11px;color:#777;letter-spacing:0}.stage-toolbar #template-title{margin-left:auto;color:#aaa;font-size:10px}.stage-toolbar #expand-preview{margin-left:auto;background:none;color:#5a5a66;padding:4px;border:0;border-radius:4px}.stage-toolbar #template-title+#ratio[hidden]+button{margin-left:0}
.preview-viewport{margin:0;min-height:100px;overflow:hidden}.stage{outline:0;box-shadow:0 0 0 1px #00000006;background:transparent;overflow:hidden}.stage::before,.stage::after{display:none}
.playback{width:100%;max-width:none;align-self:stretch;flex:none;height:36px;min-height:36px;margin:0;padding:3px;gap:8px;background:white;border:1px solid white;border-radius:6px;box-shadow:none}.playback #play{background:#f3f3f3;color:#666;border-radius:4px;width:29px;height:28px;flex-basis:29px}.playback #play svg{width:13px;height:13px}.playback #time{background:#f5f5f5;border-radius:4px;font-size:10px;padding:8px;color:#888}.playback #scrub{accent-color:#626262;height:2px}
.shots{flex:none;min-height:0;padding:9px 10px 7px;border:1px solid #fff;border-radius:7px;background:white}.shots-heading{margin:0 0 8px;gap:8px;height:22px}.shots h2{font-size:11px;color:#808080;font-weight:400}.shots h2 span{font-size:8px;background:#f4f4f4;color:#999;border-radius:8px;padding:2px 5px}.shots-heading>span{display:none}.shots-heading #add{font-size:10px;padding:4px 6px;color:#888;background:transparent;margin-left:auto}.asset-navigation{display:flex;gap:3px}.asset-navigation button{background:none;border:0;color:#777;margin:0;padding:2px 3px;font-size:17px;line-height:16px}
#shot-strip{gap:6px;padding-bottom:2px;scrollbar-width:thin}.shot{width:91px;padding:3px;background:#f4f4f4;border:1px solid transparent;border-radius:5px}.shot canvas{width:83px;height:53px;border-radius:3px}.shot.selected{background:#ededed;border-color:#9da5b1}.shot-label{font-size:9px;color:#888;margin-top:2px}.shot-label span{max-width:52px}.shot-label button{min-width:14px;min-height:16px;padding:0;font-size:10px;color:#999}.shot-label button:last-child{color:#bc8585}.shot-add{min-width:39px;color:#aaa;border-color:#e3e3e3;font-size:18px}.wireframe-note{font-size:11px;color:#999;padding:5px 0;margin:0}
#selection-actions{min-height:20px;margin:0 0 5px;gap:5px}#selection-actions button{font-size:9px;min-height:20px;padding:3px 5px;background:#f5f5f5;color:#888;border-radius:3px}#selection-count{font-size:10px;color:#888}.shots:has(#selection-count:empty) #selection-actions{display:none}.workspace>footer{display:none}
.inspector{padding:12px;scrollbar-color:#ddd transparent}.project-bar{display:block;height:auto;padding:0 0 13px;background:white;border:0;border-bottom:1px solid #eee;margin:0 0 17px}.project-name{border:0;padding:0;gap:4px}.project-name input{width:100%;font-size:12px;color:#555;font-weight:500}.project-name>span{font-size:9px;color:#aaa}.header-actions{display:flex;flex-wrap:wrap;margin-top:12px;gap:4px}.header-actions button{font-size:10px;padding:6px 8px;border:0;background:#f2f2f2;color:#777;border-radius:4px}.history-actions{border:0;margin:0;padding:0;gap:2px}.history-actions button{padding:6px 4px;color:#888;background:none}#export{font-size:10px;padding:6px 8px;border:0;background:#555;color:#fff;border-radius:4px}.primary span{padding-left:3px}
.inspector h2{font-size:12px;font-weight:500;color:#666;margin:0 0 6px}.template-detail{font-size:10px;color:#999;line-height:1.6;margin-bottom:12px}.inspector>.direction-control{position:static;background:#fff;padding:10px 0 13px;border-color:#eee;margin:0}.format-label{color:#888;font-size:11px;margin-bottom:7px}#direction-buttons{padding:2px;background:#f3f3f3;border-radius:4px}#direction-buttons button{padding:7px 3px;color:#999;font-size:10px;border-radius:3px}#direction-buttons button[aria-pressed=true]{background:#fff;color:#666;box-shadow:0 1px 2px #0000000a;border-radius:3px}
.section-toggle{min-height:41px;padding:13px 0}.section-toggle .section-caption,.section-toggle[aria-expanded=true] .section-caption{color:#666;font-size:11px;font-weight:400}.section-toggle::after{width:5px;height:5px;color:#aaa!important}.section-body{padding-bottom:15px}.section-body label,label{font-size:10px;color:#858585}.section-body label{margin-top:15px}.section-body .tip{font-size:10px;color:#a0a0a0;line-height:1.6;margin-top:9px}.format-controls{margin-bottom:15px;border-color:#eee}.format-picker{margin-bottom:12px}
select,.format-select,.format-custom input,#easing-values input,.slider-number,.section-body .slider-number{background:#f3f3f3;color:#777;border:1px solid transparent;border-radius:4px;font-size:10px;padding:7px 8px}.slider-number,.section-body .slider-number{padding:4px 5px}.slider-unit,output{font-size:9px;color:#aaa}input[type=range]{accent-color:#777;height:2px;margin-top:13px}.switch-row input{accent-color:#777;width:12px;height:12px}
.upload-box{background:#f7f7f7;border:1px dashed #ddd;color:#888;border-radius:5px;font-size:10px;padding:13px 8px}.upload-box:hover{background:#f0f0f0;border-color:#bbb}.upload-box span{color:#aaa}.reset{font-size:10px;color:#999}.reset:hover{color:#555}.media-row{background:#f5f5f5;color:#777;border:0;border-radius:4px;margin-top:5px}.media-row[aria-pressed=true]{background:#eaeaea;color:#555;border-color:#aaa}
#visual-presets button{color:#888;background:#f5f5f5;font-size:10px;border-radius:4px}#visual-presets button.active{color:#555;background:#e9e9e9;border-color:#bcbcbc}.step-easing{padding:9px;border-radius:5px;background:#fafafa;border-color:#eee}#easing-path{stroke:#666}#easing-start,#easing-end{stroke:#777}#easing-dot{fill:#777}#easing-handles{stroke:#aaa}.easing-grid{stroke:#eee}.easing-diagonal{stroke:#ccc}
.card-editor{padding:0 12px 15px}.card-editor-header{background:white;padding:12px 0 10px;border-color:#eee}.card-editor-header h2{font-size:13px;color:#666}.card-editor-header p,#card-editor #shot-selection-note{color:#999;font-size:10px}.card-editor-header button{background:#f3f3f3;color:#777;font-size:10px;border-radius:4px;margin-bottom:12px}.card-editor-preview{border-radius:5px;margin:12px 0}.card-editor-preview img{height:110px}
.export-info strong{font-size:14px;color:#888}.export-info i{background:#f1f1f1;color:#999}.export-info p,.export-info>span{color:#aaa}.music-track{border-color:#eee}.music-track>p{color:#777!important}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.section-toggle:focus-visible{outline:2px solid #8a9ab0;outline-offset:2px}dialog{border-radius:9px;background:#fff;border-color:#eee;padding:28px;color:#666;box-shadow:0 15px 60px #00000018}dialog h2{font-size:19px}dialog p{color:#999}.export-symbol{color:#777}dialog::backdrop{background:#22222228;backdrop-filter:blur(3px)}progress{accent-color:#777}#toast{border-radius:6px;background:#555;color:#fff;font-size:11px;box-shadow:0 4px 18px #00000012}
main.library-collapsed{grid-template-columns:38px minmax(340px,1fr) 270px}.library-collapsed .library-content,.library-collapsed .tabs,.library-collapsed .brand{display:none}.library-collapsed .library-footer{margin-top:auto;padding:8px 0;justify-content:center}.library-collapsed .library{padding:3px}
body.preview-expanded main{grid-template-columns:1fr}body.preview-expanded .library,body.preview-expanded .inspector-shell,body.preview-expanded .shots{display:none}body.preview-expanded .workspace{grid-column:1}body.preview-expanded .preview-panel{flex:1}
@media(max-width:1250px){main{grid-template-columns:200px minmax(320px,1fr) 246px;gap:5px;padding:5px}.workspace{padding:0}.library{padding:5px 5px 0}.inspector{padding:11px}.template-filters button{font-size:10px;padding:6px 7px}.stage-toolbar>div{display:block}.preview-viewport{margin:0}.shots{padding:8px}.project-name input{width:100%}.header-actions button{font-size:9px;padding:6px}.project-name{padding:0}main.library-collapsed{grid-template-columns:38px minmax(320px,1fr) 246px}}
@media(max-height:820px){.preview-viewport{margin:0}.playback{margin:0;height:34px;min-height:34px}.shots{min-height:0}.stage-toolbar{height:28px;min-height:28px}.inspector{padding-top:11px}}

.project-bar .header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.project-bar .history-actions{grid-column:1/-1;justify-content:flex-end}.project-bar .header-actions>button{padding:7px 3px;white-space:nowrap;font-size:10px}.project-bar #export span{display:none}

.library-content::-webkit-scrollbar{display:none}

/* Preview controls sit in their own compact bar above the canvas. */
.workspace>.stage-toolbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:none;height:40px;min-height:40px;padding:0 5px;background:#fff;border:1px solid #ededee;border-radius:7px;gap:8px}
.workspace>.stage-toolbar>div:first-child{grid-column:1;grid-row:1;justify-self:start;padding-left:7px;display:block;font-size:11px;color:#777;letter-spacing:0}
.workspace>.stage-toolbar #template-title{display:none}
.workspace>.stage-toolbar .history-actions{grid-column:2;grid-row:1;display:flex;justify-self:center;align-items:center;gap:3px;border:0;padding:0;margin:0}
.workspace>.stage-toolbar .history-actions button{padding:5px 4px;font-size:10px;background:transparent;border:0;border-radius:3px;color:#888;font-weight:400}
.workspace>.stage-toolbar .history-actions button:hover:not(:disabled){background:#f3f3f3;color:#555}
.workspace>.stage-toolbar .history-actions button:disabled{opacity:.35}
.workspace>.stage-toolbar #expand-preview{grid-column:3;grid-row:1;justify-self:end;display:grid;place-items:center;width:28px;height:28px;margin:0;padding:4px}

.project-bar .header-actions>#export{grid-column:1/-1;width:100%;padding:9px 8px}

/* One opaque sticky header keeps cards out of the search/category spacing. */
.template-library-header{--library-header-bg:#fff;position:sticky;top:0;z-index:3;display:flex;flex-direction:column;gap:6px;padding:0 0 8px;background:var(--library-header-bg)}
#template-library-title{display:flex;align-items:center;gap:8px;margin:0;padding:9px 4px 4px;font-size:12px;line-height:20px;font-weight:500;color:var(--ui-text)}
#template-count{font-size:11px;font-weight:400;color:var(--ui-secondary);font-variant-numeric:tabular-nums}
#templates-panel .template-library-header #template-search,#templates-panel .template-library-header .template-filters{position:static;margin:0;flex:none}
:root[data-theme=dark] .template-library-header{--library-header-bg:#202123}

/* The project name remains editable above the canvas, with room for history controls. */
.workspace>.stage-toolbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.workspace>.stage-toolbar>.preview-project-name{min-width:0;width:100%;padding-right:6px}
.workspace>.stage-toolbar .preview-project-name input{display:block;width:100%;min-width:0;max-width:100%;border:0;background:transparent;padding:3px 0;font:inherit;color:inherit;text-overflow:ellipsis}

/* Save feedback crossfades with the title without moving toolbar controls. */
.workspace>.stage-toolbar>.preview-project-name{position:relative}
.workspace>.stage-toolbar .preview-project-name input{opacity:1;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}
.workspace>.stage-toolbar .preview-project-name #project-save-confirmation{position:absolute;left:7px;right:6px;top:50%;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font:inherit;color:inherit;opacity:0;transform:translateY(calc(-50% + 5px));transition:opacity .22s ease,transform .22s ease}
.workspace>.stage-toolbar .preview-project-name.show-save-confirmation input{opacity:0;transform:translateY(-5px)}
.workspace>.stage-toolbar .preview-project-name.show-save-confirmation #project-save-confirmation{opacity:1;transform:translateY(-50%)}
.workspace>.stage-toolbar .preview-project-name:focus-within input{opacity:1;transform:none;transition:none}
.workspace>.stage-toolbar .preview-project-name:focus-within #project-save-confirmation{opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){
 .workspace>.stage-toolbar .preview-project-name input,.workspace>.stage-toolbar .preview-project-name #project-save-confirmation{transition:none}
 .workspace>.stage-toolbar .preview-project-name input{transform:none}
 .workspace>.stage-toolbar .preview-project-name #project-save-confirmation{transform:translateY(-50%)}
}