@import url('open-fonts.css');
*{box-sizing:border-box}body{margin:0;background:#101115;color:#e9edf5;font:13px EmbeddedSans,sans-serif;color-scheme:dark}header{height:86px;background:#191b21;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:20px}h1{font-size:19px;letter-spacing:1px;margin:0 0 7px}h1 span{font-size:15px;margin-left:15px;color:#b2bed2}header p{font-size:12px;color:#8d99ac;margin:0}button{font:inherit;color:inherit;background:#282d37;border:1px solid #ffffff18;border-radius:6px;padding:9px 11px;cursor:pointer}button:hover{background:#394660}header button{font-size:12px;margin-left:5px}main{display:grid;grid-template-columns:265px minmax(0,1fr) 320px;height:calc(100vh - 86px)}aside,.inspector{background:#191c22;overflow:auto;padding:18px;border-right:1px solid #ffffff12}.inspector{border-left:1px solid #ffffff12;border-right:0}h2{font-size:16px;margin:4px 0 20px}.section-title{font-size:13px;font-weight:700;margin:12px 0;color:#c7d5ec}.section-title small{font-size:10px;font-weight:400;color:#8a97ab;margin-left:6px}input,select,textarea{font:inherit;max-width:100%;background:#12151b;color:#eaf0fc;border:1px solid #394251;border-radius:5px;padding:8px;width:100%}#search{margin-bottom:12px}details{margin-bottom:10px}summary{font-size:12px;color:#99aecf;cursor:pointer;padding:10px 0}#library button{width:100%;margin:4px 0;display:flex;justify-content:space-between;text-align:left;font-size:12px;background:#242933}#library button span{color:#a8c3ff}#templates button{width:100%;margin:4px 0;font-size:12px}.workspace{padding:24px;overflow:auto;min-width:0}.canvas-head,.canvas-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a8b6cc;font-size:11px;margin:10px 0 14px}.canvas-head button{font-size:11px;padding:7px}#stage{position:relative;aspect-ratio:16/9;overflow:hidden;background-color:#353943;background-image:conic-gradient(#2b2f38 25%,transparent 0 50%,#2b2f38 0 75%,transparent 0);background-size:32px 32px;border:1px solid #ffffff23;border-radius:4px}#canvas{width:1920px;height:1080px;position:absolute;border:0;transform-origin:0 0}.canvas-foot label{display:flex;align-items:center;gap:8px;white-space:nowrap}.canvas-foot input{width:100px}#layers{display:flex;gap:6px;flex-wrap:wrap}#layers button{font-size:11px}#layers .active{background:#3b5076;border-color:#a0bcff}label.field{display:block;margin:12px 0;color:#b3c3dc;font-size:11px}.field>span{display:block;margin-bottom:7px}.slider{display:flex;gap:10px;align-items:center}.slider input{flex:1;width:0;padding:0;accent-color:#98b6ff}.slider output{min-width:45px;text-align:right;color:#d3e1ff;font:12px Consolas}.group{background:#22262e;border:1px solid #ffffff0b;padding:14px;margin-bottom:12px;border-radius:8px}.group h3{font-size:12px;margin:0 0 15px}.pair{display:flex;gap:7px}.pair button{flex:1;font-size:11px}input[type=color]{height:35px;padding:3px}textarea{min-height:70px;resize:vertical}.empty{color:#74849b;font-size:12px;padding:14px}@media(max-width:1200px){main{grid-template-columns:220px minmax(0,1fr) 280px}.workspace{padding:14px}header{padding:14px}header button{padding:7px;font-size:11px}}
.library-part{margin-bottom:10px;border:1px solid #ffffff0d;border-radius:7px;overflow:hidden;background:#222732}#library .library-part button{margin:0;border:0;border-radius:0}.part-variant{font-size:10px;padding:7px 8px;color:#9bacC5;border:0;border-top:1px solid #ffffff0b;border-radius:0;background:#1b2029;cursor:pointer}
.axis-row{display:flex;gap:6px;margin:7px 0}.axis-row input{flex:1;width:0}.axis-row button{font-size:11px;padding:7px}.group>div>h3{margin-top:18px}
.slider input.slider-number{flex:0 0 76px;width:76px;min-width:0;padding:6px 4px;text-align:right;font:12px Consolas,monospace;color:#d3e1ff;background:#141820;border:1px solid #394251}.slider input[type=range]{min-width:0}
.property-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:14px;position:sticky;top:-18px;background:#191c22;padding:8px 0;z-index:10}.property-tabs button{font-size:12px;padding:9px 2px;background:transparent;border-color:transparent}.property-tabs button.active{background:#364b70;border-color:#91b3ff55;color:#dbe7ff}.group[hidden]{display:none}
.part-thumbnail{display:block;width:100%;height:105px;border:0;pointer-events:none;background-color:#353943;background-image:conic-gradient(#2b2f38 25%,transparent 0 50%,#2b2f38 0 75%,transparent 0);background-size:20px 20px}.library-part:hover{border-color:#91b3ff66}
.library-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:2px 0 14px}#library .library-tabs button{display:block;text-align:center;margin:0;padding:9px 3px;background:#222732;border:1px solid #ffffff12;border-radius:6px;font-size:12px}#library .library-tabs button.active{background:#354d75;border-color:#92b5ff66;color:#e3eeff}.library-category-title{font-size:11px;color:#9db3d5;margin:12px 0}.library-category[hidden]{display:none}
/* Soft glass workspace, light and dark palettes */
:root{--surface:#f4f6f6;--card:#ffffffc9;--input:#ffffffb8;--text:#1a272a;--muted:#738184;--border:#203c4212;--accent:#95f5cc;--shadow:0 8px 28px #34494e08;--canvas-a:#e0e5e7;--canvas-b:#d5dde0;color-scheme:light}
:root[data-theme=dark]{--surface:#171e20;--card:#242f32da;--input:#172124cc;--text:#e3eeeb;--muted:#98aba7;--border:#d9f9ed12;--accent:#86e7be;--shadow:0 8px 28px #00000015;--canvas-a:#303c3e;--canvas-b:#263234;color-scheme:dark}
body{background:var(--surface);color:var(--text);font-family:EmbeddedSans,sans-serif}header{height:90px;margin:14px 18px 0;padding:17px 24px;background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(20px)}header h1{font-size:19px;letter-spacing:.7px}header h1:before{content:'✦';display:inline-block;color:var(--accent);background:var(--input);border-radius:12px;padding:7px 10px;margin-right:12px;font-size:23px}header h1 span{font-size:13px;color:var(--muted);font-weight:400}header p{color:var(--muted);padding-left:45px;font-size:10px}header button{border-radius:12px;padding:10px 13px;font-size:11px;margin-left:3px}#save-template{background:var(--accent);color:#15372b;border-color:transparent}main{height:calc(100vh - 120px);padding:14px 18px 0;gap:14px;grid-template-columns:260px minmax(0,1fr) 320px}aside,.inspector{background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);padding:18px;backdrop-filter:blur(18px);scrollbar-width:thin;scrollbar-color:var(--border) transparent}.workspace{background:linear-gradient(150deg,var(--card),transparent);border-radius:22px;padding:20px 10px;border:1px solid var(--border)}button{background:var(--input);color:var(--text);border:1px solid var(--border);border-radius:10px;transition:background .15s,box-shadow .15s}button:hover{background:var(--accent);color:#183c2d}input,select,textarea{background:var(--input);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px}input:focus,textarea:focus,select:focus{outline:2px solid #88dbb889;outline-offset:1px}.section-title{color:var(--text);font-size:12px}.section-title small,.library-category-title,.canvas-head,.canvas-foot{color:var(--muted)}.canvas-head{margin:6px 0 15px}.canvas-head button{padding:8px 10px}#stage{background-color:var(--canvas-a);background-image:conic-gradient(var(--canvas-b) 25%,transparent 0 50%,var(--canvas-b) 0 75%,transparent 0);border-color:var(--border);border-radius:15px;box-shadow:inset 0 0 0 1px #ffffff22}.library-part{background:var(--card);border-color:var(--border);border-radius:14px;margin-bottom:12px;box-shadow:0 3px 12px #283b3b04;overflow:hidden}#library .library-part button{background:transparent;color:var(--text);font-size:11px;padding:11px 10px}#library button span{color:var(--muted)}.part-variant{background:var(--input);color:var(--muted);font-size:10px;border-color:var(--border);border-radius:0;padding:9px}.part-thumbnail{background-color:var(--canvas-a);background-image:conic-gradient(var(--canvas-b) 25%,transparent 0 50%,var(--canvas-b) 0 75%,transparent 0);height:105px;border-bottom:1px solid var(--border)}.library-tabs{gap:4px;background:var(--input);padding:4px;border-radius:12px}#library .library-tabs button{background:transparent;color:var(--muted);border:0;border-radius:9px;padding:9px 3px}#library .library-tabs button.active{background:var(--accent);color:#193c2d}.property-tabs{background:var(--card);border-radius:12px;padding:5px;top:0;gap:3px}.property-tabs button{color:var(--muted);background:transparent;border-radius:8px;border:0}.property-tabs button.active{background:var(--accent);color:#193c2d}.group{background:var(--input);border:1px solid var(--border);border-radius:15px;padding:15px;margin:14px 0;box-shadow:0 2px 12px #283b3b03}.group h3{color:var(--text);font-size:11px}.field{color:var(--muted)!important}.slider input.slider-number{color:var(--text);background:var(--card);border-color:var(--border);border-radius:7px}.slider input[type=range],input[type=range]{accent-color:#54b992}.slider output{color:var(--text)}#layers button{background:var(--input);color:var(--muted);border-color:var(--border);border-radius:10px}#layers .active{background:var(--accent);color:#193c2d;border-color:transparent}.inspector h2{font-size:14px;margin:4px 0 16px}.bar-label-editor{padding:10px 0;border-top:1px solid var(--border)}summary{color:var(--muted)}#status{color:var(--muted)}.empty{color:var(--muted)}#theme-toggle{background:var(--surface)}@media(max-width:1250px){main{grid-template-columns:220px minmax(0,1fr) 285px;padding:10px;gap:10px}header{margin:10px 10px 0;padding:12px 15px}header button{padding:8px}header h1 span{display:none}.workspace{padding:14px 8px}}
#canvas,.part-thumbnail{color-scheme:dark}
:root{--canvas-a:#465158;--canvas-b:#3c474e}:root[data-theme=dark]{--canvas-a:#303c3e;--canvas-b:#263234}:root[data-theme=dark] header button,:root[data-theme=dark] .canvas-head button,:root[data-theme=dark] .pair button,:root[data-theme=dark] #layers button{background:#28373a;color:#c9d9d5}:root[data-theme=dark] #save-template,:root[data-theme=dark] #layers .active{background:var(--accent);color:#193c2d}:root[data-theme=dark] button:hover{background:#395047;color:#e2fff1}
#layers.timeline{display:block;position:relative;min-height:200px;max-height:400px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--card);padding:10px;user-select:none}.track-tools{display:flex;gap:6px;align-items:center;margin-bottom:10px}.track-tools span{color:var(--muted);font-size:11px;margin-left:auto}.track-ruler{display:flex;justify-content:space-between;margin-left:130px;color:var(--muted);font:10px Consolas;height:25px;border-bottom:1px solid var(--border)}.track-row{display:flex;height:40px;border-bottom:1px solid var(--border)}.track-name{width:125px;flex-shrink:0;padding:11px 5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}.track-lane{flex:1;position:relative;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),var(--border) calc(12.5% - 1px) 12.5%)}.track-clip{position:absolute;top:5px;height:30px;background:#72c6ab44;border:1px solid #72c6ab88;color:var(--text);border-radius:5px;font-size:10px;padding:7px 10px;cursor:ew-resize;overflow:hidden;white-space:nowrap}.track-row.active .track-clip{background:#75dab577;border-color:#91f8cd;box-shadow:inset 0 0 0 1px #91f8cd}.track-row.active .track-name{color:#43a580}.clip-handle{position:absolute;top:0;bottom:0;width:7px;background:#91f8cd44;cursor:ew-resize}.clip-handle.left{left:0}.clip-handle.right{right:0}.track-marquee{display:none;position:absolute;background:#79d6af22;border:1px solid #79d6af;pointer-events:none;z-index:20}
.track-clip{overflow:visible;z-index:2;touch-action:none;cursor:grab}.track-clip.active{background:#75dab577;border-color:#91f8cd;box-shadow:inset 0 0 0 1px #91f8cd}.track-clip:active{cursor:grabbing;z-index:30}.track-name{cursor:default}.track-row{min-height:40px}.track-lane{overflow:visible}
/* Keep export controls compact within the header. */
header{height:auto;min-height:90px;align-items:center;flex-wrap:wrap}header>div:first-child{flex:1;min-width:240px}header>div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;flex:0 1 auto}header>div:last-child button{margin:0;white-space:nowrap;flex-shrink:0}header #video-format{width:145px;flex:0 0 145px;height:36px;padding:7px 9px;font-size:11px;border-radius:10px}main{height:calc(100vh - 130px)}@media(max-width:1400px){header h1 span{display:none}header>div:first-child{min-width:195px}header>div:last-child{gap:4px}header>div:last-child button{padding:9px 8px;font-size:10px}header #video-format{width:128px;flex-basis:128px}}@media(max-width:1100px){header>div:last-child{flex-basis:100%;justify-content:flex-start}header{gap:12px}main{height:calc(100vh - 175px)}}
.curve-mode-preview{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:14px;color:var(--muted)}.curve-mode-preview svg{display:block}

#export-feedback{flex-basis:100%;font-size:12px;line-height:1.6;padding:5px 8px;max-width:650px;overflow-wrap:anywhere;}#export-feedback a{color:var(--accent,#81dbbb);margin-left:8px;text-decoration:underline;}

.timeline-playhead{position:absolute;width:2px;background:#ff776e;z-index:40;cursor:ew-resize;touch-action:none;transform:translateX(-1px);}.timeline-playhead:before{content:"";position:absolute;inset:0 -6px;}.timeline-playhead i{position:absolute;top:0;left:-5px;width:12px;height:12px;background:#ff776e;clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);}.track-ruler{cursor:ew-resize;touch-action:none;}#timeline-time{margin-left:0;font-variant-numeric:tabular-nums;}

.track-ruler{margin-left:125px;}

.inspector-section{border-top:1px solid var(--border);margin-top:10px;padding-top:8px;}.inspector-section summary{cursor:pointer;font-size:12px;font-weight:600;padding:5px 0;color:var(--text);}.inspector-section[open] summary{margin-bottom:8px;}.compact-field{display:grid!important;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px!important;}.compact-field>span{margin:0!important;}.compact-field input[type=color]{height:30px!important;}.compact-field select{min-width:0;}.curve-mode-preview{margin:0 0 12px!important;}

.inspector-hint{font-size:11px;color:var(--muted);margin:0 0 8px!important;}.data-editor{min-height:72px!important;height:84px;resize:vertical;line-height:1.5;font-variant-numeric:tabular-nums;}.primary-data-apply{width:100%;margin:8px 0;}.inspector-section>.inspector-section{border:0;margin-top:0;}.inspector-section .axis-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;margin:6px 0;}.inspector-section .axis-row button{padding:6px 4px;font-size:10px;}.inspector-section .axis-row input{min-width:0;}.curve-label-editor{padding:8px 0;border-bottom:1px solid var(--border);}

.inspector-section .axis-row input{width:100%;min-width:0;display:block;flex:none;color:var(--text);font-variant-numeric:tabular-nums;}

.color-chip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 7px;min-width:0;}.color-chip input[type=color]{width:30px!important;height:26px!important;flex:0 0 30px;border:0;background:transparent;padding:0;cursor:pointer;}.color-code{font:11px Consolas,monospace;color:var(--muted);}.inspector-section .compact-field{margin:9px 0;}

.label-parameter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px;}.label-parameter-grid .field{margin:5px 0!important;}.label-parameter-grid input{min-width:0;padding:8px;font-variant-numeric:tabular-nums;}.curve-label-editor textarea{min-height:54px;height:60px;resize:vertical;}.curve-label-editor .remove-label{font-size:10px;color:var(--muted);padding:6px 9px;margin-top:3px;}.curve-label-editor>.color-field{margin:9px 0;}

.label-parameter-grid:has(.label-position-slider){grid-template-columns:1fr 1fr;}.label-parameter-grid .field:has(.label-position-slider){grid-column:1 / -1;}.label-position-slider input[type=range]{padding:0;min-width:0;}.label-position-slider input.slider-number{flex:0 0 68px;width:68px;min-width:0;}

header>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;min-width:0;}header>div:last-child button{margin-left:0;}#video-format{width:126px;flex:0 0 126px;}#video-resolution{width:172px;flex:0 0 172px;}header>div:first-child{flex:0 0 auto;}@media(max-width:1450px){header h1 span{display:none;}header>div:last-child{max-width:760px;}header{height:auto;min-height:90px;}}