@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";*{box-sizing:border-box}:root{--bg-color: #1a1a1a;--panel-bg: #2b2b2b;--text-color: #f0f0f0;--text-muted: #949494;--text-dim: #767676;--accent-color: #00A2FF;--accent-hover: #0088FF;--accent-soft: rgba(0, 162, 255, .1);--accent-yellow: #FFE459;--border-color: #3f3f3f;--border-light: rgba(255, 255, 255, .1);--divider-color: rgba(255, 255, 255, .05);--workspace-bg: #444444;--field-bg: #303030;--artboard-bg: #ffffff;--ui-white: #ffffff;--guide-color: var(--playhead-color);--ruler-line: #666666;--selection-color: #00A2FF;--playhead-color: #ff3b3b;--keyframe-color: var(--accent-color);--auto-keyframe-color: #ff4d4d;--danger-color: #ff4d4d;--danger-soft: rgba(255, 77, 77, .1);--hover-bg: rgba(255, 255, 255, .1);--active-bg: rgba(255, 255, 255, .1);--overlay-bg: rgba(0, 0, 0, .6);--shadow-dark: 0 10px 30px rgba(0, 0, 0, .5);--border-strong: rgba(255, 255, 255, .4);--scrollbar-track: rgba(0, 0, 0, .1);--scrollbar-thumb-hover: rgba(255, 255, 255, .2);--track-bg: rgba(0, 0, 0, .2);--track-line: rgba(255, 255, 255, .05);--keyframe-fill: #ffffff;--kbd-bg: rgba(255, 255, 255, .04);--fs-main: .6875rem;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 10px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--panel-padding: var(--space-4);--field-w: 94px;--z-canvas-overlay: 5;--z-playhead: 10;--z-ruler: 10;--z-ruler-left: 11;--z-ruler-corner: 12;--z-scrollbar: 15;--z-timeline-resizer: 20;--z-zoom-pill: 100;--z-dropdown: 1000;--z-submenu: 1001;--z-modal: 2000;--z-popover: 3000;--z-context-menu: 9999;--z-pointer-cursor: 999999}:root[data-theme=light]{--bg-color: #ededed;--panel-bg: #ffffff;--text-color: #1c1c1c;--text-muted: #6b6b6b;--text-dim: #9a9a9a;--accent-soft: rgba(0, 162, 255, .12);--border-color: #dcdcdc;--border-light: rgba(0, 0, 0, .12);--divider-color: rgba(0, 0, 0, .06);--workspace-bg: #d9d9d9;--field-bg: #f0f0f0;--ruler-line: #b0b0b0;--hover-bg: rgba(0, 0, 0, .06);--active-bg: rgba(0, 0, 0, .1);--overlay-bg: rgba(0, 0, 0, .35);--shadow-dark: 0 10px 30px rgba(0, 0, 0, .18);--border-strong: rgba(0, 0, 0, .35);--scrollbar-track: rgba(0, 0, 0, .06);--scrollbar-thumb-hover: rgba(0, 0, 0, .3);--track-bg: rgba(0, 0, 0, .05);--track-line: rgba(0, 0, 0, .08);--keyframe-fill: #555555;--kbd-bg: rgba(0, 0, 0, .05)}body{margin:0;font-family:Inter,sans-serif;font-size:var(--fs-main);font-weight:400;background-color:var(--bg-color);color:var(--text-color);display:flex;height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none}h1,h3,h4,h5,h6{font-size:var(--fs-main);font-weight:400;margin:0}h2{font-size:var(--fs-main);font-weight:550;margin:0}#root{display:flex;flex-direction:column;width:100%;height:100%}input,button,select,textarea{font-family:JetBrains Mono,monospace;font-size:var(--fs-main)}input,textarea,[contenteditable=true],.json-preview-selectable{user-select:text;-webkit-user-select:text}.no-spinner input[type=number]::-webkit-inner-spin-button,.no-spinner input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.no-spinner input[type=number]{-moz-appearance:textfield;appearance:textfield}.color-body-picker.react-colorful{width:100%;height:auto}.color-body-picker .react-colorful__saturation{box-sizing:border-box;aspect-ratio:1 / 1}.picker-close-btn{transition:background-color .12s ease-in-out}.picker-close-btn:hover{background-color:var(--hover-bg)!important}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;padding:0;box-sizing:border-box}input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:var(--radius-sm)}input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}input[type=color]::-moz-color-swatch{border:none;border-radius:2px}.app-container{display:flex;flex-direction:column;height:100vh}.shape-name-input{border-radius:var(--radius-sm);transition:all .2s;cursor:pointer;margin-left:calc(var(--space-2) * -1);padding:var(--space-1) var(--space-2);background-color:transparent;border:1px solid transparent;color:inherit;outline:none}.shape-name-input:hover{background-color:var(--field-bg);border-color:var(--border-color)}.shape-name-input:focus{background-color:var(--field-bg);border-color:var(--accent-color);cursor:text}.toolbar{display:flex;align-items:center;padding:var(--space-3) var(--space-5);background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);gap:var(--space-3)}.toolbar button{background:transparent;border:none;color:var(--text-color);padding:var(--space-2);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.toolbar button:hover{background-color:var(--hover-bg)}.toolbar button.active{background-color:var(--accent-color)}.left-sidebar{width:50px;flex-shrink:0;background-color:var(--panel-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:var(--space-3) 0;gap:var(--space-3)}.left-sidebar button{background:transparent;border:none;color:var(--text-color);width:32px;height:32px;padding:0;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.left-sidebar button:hover{background-color:var(--hover-bg)}.left-sidebar button.active{background-color:var(--accent-color)}.aspect-lock-btn{padding:var(--space-1);background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:background-color .2s,color .2s}.aspect-lock-btn:hover{background-color:var(--hover-bg);color:var(--text-color)}.aspect-lock-btn.active{color:var(--accent-color);background-color:var(--accent-soft)}.aspect-lock-btn.active:hover{background-color:var(--hover-bg)}.reset-anchor-btn{padding:var(--space-1);background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:background-color .2s,color .2s}.reset-anchor-btn:hover{background-color:var(--hover-bg);color:var(--text-color)}.boolean-op-btn{flex:1;height:30px;padding:0;background:transparent;border:1px solid var(--border-light);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s,border-color .2s}.boolean-op-btn:hover{background-color:var(--hover-bg);color:var(--text-color);border-color:var(--accent-color)}.boolean-op-btn.active{color:var(--accent-color);background-color:var(--accent-soft);border-color:var(--accent-color)}.align-seg-group{display:flex;flex:1}.align-seg-group .boolean-op-btn{border-radius:0;margin-left:-1px}.align-seg-group .boolean-op-btn:first-child{margin-left:0;border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.align-seg-group .boolean-op-btn:last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.align-seg-group .boolean-op-btn:hover,.boolean-op-btn.no-accent-hover:hover{border-color:var(--border-light)}.paint-layer-btn{width:26px;height:26px;flex-shrink:0;padding:0;background:transparent;border:1px solid var(--border-light);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s,border-color .2s}.paint-layer-btn:hover:not(:disabled){background-color:var(--hover-bg);color:var(--text-color);border-color:var(--accent-color)}.paint-layer-btn:disabled{opacity:.35;cursor:default}.paint-layer-btn--sm{width:24px;height:24px;border:none}.paint-layer-btn--sm:hover:not(:disabled){border:none}.paint-layer-btn--fused-end{border-top-left-radius:0;border-bottom-left-radius:0}.paint-row{background:transparent;transition:background-color .15s ease-in-out}.paint-row:hover{background-color:var(--hover-bg)}.paint-fused-field{border:1px solid var(--border-color);transition:border-color .15s ease-in-out}.paint-fused-field:focus-within,.paint-fused-field:has([aria-expanded=true]){border-color:var(--accent-color)}.paint-add-btn{height:24px;padding:0 var(--space-2);background:transparent;border:1px solid var(--border-light);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-main);display:flex;align-items:center;gap:var(--space-1);transition:background-color .2s,color .2s,border-color .2s}.paint-add-btn:hover{background-color:var(--hover-bg);color:var(--text-color);border-color:var(--accent-color)}.paint-add-btn--sq{width:24px;padding:0;justify-content:center;gap:0;border:none}.paint-add-btn--sq:hover{border:none}.paint-add-btn.active{background-color:var(--hover-bg);color:var(--text-color)}.main-area{display:flex;flex:1;min-width:0;overflow:hidden}.workspace-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.workspace-top-row{display:flex;height:20px;background-color:var(--panel-bg);border-bottom:1px solid var(--border-color)}.css-ruler-corner{box-sizing:border-box;position:absolute;top:0;left:0;width:20px;height:20px;background-color:var(--panel-bg);border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);z-index:var(--z-ruler-corner)}.css-ruler-top{box-sizing:border-box;position:absolute;top:0;left:20px;right:0;height:20px;background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);z-index:var(--z-ruler);overflow:hidden;background-image:repeating-linear-gradient(to right,var(--ruler-line),var(--ruler-line) 1px,transparent 1px,transparent var(--tick-spacing, 100px));background-size:var(--tick-spacing, 100px) 6px;background-position:var(--origin-offset, 0px) bottom;background-repeat:repeat-x}.css-ruler-left{box-sizing:border-box;position:absolute;top:20px;left:0;width:20px;bottom:0;background-color:var(--panel-bg);border-right:1px solid var(--border-color);z-index:var(--z-ruler-left);overflow:hidden;background-image:repeating-linear-gradient(to bottom,var(--ruler-line),var(--ruler-line) 1px,transparent 1px,transparent var(--tick-spacing, 100px));background-size:6px var(--tick-spacing, 100px);background-position:right var(--origin-offset, 0px);background-repeat:repeat-y}.canvas-container{flex:1;min-width:0;background-color:var(--workspace-bg);overflow:hidden;position:relative;touch-action:none}.canvas-container.panning,.canvas-container.panning *{cursor:grabbing!important}.canvas-container.can-pan,.canvas-container.can-pan *{cursor:grab!important}.canvas-container.gesturing *{cursor:inherit!important}.canvas-container.hide-scrollbars{-ms-overflow-style:none;scrollbar-width:none}.canvas-container.hide-scrollbars::-webkit-scrollbar{display:none}.styled-scrollbars::-webkit-scrollbar{width:12px;height:12px}.styled-scrollbars::-webkit-scrollbar-track{background:var(--scrollbar-track)}.styled-scrollbars::-webkit-scrollbar-thumb{background:var(--active-bg);border-radius:var(--radius-full);border:2px solid transparent;background-clip:padding-box}.styled-scrollbars::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box}.styled-scrollbars::-webkit-scrollbar-corner{background:transparent}.canvas-wrapper{width:4000px;height:4000px;position:relative}.canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--artboard-bg);overflow:visible}.properties-panel{width:296px;flex-shrink:0;background-color:var(--panel-bg);border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.timeline-resizer{height:4px;background-color:var(--border-color);cursor:row-resize;transition:background-color .2s;z-index:var(--z-timeline-resizer)}.timeline-resizer:hover,.timeline-resizer.active{background-color:var(--accent-color)}.timeline-labels-resizer{width:4px;flex-shrink:0;cursor:col-resize;background-color:var(--border-color);transition:background-color .2s}.timeline-labels-resizer:hover,.timeline-labels-resizer.active{background-color:var(--accent-color)}.timeline-container{height:280px;background-color:var(--panel-bg);display:flex;flex-direction:column}.timeline-header{padding:var(--space-3);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:var(--space-4)}.status-bar{height:28px;padding:0 var(--space-3);border-top:1px solid var(--border-color);background:var(--panel-bg);display:flex;align-items:center;gap:var(--space-4);flex-shrink:0;overflow-x:auto;white-space:nowrap}.status-hints{display:flex;align-items:center;gap:var(--space-4)}.status-hint{display:flex;align-items:center;gap:var(--space-2);font-size:11px;color:var(--text-muted)}.status-hint.is-disabled{opacity:.4}.status-kbd-group{display:inline-flex;align-items:center;gap:var(--space-1)}.status-kbd-sep{color:var(--text-dim);font-size:10px}.status-kbd{display:inline-flex;align-items:center;font-family:JetBrains Mono,monospace;font-size:10px;padding:var(--space-1) var(--space-1);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--kbd-bg);color:var(--text-color);line-height:1.4}button.btn-primary{background-color:var(--accent-color);color:var(--ui-white);border:none;border-radius:var(--radius-sm);height:32px;padding:0 var(--space-3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-main);font-family:inherit;transition:background-color .2s}button.btn-primary:hover{background-color:var(--accent-hover)}.btn-split{display:flex;align-items:stretch;height:32px}.toolbar .btn-split button{background-color:var(--accent-color);color:var(--ui-white);border:none;border-radius:0;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-main);font-family:inherit;transition:background-color .2s}.toolbar .btn-split button:hover{background-color:var(--accent-hover)}.toolbar .btn-split .btn-split-main{padding:0 var(--space-3);border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.toolbar .btn-split .btn-split-caret{padding:0 var(--space-2);border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.btn-split-divider{width:1px;background-color:var(--panel-bg);flex-shrink:0}.btn-split-secondary{border-radius:var(--radius-sm)}.toolbar .btn-split-secondary button{background-color:transparent;color:var(--text-color);border-radius:0}.toolbar .btn-split-secondary:hover button{background-color:var(--hover-bg)}.btn-split-secondary .btn-split-divider{background-color:transparent}.toolbar .btn-split-secondary:hover .btn-split-divider{background-color:var(--panel-bg)}.toolbar-menu-row:hover{background-color:var(--hover-bg)!important}button.btn-secondary{background-color:transparent;color:var(--text-color);border:1px solid var(--border-light);border-radius:4px;height:32px;padding:0 var(--space-3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-main);font-family:inherit;transition:all .2s}button.btn-secondary:hover{background-color:var(--hover-bg);border-color:var(--border-strong)}.toolbar button.btn-secondary,.toolbar button.btn-secondary:hover,.toolbar button.btn-secondary.playing-pulse,.toolbar button.btn-secondary.playing-pulse:hover{border-color:transparent}.toolbar button.btn-secondary.active{color:var(--accent-color);background-color:var(--accent-soft)}.toolbar button.btn-secondary.active:hover{background-color:#00a2ff33}.timeline-header button.btn-secondary,.timeline-header button.btn-secondary:hover,.timeline-header button.btn-secondary.playing-pulse,.timeline-header button.btn-secondary.playing-pulse:hover,.timeline-header button.btn-secondary.active,.timeline-header button.btn-secondary.active:hover{border-color:transparent}.timeline-header button.btn-secondary.active{color:var(--auto-keyframe-color);background-color:var(--danger-soft)}.timeline-header button.btn-secondary.active:hover{background-color:#ff4d4d33}.timeline-header button.btn-secondary.loop-toggle.active{color:var(--accent-color);background-color:var(--accent-soft)}.timeline-header button.btn-secondary.loop-toggle.active:hover{background-color:#00a2ff33}button.btn-secondary.playing-pulse{color:var(--accent-color);border-color:var(--accent-color);background-color:var(--accent-soft)}button.btn-secondary.playing-pulse:hover{border-color:var(--accent-color)}@media (prefers-reduced-motion: no-preference){button.btn-secondary.playing-pulse{animation:playPulse 1.4s ease-in-out infinite}}@keyframes playPulse{0%,to{background-color:var(--accent-soft)}50%{background-color:#00a2ff33}}.timeline-track-area{flex:1;position:relative;overflow-y:auto;overflow-x:hidden;display:flex;align-items:stretch}.timeline-labels{width:220px;flex-shrink:0}.timeline-label{padding:0 var(--space-3);height:32px;display:flex;align-items:center;font-size:var(--fs-main);border-bottom:1px solid var(--border-color);transition:background-color .1s}.timeline-label:hover{background-color:var(--hover-bg)}.timeline-tracks{flex:1;position:relative;background-color:var(--track-bg);background-image:linear-gradient(to right,var(--track-line) 1px,transparent 1px);background-size:20px 100%;margin-right:var(--space-5)}.timeline-track{height:32px;border-bottom:1px solid var(--border-color);position:relative}.timeline-bar{position:absolute;top:50%;transform:translateY(-50%);height:22px;border-radius:var(--radius-sm);background-color:color-mix(in srgb,var(--accent-color) 30%,transparent);border:1px solid color-mix(in srgb,var(--accent-color) 55%,transparent);cursor:grab;z-index:1;box-sizing:border-box}.timeline-bar:active{cursor:grabbing}.timeline-bar-handle{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize}.timeline-bar-handle.left{left:-3px}.timeline-bar-handle.right{right:-3px}.timeline-ruler-row{height:22px;flex-shrink:0;display:flex;border-bottom:1px solid var(--border-color)}.timeline-ruler-spacer{flex-shrink:0}.timeline-ruler-divider{width:4px;flex-shrink:0;background-color:var(--border-color)}.timeline-ruler{flex:1;position:relative;margin-right:var(--space-5);background-color:var(--track-bg);cursor:pointer;overflow:hidden}.timeline-ruler-tick{position:absolute;bottom:0;width:1px;height:4px;background-color:var(--ruler-line);pointer-events:none}.timeline-ruler-tick-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:var(--fs-main);line-height:1;color:var(--text-muted);white-space:nowrap;pointer-events:none}.timeline-ruler-tick.at-start .timeline-ruler-tick-label{left:0;transform:none}.timeline-ruler-tick.at-end .timeline-ruler-tick-label{left:auto;right:1px;transform:none}.playhead{position:absolute;top:0;bottom:0;width:1px;background-color:var(--playhead-color);pointer-events:none;z-index:var(--z-playhead)}.playhead-head{position:absolute;top:0;bottom:0;width:1px;background-color:var(--playhead-color);pointer-events:none;z-index:3}.playhead-head:after{content:"";position:absolute;bottom:0;left:-4px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--playhead-color)}.timeline-marker-mount{position:absolute;top:0;bottom:0;width:0;pointer-events:none;z-index:2}.timeline-marker-line{position:absolute;top:0;bottom:0;width:1px;background-color:color-mix(in srgb,var(--accent-color) 45%,transparent);pointer-events:none}.timeline-marker-flag{position:absolute;top:3px;left:0;display:flex;align-items:center;gap:3px;max-width:120px;height:15px;padding:0 4px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background-color:var(--accent-color);color:#fff;font-size:10px;line-height:15px;white-space:nowrap;cursor:grab;pointer-events:auto;user-select:none}.timeline-marker-flag:active{cursor:grabbing}.timeline-marker-label{overflow:hidden;text-overflow:ellipsis}.timeline-marker-delete{display:none;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;font-size:12px;line-height:1;opacity:.85}.timeline-marker-flag:hover .timeline-marker-delete{display:inline}.timeline-marker-delete:hover{opacity:1}.timeline-marker-rename{position:absolute;top:3px;left:0;height:15px;width:96px;font-size:10px;padding:0 4px;border:1px solid var(--accent-color);border-radius:var(--radius-sm);background:var(--panel-bg);color:var(--text-color);pointer-events:auto;z-index:3}.timeline-trim-dim{position:absolute;top:0;bottom:0;pointer-events:none;z-index:2;background:#1a1a1a99}.timeline-trim-handle{position:absolute;top:0;bottom:0;width:0;pointer-events:none;z-index:2}.timeline-trim-line{position:absolute;top:0;bottom:0;left:0;width:1px;background-color:color-mix(in srgb,var(--text-color) 45%,transparent)}.timeline-trim-mount{position:absolute;top:0;bottom:0;width:0;pointer-events:none;z-index:2}.timeline-trim-grip{position:absolute;top:0;bottom:0;width:7px;background-color:color-mix(in srgb,var(--text-color) 32%,transparent);cursor:ew-resize;pointer-events:auto}.timeline-trim-mount.in .timeline-trim-grip{left:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}.timeline-trim-mount.out .timeline-trim-grip{right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.timeline-trim-grip:hover,.timeline-trim-mount.dragging .timeline-trim-grip,.timeline-trim-handle.dragging .timeline-trim-line{background-color:var(--accent-color)}.keyframe{position:absolute;width:8px;height:8px;background-color:var(--keyframe-fill);border-radius:1.5px;transform:translateY(-50%) rotate(45deg);top:50%;cursor:pointer}.keyframe.selected{box-shadow:0 0 0 2.5px var(--accent-color)}.keyframe.hold{transform:translateY(-50%) rotate(0);border-radius:0}.timeline-label.property{font-size:var(--fs-main);color:var(--text-muted)}.timeline-track.property{background-color:color-mix(in srgb,var(--track-bg) 88%,transparent)}.keyframe.summary{width:7px;height:7px;background-color:transparent;border:1.5px solid var(--keyframe-fill);opacity:.8;cursor:default}.cursor-crosshair{cursor:crosshair!important}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}