:root{--bg:#0b0c0e;--panel:#121316;--panel-2:#17181c;--border:#24262b;--border-soft:#1c1e22;--text:#e6e4df;--text-2:#a09d96;--text-3:#6c6a64;--accent:#f2f1ed;--accent-dim:#ffffff17;--danger:#d97066;--focus:#ffffff8c;--font-ui:"Inter", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--fs-xs:10.5px;--fs-sm:11.5px;--fs-md:12.5px;--fs-lg:14px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--r1:5px;--r2:8px;--inspector-w:288px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-ui);font-size:var(--fs-md);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}button:disabled{cursor:default;opacity:.4}:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-radius:var(--r1)}.app{grid-template-rows:44px 1fr;grid-template-columns:1fr var(--inspector-w);grid-template-areas:"top top""stage inspector";height:100%;display:grid}.topbar{grid-area:top}.stage{flex-direction:column;grid-area:stage;min-width:0;display:flex;position:relative}.inspector{grid-area:inspector}@media (width<=900px){.app{grid-template-columns:1fr 0}.inspector{display:none}.app.inspector-open{grid-template-columns:1fr min(var(--inspector-w), 85vw)}.app.inspector-open .inspector{display:flex}}.topbar{align-items:center;gap:var(--s2);padding:0 var(--s3);background:var(--panel);border-bottom:1px solid var(--border);display:flex}.brand{align-items:center;gap:var(--s2);font-size:var(--fs-lg);letter-spacing:-.01em;margin-right:var(--s3);-webkit-user-select:none;user-select:none;white-space:nowrap;font-weight:600;display:flex}.brand svg{display:block}.topbar .spacer{flex:1}.top-divider{background:var(--border);width:1px;height:20px;margin:0 var(--s1)}.tbtn{border-radius:var(--r1);height:28px;font-size:var(--fs-md);color:var(--text-2);white-space:nowrap;align-items:center;gap:6px;padding:0 10px;font-weight:500;transition:background .12s,color .12s;display:inline-flex}.tbtn:hover:not(:disabled){background:var(--panel-2);color:var(--text)}.tbtn.primary{color:#141517;background:#ececea;font-weight:600}.tbtn.primary:hover:not(:disabled){color:#141517;background:#fff}.tbtn.icon{justify-content:center;width:28px;padding:0}.tbtn svg{flex:none}.file-chip{background:var(--panel-2);border:1px solid var(--border-soft);height:26px;font-size:var(--fs-sm);color:var(--text-2);border-radius:99px;align-items:center;gap:6px;max-width:220px;padding:0 10px;display:inline-flex}.file-chip .name{text-overflow:ellipsis;white-space:nowrap;color:var(--text);overflow:hidden}.file-chip .meta{color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}.canvas-wrap{flex:1;min-height:0;position:relative}.canvas-wrap canvas{width:100%;height:100%;display:block}.overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay>*{pointer-events:auto}.empty-card{text-align:center;border:1px dashed var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0b0c0e8c;border-radius:12px;width:min(420px,100% - 48px);padding:40px 36px;transition:border-color .15s,background .15s}.empty-card.dragging{border-color:var(--accent);background:#ffffff0a}.empty-card h2{letter-spacing:-.01em;margin:var(--s4) 0 var(--s2);font-size:16px;font-weight:600}.empty-card p{color:var(--text-2);line-height:1.55;font-size:var(--fs-md)}.empty-card .actions{gap:var(--s2);margin-top:var(--s5);justify-content:center;display:flex}.btn{border-radius:var(--r1);height:32px;font-size:var(--fs-md);background:var(--panel-2);border:1px solid var(--border);color:var(--text);align-items:center;gap:6px;padding:0 14px;font-weight:550;transition:background .12s,border-color .12s;display:inline-flex}.btn:hover{background:#1d1f24;border-color:#2e3138}.btn.primary{color:#141517;background:#ececea;border-color:#ececea;font-weight:600}.btn.primary:hover{background:#fff;border-color:#fff}.state-card{align-items:center;gap:var(--s3);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;background:#0b0c0eb3;border-radius:12px;flex-direction:column;max-width:380px;padding:28px 32px;display:flex}.state-card.error{border-color:#d9706666}.state-card .title{font-weight:600;font-size:var(--fs-lg)}.state-card .detail{color:var(--text-2);font-size:var(--fs-md);line-height:1.5}.state-card.error .title{color:var(--danger)}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.drop-veil{border:2px dashed var(--accent);color:var(--accent);z-index:30;pointer-events:none;background:#ffffff0d;border-radius:12px;justify-content:center;align-items:center;font-weight:600;display:flex;position:absolute;inset:10px}.timeline{align-items:center;gap:var(--s3);height:48px;padding:0 var(--s3);background:var(--panel);border-top:1px solid var(--border);display:flex}.transport{align-items:center;gap:2px;display:flex}.transport .tbtn.icon{border-radius:var(--r1);width:30px;height:30px}.transport .tbtn.icon.active{color:var(--accent);background:var(--accent-dim)}.transport .play{background:var(--text);width:34px;height:34px;color:var(--bg);border-radius:50%;justify-content:center;align-items:center;transition:transform .1s,background .12s;display:inline-flex}.transport .play:hover:not(:disabled){background:#fff;transform:scale(1.04)}.scrub{cursor:pointer;flex:1;align-items:center;height:22px;display:flex;position:relative}.scrub .track{background:var(--border);border-radius:2px;width:100%;height:4px;position:relative;overflow:hidden}.scrub .fill{background:var(--accent);border-radius:2px;position:absolute;inset:0 auto 0 0}.scrub .thumb{background:var(--text);opacity:0;border-radius:50%;width:12px;height:12px;transition:opacity .12s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000080}.scrub:hover .thumb,.scrub.active .thumb{opacity:1}.time-readout{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;min-width:92px}.time-readout b{color:var(--text);font-weight:500}.inspector{background:var(--panel);border-left:1px solid var(--border);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;display:flex;overflow-y:auto}.section{border-bottom:1px solid var(--border-soft)}.section-head{align-items:center;gap:var(--s2);width:100%;padding:10px var(--s3);font-size:var(--fs-sm);letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);-webkit-user-select:none;user-select:none;font-weight:600;display:flex}.section-head:hover{color:var(--text)}.section-head .chev{color:var(--text-3);transition:transform .15s}.section-head.open .chev{transform:rotate(90deg)}.section-head .reset{color:var(--text-3);border-radius:var(--r1);opacity:0;text-transform:none;letter-spacing:0;font-weight:500;font-size:var(--fs-xs);margin-left:auto;padding:2px 4px;transition:opacity .12s,color .12s}.section:hover .reset,.section-head .reset:focus-visible{opacity:1}.section-head .reset:hover{color:var(--text)}.section-body{padding:var(--s1) var(--s3) var(--s3);flex-direction:column;gap:7px;display:flex}.row{align-items:center;gap:var(--s2);grid-template-columns:92px 1fr 46px;min-height:24px;display:grid}.row.disabled{opacity:.35;pointer-events:none}.row .label{font-size:var(--fs-md);color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;cursor:default;overflow:hidden}.row input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:16px}.row input[type=range]::-webkit-slider-runnable-track{background:var(--border);border-radius:2px;height:3px}.row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-2);border-radius:50%;width:11px;height:11px;margin-top:-4px;transition:background .1s,transform .1s}.row input[type=range]:hover::-webkit-slider-thumb{background:var(--accent);transform:scale(1.15)}.row input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--accent);transform:scale(1.15)}.row input[type=range]::-moz-range-track{background:var(--border);border-radius:2px;height:3px}.row input[type=range]::-moz-range-thumb{background:var(--text-2);border:none;border-radius:50%;width:11px;height:11px}.row input[type=range]:hover::-moz-range-thumb{background:var(--accent)}.num-input{border-radius:var(--r1);width:100%;height:22px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);text-align:right;font-variant-numeric:tabular-nums;background:0 0;border:1px solid #0000;padding:0 4px;transition:background .1s,border-color .1s}.num-input:hover{background:var(--panel-2)}.num-input:focus{background:var(--panel-2);border-color:var(--border);outline:none}.color-well{border-radius:var(--r1);border:1px solid var(--border);cursor:pointer;width:100%;height:22px;position:relative;overflow:hidden}.color-well input{cursor:pointer;border:none;width:calc(100% + 12px);height:calc(100% + 12px);padding:0;position:absolute;inset:-6px}.color-hex{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2);text-align:right}.seg{background:var(--panel-2);border:1px solid var(--border-soft);border-radius:var(--r1);gap:2px;padding:2px;display:flex}.seg button{height:20px;font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;border-radius:3px;flex:1;padding:0 4px;font-weight:500;transition:background .1s,color .1s}.seg button:hover{color:var(--text-2)}.seg button.on{color:var(--text);background:#26282e}.select{border-radius:var(--r1);border:1px solid var(--border);background:var(--panel-2);width:100%;height:24px;color:var(--text);font:inherit;font-size:var(--fs-md);cursor:pointer;padding:0 6px}.toggle-row{align-items:center;gap:var(--s2);min-height:24px;display:flex}.toggle-row .label{font-size:var(--fs-md);color:var(--text-2);flex:1}.switch{background:var(--border);border-radius:99px;flex:none;width:28px;height:16px;transition:background .13s;position:relative}.switch:after{content:"";background:var(--text-2);border-radius:50%;width:12px;height:12px;transition:transform .13s,background .13s;position:absolute;top:2px;left:2px}.switch.on{background:var(--accent)}.switch.on:after{background:#141517;transform:translate(12px)}.preset-grid{gap:var(--s1);grid-template-columns:repeat(3,1fr);display:grid}.preset-grid button{border-radius:var(--r1);border:1px solid var(--border-soft);background:var(--panel-2);height:26px;font-size:var(--fs-sm);color:var(--text-2);font-weight:500;transition:border-color .12s,color .12s,background .12s}.preset-grid button:hover{color:var(--text);border-color:var(--border)}.preset-grid button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.export-actions{gap:var(--s1);flex-direction:column;display:flex}.export-actions .btn{height:28px;color:var(--text-2);background:0 0;border-color:#0000;justify-content:flex-start;padding:0 8px;font-weight:500}.export-actions .btn:hover{background:var(--panel-2);color:var(--text);border-color:#0000}.export-actions .btn svg{color:var(--text-3)}.hint{font-size:var(--fs-xs);color:var(--text-3);padding-top:2px;line-height:1.5}[data-tip]{position:relative}[data-tip]:hover:after{content:attr(data-tip);border-radius:var(--r1);border:1px solid var(--border);color:var(--text);font-size:var(--fs-xs);letter-spacing:0;text-transform:none;white-space:nowrap;z-index:50;pointer-events:none;background:#202227;padding:4px 8px;font-weight:450;animation:.12s ease-out tipIn;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0006}@keyframes tipIn{0%{opacity:0;transform:translate(-50%,2px)}}