/* MOTION LAB precision surfaces. Editor chrome only; artwork lives in isolated iframes. */
:root,:root[data-theme=light]{--surface:#e6eaea;--card:#f5f7f7;--input:#fff;--text:#171a1c;--muted:#727a7e;--border:#dce1e2;--accent:#d92332;--canvas-a:#e2e6e6;--canvas-b:#edf0f0;--shadow:0 2px 8px #20303005;--ui-panel:24px;--ui-card:18px;--ui-control:11px;--ui-space:8px;--ui-soft:#edf0f0;--ui-selected:#202628;--ui-selected-text:#fff;--ui-focus:#d9233233;--ui-clip:#e1e8e9;--ui-clip-border:#b9c6ca;color-scheme:light}
:root[data-theme=dark]{--surface:#191d20;--card:#242a2e;--input:#2e353a;--text:#edf0f1;--muted:#a4aeb4;--border:#3b454b;--accent:#e34853;--canvas-a:#30383d;--canvas-b:#353e43;--shadow:none;--ui-soft:#2a3237;--ui-selected:#e5eaec;--ui-selected-text:#202628;--ui-focus:#e3485344;--ui-clip:#35434a;--ui-clip-border:#526975;color-scheme:dark}
html,body{height:100%;overflow:hidden}body{font:13px/1.5 EmbeddedSans,sans-serif;background:var(--surface);color:var(--text)}
header{height:auto;min-height:88px;margin:12px 16px 0;padding:16px 20px;border-radius:var(--ui-panel);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:none;display:flex;gap:20px;align-items:center}
header .brand{flex:0 0 auto}header h1{font-size:20px;letter-spacing:.5px;display:flex;align-items:center;gap:10px;margin:0 0 5px;font-weight:750;white-space:nowrap}header h1:before{content:'◈';margin:0;padding:0;width:36px;height:36px;display:grid;place-items:center;background:var(--ui-selected);color:var(--ui-selected-text);border-radius:11px;font-size:23px}header h1 span{display:none}header p{padding-left:46px;font-size:11px;line-height:1.4;color:var(--muted);margin:0;max-width:240px}
header .toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;flex:1;max-width:none;min-width:0}header .toolbar-group{display:flex;align-items:center;gap:6px;border-left:1px solid var(--border);padding-left:10px;flex:0 0 auto}header .toolbar-group:first-child{border:0;padding:0}header button,header select{height:36px;font-size:12px;padding:0 10px;white-space:nowrap;margin:0;flex-shrink:0}#video-format{width:115px;flex-basis:115px}#video-resolution{width:166px;flex-basis:166px}#video-export{background:var(--accent);border-color:var(--accent);color:white;font-weight:650;padding:0 15px}#save-template{background:var(--ui-soft);border-color:var(--border);color:var(--text)}#theme-toggle{background:var(--input)}
main{height:calc(100dvh - 112px);padding:12px 16px 16px;gap:12px;grid-template-columns:244px minmax(0,1fr) 304px;min-height:0}aside,.inspector{background:var(--card);border:1px solid var(--border);border-radius:var(--ui-panel);padding:18px 16px;box-shadow:var(--shadow);backdrop-filter:none;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}aside .section-title:first-child{margin-top:0}.section-title{font-size:14px;color:var(--text);margin:16px 0 10px;line-height:1.5}.section-title small{font-size:11px;color:var(--muted);font-weight:400}.section-title:has(+ #templates){border-top:1px solid var(--border);padding-top:16px;margin-top:24px}
button,input,select,textarea{border:1px solid var(--border);border-radius:var(--ui-control);background:var(--input);color:var(--text);font:inherit;transition:background .12s,border-color .12s;box-shadow:none}button{padding:8px 11px;min-height:34px;cursor:pointer}button:hover{background:var(--ui-soft);color:var(--text);border-color:var(--ui-clip-border)}button:disabled{opacity:.45;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-color:var(--accent)}input,select,textarea{padding:8px 10px;font-size:13px}select{padding-right:26px}input[type=checkbox]{accent-color:var(--accent);width:15px!important;height:15px;vertical-align:middle}input[type=range]{accent-color:var(--accent);cursor:pointer}input[type=color]{cursor:pointer}#search{background-color:var(--ui-soft);height:38px;padding-left:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23727A7E' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 4 4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}input::placeholder,textarea::placeholder{color:var(--muted)}
.library-tabs,.property-tabs{background:var(--ui-soft);padding:4px;gap:4px;border-radius:12px}#library .library-tabs button,.property-tabs button{color:var(--muted);background:transparent;border:0;border-radius:9px;min-height:32px;font-size:13px;padding:6px}.property-tabs{position:sticky;top:-1px;z-index:10;border:1px solid var(--border)}#library .library-tabs button.active,.property-tabs button.active{background:var(--ui-selected);color:var(--ui-selected-text)}.library-category-title{font-size:12px;color:var(--muted);margin:14px 0 10px}.library-part{border:1px solid var(--border);border-radius:var(--ui-card);box-shadow:none;margin:0 0 12px;background:var(--input);overflow:hidden}.library-part:hover{border-color:var(--ui-clip-border)}.part-thumbnail{height:105px;border-bottom:1px solid var(--border);background-color:var(--canvas-a);background-image:conic-gradient(var(--canvas-b) 25%,transparent 0 50%,var(--canvas-b) 0 75%,transparent 0);background-size:20px 20px}#library .library-part button{font-size:13px;min-height:42px;background:transparent;padding:6px 10px;color:var(--text)}#library .library-part button span{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);background:var(--card);border-radius:9px;font-size:18px;color:var(--text);flex-shrink:0}.part-variant{height:34px;font-size:11px;background:var(--card);border:0;border-top:1px solid var(--border);color:var(--muted);border-radius:0;padding:6px 24px 6px 10px}
.workspace{background:transparent;border:0;border-radius:0;padding:0;overflow:auto;min-height:0;scrollbar-width:thin}.canvas-head{min-height:36px;margin:0 0 10px;color:var(--muted);gap:8px;font-size:12px;flex-wrap:wrap}.canvas-head>div{display:flex;gap:5px;flex-wrap:wrap}.canvas-head button{font-size:12px;padding:6px 9px;min-height:32px;background:var(--card)}#stage{border:1px solid var(--ui-clip-border);border-radius:18px;background-color:var(--canvas-a);background-image:conic-gradient(var(--canvas-b) 25%,transparent 0 50%,var(--canvas-b) 0 75%,transparent 0);background-size:24px 24px;box-shadow:0 3px 12px #19282c08}.canvas-foot{font-size:12px;color:var(--muted);margin:12px 0 16px;gap:8px;flex-wrap:wrap}.canvas-foot label{gap:8px}.canvas-foot input{padding:0;height:20px}.canvas-foot output{min-width:40px;color:var(--text);font-variant-numeric:tabular-nums}#status{font-size:11px;max-width:60%;line-height:1.5}.workspace>.section-title{margin:8px 0}
#layers.timeline{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:12px;min-height:240px;max-height:360px;scrollbar-width:thin}.track-tools{padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:8px;gap:5px;flex-wrap:wrap}.track-tools button{font-size:11px;min-height:32px;padding:6px 8px}#layers button{background:var(--input);color:var(--text)}#timeline-play{border-color:var(--accent)!important;color:var(--accent)!important;min-width:48px}.track-tools span{font-size:11px;color:var(--muted)}#timeline-time{font-family:OpenInter,EmbeddedSans,sans-serif;white-space:nowrap}.track-ruler{height:28px;align-items:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.track-row{height:42px;min-height:42px;border-color:var(--border)}.track-name{width:125px;color:var(--muted);font-size:12px;padding:11px 5px;font-variant-numeric:tabular-nums}.track-lane{background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),var(--border) calc(12.5% - 1px) 12.5%)}.track-clip{height:32px;top:5px;background:var(--ui-clip);border:1px solid var(--ui-clip-border);border-radius:6px;color:var(--text);font-size:12px;padding:5px 10px}.track-clip.active{background:var(--ui-clip);border:1.5px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.clip-handle{width:8px;background:#7f909626}.timeline-playhead,.timeline-playhead i{background:var(--accent)}.track-marquee{background:#d9233210;border-color:var(--accent)}
.inspector h2{font-size:15px;letter-spacing:.2px;margin:0 0 16px}.inspector .group{background:transparent;border:0;box-shadow:none;border-radius:0;padding:16px 0;margin:0;border-bottom:1px solid var(--border)}.group h3{font-size:13px;margin:0 0 12px;color:var(--text)}label.field{font-size:12px;color:var(--muted);margin:12px 0}.field>span{margin-bottom:6px}.slider{gap:8px}.slider input[type=range]{min-width:0;height:24px;padding:0;accent-color:var(--accent)}.slider input.slider-number{background:var(--input);border:1px solid var(--border);border-radius:9px;min-height:32px;font-size:12px;font-variant-numeric:tabular-nums}.inspector-section{padding-top:8px;margin-top:10px;border-color:var(--border)}.inspector-section summary{font-size:12px;color:var(--text);min-height:30px}.inspector-hint{font-size:12px;color:var(--muted);line-height:1.6}.curve-mode-preview{background:var(--ui-soft);border:1px solid var(--border);border-radius:12px;padding:8px}.color-chip{background:var(--input);border-radius:10px;padding:5px 8px}.color-code{font-size:12px}.compact-field{grid-template-columns:80px minmax(0,1fr)}.curve-label-editor{padding:12px 0}.inspector #properties>p:only-child{color:var(--muted);font-size:13px;line-height:1.9;padding:24px 8px;text-align:center}.inspector #properties>p:only-child:before{content:'◇';display:block;font-size:30px;color:var(--ui-clip-border);margin:0 0 10px}.axis-row button{min-height:34px!important}.advanced-text summary{font-size:12px}#export-feedback{flex-basis:100%;padding:4px 0;font-size:12px}#export-feedback a{color:var(--accent)}
@media(min-width:1700px){main{grid-template-columns:260px minmax(0,1fr) 320px}}
@media(max-width:1380px){header{align-items:flex-start}.brand{padding-top:4px}header .toolbar{max-width:800px}.toolbar-group{padding-left:8px!important}main{grid-template-columns:220px minmax(0,1fr) 284px;height:calc(100dvh - 144px)}aside,.inspector{padding:16px 12px}.canvas-head>span{font-size:11px}.workspace>.section-title small{display:block}.track-tools{gap:4px}}
@media(max-width:1100px){header{gap:12px;padding:12px 16px}.brand h1{font-size:18px}.brand p{max-width:190px;font-size:10px}header .toolbar{gap:6px}header .toolbar-group{border:0;padding-left:0!important}main{grid-template-columns:200px minmax(0,1fr) 260px;padding:10px;gap:10px}.canvas-head button{padding:5px 7px;font-size:11px}.canvas-foot #status{max-width:100%}.canvas-foot{align-items:flex-start}.canvas-head>div{gap:4px}.compact-field{grid-template-columns:66px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

main{height:calc(100dvh - var(--toolbar-height,88px) - 12px)}
:root[data-theme=dark] header button,:root[data-theme=dark] .canvas-head button,:root[data-theme=dark] #layers button{background:var(--input);color:var(--text)}
:root[data-theme=dark] #video-export{background:var(--accent);color:#fff}:root[data-theme=dark] #save-template{background:var(--ui-soft);color:var(--text)}
:root[data-theme=dark] button:hover{background:var(--ui-soft);color:var(--text)}
@media(max-width:1380px){header p{max-width:230px}main{height:calc(100dvh - var(--toolbar-height,120px) - 12px)}}

/* Keep workspace scrolling available without a duplicate visible rail. */
.workspace{scrollbar-width:none;-ms-overflow-style:none;}.workspace::-webkit-scrollbar{display:none;}

#layers.timeline{scrollbar-width:none;-ms-overflow-style:none;}#layers.timeline::-webkit-scrollbar{display:none;}

aside{scrollbar-width:none;-ms-overflow-style:none;}aside::-webkit-scrollbar{display:none;}

header button[hidden]{display:none!important;}header .toolbar-group[aria-label="模板"]{display:none;}header .toolbar{gap:12px;}header .toolbar-group{border-left:0;padding-left:0;}header .toolbar-group[aria-label="导出设置"]{border-left:1px solid var(--border);padding-left:12px;}header .toolbar-group[aria-label="导出与工程"]{border:0;padding:0;}

.canvas-foot[hidden]{display:none!important;}.workspace>.section-title{margin:16px 0 8px;padding:0 2px;font-size:13px;}.workspace #layers.timeline{margin-top:0;}
/* Frosted night surfaces: scoped to editor chrome, never the artwork iframe. */
:root[data-theme=dark]{--surface:#11171d;--card:rgba(30,40,50,.72);--input:rgba(210,230,250,.045);--text:#e7edf3;--muted:#a0afbd;--border:rgba(210,230,250,.09);--accent:#ef6573;--canvas-a:#29353e;--canvas-b:#2e3b45;--ui-soft:rgba(145,191,255,.065);--ui-selected:rgba(145,191,255,.16);--ui-selected-text:#e7edf3;--ui-focus:rgba(145,191,255,.28);--ui-clip:rgba(145,191,255,.10);--ui-clip-border:rgba(160,190,216,.23);--shadow:0 12px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.045);--night-focus:#91bfff}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 52% 24%,rgba(111,139,160,.075),transparent 65%),linear-gradient(180deg,#19232c 0%,#11171d 75%)}
:root[data-theme=dark] header,:root[data-theme=dark] aside,:root[data-theme=dark] .inspector{background:var(--card);border-color:var(--border);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
:root[data-theme=dark] #layers.timeline{background:rgba(23,33,42,.78);border-color:var(--border);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
:root[data-theme=dark] button,:root[data-theme=dark] header button,:root[data-theme=dark] .canvas-head button,:root[data-theme=dark] #layers button{background:rgba(210,230,250,.045);border-color:rgba(210,230,250,.09);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
:root[data-theme=dark] button:hover,:root[data-theme=dark] header button:hover,:root[data-theme=dark] #layers button:hover{background:rgba(210,230,250,.085);border-color:rgba(210,230,250,.16);color:var(--text)}
:root[data-theme=dark] button:focus-visible,:root[data-theme=dark] input:focus-visible,:root[data-theme=dark] select:focus-visible,:root[data-theme=dark] textarea:focus-visible{border-color:var(--night-focus);outline:2px solid var(--ui-focus);outline-offset:2px}
:root[data-theme=dark] #video-export,:root[data-theme=dark] #video-export:hover{background:#ef6573;color:#171d25;border-color:#ef6573;box-shadow:none;font-weight:700}
:root[data-theme=dark] #save-template,:root[data-theme=dark] #theme-toggle{background:rgba(210,230,250,.045);color:var(--text)}
:root[data-theme=dark] input:not([type=range]):not([type=checkbox]):not([type=color]),:root[data-theme=dark] select,:root[data-theme=dark] textarea,:root[data-theme=dark] .slider input.slider-number{background:rgba(89,111,131,.12);color:var(--text);border-color:rgba(210,230,250,.10)}
:root[data-theme=dark] #search{background-color:rgba(89,111,131,.10)}
:root[data-theme=dark] .property-tabs,:root[data-theme=dark] .library-tabs{background:rgba(15,24,32,.24);border-color:var(--border)}
:root[data-theme=dark] #library .library-tabs button.active,:root[data-theme=dark] .property-tabs button.active{background:rgba(145,191,255,.16);color:#e7edf3;border:1px solid rgba(145,191,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
:root[data-theme=dark] .property-tabs button,:root[data-theme=dark] #library .library-tabs button{border:1px solid transparent;box-shadow:none}
:root[data-theme=dark] .library-part{background:rgba(102,126,146,.055);border-color:rgba(210,230,250,.075);box-shadow:none}
:root[data-theme=dark] .library-part:hover{background:rgba(102,126,146,.09);border-color:rgba(210,230,250,.14)}
:root[data-theme=dark] #library .library-part button{background:transparent;box-shadow:none;color:var(--text)}
:root[data-theme=dark] #library .library-part button span{background:rgba(210,230,250,.045);border-color:var(--border);color:var(--muted)}
:root[data-theme=dark] .part-variant{background:rgba(20,31,40,.20);color:var(--muted)}
:root[data-theme=dark] #stage{border-color:rgba(210,230,250,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
:root[data-theme=dark] .track-row,:root[data-theme=dark] .track-ruler,:root[data-theme=dark] .track-tools{border-color:rgba(210,230,250,.075)}
:root[data-theme=dark] .track-lane{background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(210,230,250,.055) calc(12.5% - 1px) 12.5%)}
:root[data-theme=dark] .track-clip{background:rgba(145,191,255,.10);color:#d9e5ee;border-color:rgba(145,191,255,.22);box-shadow:none}
:root[data-theme=dark] .track-clip.active{background:rgba(145,191,255,.16);border:1.5px solid rgba(145,191,255,.75);box-shadow:none}
:root[data-theme=dark] .clip-handle{background:rgba(145,191,255,.12)}
:root[data-theme=dark] .timeline-playhead,:root[data-theme=dark] .timeline-playhead i{background:#ef6573}
:root[data-theme=dark] #timeline-play{color:#e7edf3!important;border-color:rgba(210,230,250,.16)!important}
:root[data-theme=dark] .track-name,:root[data-theme=dark] .track-ruler{color:#a0afbd}
:root[data-theme=dark] .inspector .group,:root[data-theme=dark] .inspector-section{background:transparent;border-color:rgba(210,230,250,.075);box-shadow:none;backdrop-filter:none}
:root[data-theme=dark] .color-chip,:root[data-theme=dark] .curve-mode-preview{background:rgba(89,111,131,.10);border-color:rgba(210,230,250,.09)}
:root[data-theme=dark] .inspector #properties>p:only-child:before{color:#7f909f}
:root[data-theme=dark] .brand h1:before{background:rgba(145,191,255,.12);color:#c5d7e8}
:root[data-theme=dark] input[type=range],:root[data-theme=dark] input[type=checkbox]{accent-color:#91bfff}
@supports not (backdrop-filter:blur(16px)){:root[data-theme=dark] header,:root[data-theme=dark] aside,:root[data-theme=dark] .inspector{background:#1c252e}:root[data-theme=dark] #layers.timeline{background:#19232d}}
:root[data-theme=dark] button,:root[data-theme=dark] select,:root[data-theme=dark] textarea,:root[data-theme=dark] input:not([type=range]):not([type=checkbox]):not([type=color]){appearance:none;-webkit-appearance:none;background-image:none}
:root[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A0AFBD' stroke-width='1.5'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");background-position:right 9px center;background-repeat:no-repeat}
:root[data-theme=dark] .property-tabs button,:root[data-theme=dark] #library .library-tabs button{border-color:transparent!important}
:root[data-theme=dark] .property-tabs button.active,:root[data-theme=dark] #library .library-tabs button.active{border-color:rgba(145,191,255,.14)!important}

header .brand h1{margin-bottom:0;}header .brand{align-self:center;padding-top:0;}
/* Subtle editor-only material texture and ambient gradients. */
body{position:relative;isolation:isolate;background:radial-gradient(ellipse at 45% 5%,rgba(255,255,255,.62),transparent 65%),linear-gradient(135deg,#e9eded,#dde4e5)}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808b92' filter='url(%23n)' opacity='.28' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-repeat:repeat;opacity:.12;mix-blend-mode:multiply}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 48% 12%,rgba(111,139,160,.105),transparent 62%),radial-gradient(ellipse at 95% 85%,rgba(81,107,125,.045),transparent 55%),linear-gradient(145deg,#19232c 0%,#11171d 65%,#10161b 100%)}
:root[data-theme=dark] body:before{opacity:.085;mix-blend-mode:soft-light}
/* Unified frosted glass material; isolated from composition content. */
:root{--glass-panel:rgba(245,248,249,.64);--glass-edge:rgba(255,255,255,.62);--glass-inner:rgba(255,255,255,.28);--glass-shadow:0 14px 36px rgba(39,53,63,.075),inset 0 1px 0 rgba(255,255,255,.65);--glass-input:rgba(255,255,255,.38)}
:root[data-theme=dark]{--glass-panel:rgba(64,73,82,.43);--glass-edge:rgba(226,237,247,.17);--glass-inner:rgba(219,232,244,.065);--glass-shadow:0 16px 38px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.095);--glass-input:rgba(216,230,242,.075)}
body{background:radial-gradient(ellipse at 10% 12%,rgba(221,231,241,.85),transparent 58%),radial-gradient(ellipse at 92% 30%,rgba(224,215,201,.58),transparent 55%),radial-gradient(ellipse at 60% 92%,rgba(181,203,199,.48),transparent 60%),linear-gradient(140deg,#cbd4dc,#dce1e3 55%,#b7c7c9)}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 8% 8%,rgba(116,134,155,.28),transparent 60%),radial-gradient(ellipse at 95% 25%,rgba(144,124,103,.13),transparent 58%),radial-gradient(ellipse at 65% 94%,rgba(80,116,110,.17),transparent 65%),linear-gradient(145deg,#242d36,#171f27 55%,#142222)}
header,aside,.inspector,#layers.timeline,:root[data-theme=dark] header,:root[data-theme=dark] aside,:root[data-theme=dark] .inspector,:root[data-theme=dark] #layers.timeline{background:var(--glass-panel);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px) saturate(110%);-webkit-backdrop-filter:blur(24px) saturate(110%)}
.library-part,:root[data-theme=dark] .library-part{background:var(--glass-inner);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.library-part:hover,:root[data-theme=dark] .library-part:hover{background:var(--glass-input);border-color:var(--glass-edge)}
.part-variant,:root[data-theme=dark] .part-variant{background:var(--glass-inner);border-color:var(--glass-edge)}
.property-tabs,.library-tabs,:root[data-theme=dark] .property-tabs,:root[data-theme=dark] .library-tabs{background:var(--glass-inner);border-color:var(--glass-edge)}
button,header button,.canvas-head button,#layers button,:root[data-theme=dark] button,:root[data-theme=dark] header button,:root[data-theme=dark] .canvas-head button,:root[data-theme=dark] #layers button{background:var(--glass-input);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
button:hover,:root[data-theme=dark] button:hover{background:var(--glass-inner);border-color:var(--glass-edge)}
input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea,.slider input.slider-number,:root[data-theme=dark] input:not([type=range]):not([type=checkbox]):not([type=color]),:root[data-theme=dark] select,:root[data-theme=dark] textarea,:root[data-theme=dark] .slider input.slider-number{background-color:var(--glass-input);border-color:var(--glass-edge)}
#search,:root[data-theme=dark] #search{background-color:var(--glass-input)}
.color-chip,.curve-mode-preview,:root[data-theme=dark] .color-chip,:root[data-theme=dark] .curve-mode-preview{background:var(--glass-inner);border-color:var(--glass-edge)}
#video-export,#video-export:hover,:root[data-theme=dark] #video-export,:root[data-theme=dark] #video-export:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
#theme-toggle,:root[data-theme=dark] #theme-toggle{background:var(--glass-input)}
.inspector .group,.inspector-section,:root[data-theme=dark] .inspector .group,:root[data-theme=dark] .inspector-section{border-color:var(--glass-edge)}
#stage{border-color:var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
@supports not (backdrop-filter:blur(24px)){header,aside,.inspector,#layers.timeline{background:#edf1f3}:root[data-theme=dark] header,:root[data-theme=dark] aside,:root[data-theme=dark] .inspector,:root[data-theme=dark] #layers.timeline{background:#29343e}}
/* Diagonal frosted backdrop: upper-left light, lower-right shaded. */
body{background:linear-gradient(135deg,#dce0e6 0%,#d2d5d9 28%,#c2c5c6 57%,#b1bcb7 78%,#96aaa4 100%)}
:root[data-theme=dark] body{background:linear-gradient(135deg,#626773 0%,#505660 22%,#3e454c 47%,#2d383c 71%,#1d3230 100%)}
body:before{opacity:.23;mix-blend-mode:soft-light;background-size:140px 140px}
:root[data-theme=dark] body:before{opacity:.19;mix-blend-mode:soft-light}
:root{--glass-panel:rgba(246,246,247,.48);--glass-inner:rgba(255,255,255,.18);--glass-input:rgba(255,255,255,.27);--glass-edge:rgba(255,255,255,.47)}
:root[data-theme=dark]{--glass-panel:rgba(57,64,71,.48);--glass-inner:rgba(228,235,240,.055);--glass-input:rgba(228,235,240,.08);--glass-edge:rgba(230,236,244,.17)}
header,aside,.inspector,#layers.timeline,:root[data-theme=dark] header,:root[data-theme=dark] aside,:root[data-theme=dark] .inspector,:root[data-theme=dark] #layers.timeline{background:var(--glass-panel);backdrop-filter:blur(28px) saturate(90%);-webkit-backdrop-filter:blur(28px) saturate(90%)}
/* Slow ambient light movement, editor background only. */
body:after{content:'';position:fixed;inset:-35%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 28% 32%,rgba(255,255,255,.18) 0%,rgba(237,230,218,.07) 24%,transparent 54%),radial-gradient(ellipse at 76% 72%,rgba(147,183,176,.12),transparent 48%);animation:ambient-drift 32s ease-in-out infinite alternate;will-change:transform}
:root[data-theme=dark] body:after{background:radial-gradient(ellipse at 28% 32%,rgba(206,218,235,.12) 0%,rgba(221,207,187,.045) 26%,transparent 56%),radial-gradient(ellipse at 76% 72%,rgba(128,175,164,.085),transparent 50%)}
@keyframes ambient-drift{0%{transform:translate3d(-5%,-4%,0) rotate(-6deg)}50%{transform:translate3d(4%,1%,0) rotate(3deg)}100%{transform:translate3d(6%,5%,0) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){body:after{animation:none;will-change:auto}}
/* Native dropdown menus need opaque surfaces for reliable contrast. */
select option,select optgroup{background:#f5f7f7;color:#171a1c}
:root[data-theme=dark] select{color-scheme:dark}
:root[data-theme=dark] select option,:root[data-theme=dark] select optgroup{background:#26323d;color:#e7edf3}
:root[data-theme=dark] select option:checked{background:#40566d;color:#fff}

.inspector-section .axis-row.axis-sortable{grid-template-columns:18px minmax(0,1fr) 44px;align-items:center;}.axis-drag-grip{cursor:grab;touch-action:none;color:var(--muted);font-size:18px;text-align:center;user-select:none;}.axis-sortable.axis-dragging{opacity:.65;outline:1px solid var(--night-focus,#91bfff);border-radius:10px;}.axis-sortable.axis-drop-target{box-shadow:0 -2px 0 var(--accent);}.axis-dragging .axis-drag-grip{cursor:grabbing;}

#canvas{width:3840px;height:2160px;}

.timeline-duration-label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}.timeline-duration-label input{width:82px;height:30px;padding:4px 6px;font-variant-numeric:tabular-nums;}

.template-save-dialog{width:min(420px,calc(100vw - 40px));padding:24px;border:1px solid var(--glass-edge,var(--border));border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 20px 70px #0005;}.template-save-dialog::backdrop{background:#10182088;backdrop-filter:blur(4px)}.template-save-dialog h3{margin:0 0 12px;font-size:17px}.template-save-dialog p{font-size:13px;line-height:1.7;color:var(--muted)}.template-save-dialog label{display:block;font-size:13px}.template-save-dialog input{margin-top:8px;background:var(--glass-input);color:var(--text)}.template-dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.template-dialog-actions button[type=submit]{background:var(--accent);color:white}#template-feedback:empty{display:none}#template-feedback{padding:7px 4px;color:var(--text);font-size:12px}

.template-card{border:1px solid var(--glass-edge,var(--border));border-radius:16px;overflow:hidden;margin:10px 0;background:var(--glass-inner,var(--input))}.template-preview{display:block;width:100%;height:126px;border:0;background-color:var(--canvas-a);background-image:conic-gradient(var(--canvas-b) 25%,transparent 0 50%,var(--canvas-b) 0 75%,transparent 0);background-size:20px 20px;pointer-events:none}.template-card-footer{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--border);min-height:45px}.template-name{flex:1;min-width:0;overflow-wrap:anywhere;cursor:text;font-size:13px}.template-card-footer input{flex:1;width:0;min-width:0}.template-card-footer button{width:30px!important;min-width:30px;padding:0!important;min-height:30px;margin:0!important;display:grid!important;place-items:center;text-align:center!important;font-size:18px!important}.template-name[hidden]{display:none}

.template-preview{color-scheme:dark;background-color:#303b43!important;background-image:conic-gradient(#354149 25%,transparent 0 50%,#354149 0 75%,transparent 0)!important;background-size:20px 20px;}

.group-child-selector{padding:12px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}.group-child-selector select{display:block;margin-top:7px;width:100%}

.shape-section{border-top:1px solid var(--border);padding-top:8px;margin-top:14px}.shape-section-header{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:8px}.shape-section-header strong{font-size:13px}.shape-section-header .field{margin:0!important}.shape-check{display:flex!important;align-items:center;justify-content:space-between;gap:10px}.shape-check>span{margin:0}.shape-gradient-settings{padding-top:3px}.shape-section [hidden]{display:none!important}.shape-appearance .slider-number{max-width:80px}.shape-appearance .compact-field{margin:8px 0}

.chart-appearance>#curve-mode-preview{margin-bottom:12px!important}.chart-switches{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.chart-switches label.field{display:flex;align-items:center;gap:6px;margin:8px 0}.chart-appearance>.inspector-section{margin-top:8px;padding-top:6px}.chart-appearance .compact-field{margin:9px 0}.chart-appearance>.inspector-section>summary{min-height:34px;display:list-item}

/* Rounded visual boundaries for each property type, across the editor. */
.inspector #properties>.group{border:1px solid var(--glass-edge,var(--border));border-radius:18px;background:var(--glass-inner,var(--input));padding:14px;margin:12px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.inspector #properties>.chart-appearance,.inspector #properties>.shape-appearance{background:transparent;border:0;padding:10px 0;margin:0;box-shadow:none}
.inspector .chart-appearance>.inspector-section,.inspector .property-type-card,.inspector .shape-section{border:1px solid var(--glass-edge,var(--border));border-radius:16px;background:var(--glass-inner,var(--input));padding:12px;margin:10px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.property-type-card h4{font-size:12px;font-weight:650;color:var(--text);margin:0 0 10px}.property-type-card>#curve-mode-preview{margin-bottom:12px!important}.property-type-card>button{width:100%;margin-bottom:10px}
.inspector .chart-appearance>.inspector-section>summary{padding:2px 0;min-height:22px;line-height:22px;font-weight:600}
.inspector .chart-appearance>.inspector-section[open]>summary{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.inspector #properties>.group>.inspector-section{border:1px solid var(--glass-edge,var(--border));border-radius:12px;background:var(--glass-inner,var(--input));padding:9px 10px;margin:9px 0}
.inspector .shape-section-header{padding-bottom:4px}.inspector .group-child-selector{border:1px solid var(--glass-edge,var(--border));border-radius:16px;background:var(--glass-inner,var(--input));padding:12px;margin-top:12px}
:root[data-theme=dark] .inspector #properties>.group{background:var(--glass-inner);border-color:var(--glass-edge)}
:root[data-theme=dark] .inspector #properties>.chart-appearance,:root[data-theme=dark] .inspector #properties>.shape-appearance{background:transparent;border:0}