:root{--bg-main: #EBEBF0;--bg-card: #F3F3F6;--bg-input: #E8E8EE;--bg-button: #e8e8ee;--bg-button-hover: #D6D6E0;--bg-accent: #FCFCFD;--bg-warning: #fff1f2;--border-default: #e4e4e7;--border-subtle: #dfdfe7;--border-input-focus: #70707b;--text-primary: #000000;--text-secondary: #70707b;--text-muted: #a0a0ab;--text-inverse: #ffffff;--text-warning: #ef4444;--slider-track: #d4d4d8;--slider-thumb: #ffffff;--slider-track-active: #4F4F69;--shadow-inset: rgba(0, 0, 0, .05);--shadow-inset-dark: rgba(0, 0, 0, .15);--shadow-drop: rgba(0, 0, 0, .05);--shadow-white: rgba(255, 255, 255, .8);--shadow-input-1: rgba(255, 255, 255, .46);--shadow-input-2: rgba(0, 0, 0, .05);--preview-checker: #f4f4f5;--preview-bg: #ffffff;--layer-highlight: #E2E2E9;--toast-bg: #1c1c1e;--toast-border: #2c2c2e;--toast-text: #ffffff;--toast-text-muted: #a1a1a6;--toast-shadow: rgba(0, 0, 0, .3);--toast-success: #30d158;--toast-error: #ff453a;--toast-info: #0a84ff;--seg-indicator-bg: #FCFCFD;--seg-indicator-border: #FFF;--seg-indicator-shadow: 6px 27px 8px 0 rgba(108, 108, 147, 0), 4px 17px 7px 0 rgba(108, 108, 147, .01), 2px 10px 6px 0 rgba(108, 108, 147, .05), 1px 4px 4px 0 rgba(108, 108, 147, .09), 0 1px 2px 0 rgba(108, 108, 147, .1);--btn-inner-bg: #FCFCFD;--btn-inner-border: #FFF;--btn-inner-shadow: 6px 27px 8px 0 rgba(108, 108, 147, 0), 4px 17px 7px 0 rgba(108, 108, 147, .01), 2px 10px 6px 0 rgba(108, 108, 147, .05), 1px 4px 4px 0 rgba(108, 108, 147, .09), 0 1px 2px 0 rgba(108, 108, 147, .1);--input-bg: #E8E8EE;--input-shadow: 0 0 0 1px rgba(255, 255, 255, .46), 0 0 1px 1px rgba(0, 0, 0, .05) inset}[data-theme=dark]{--bg-main: #0E0E11;--bg-card: #151519;--bg-input: #101013;--bg-button: #101013;--bg-button-hover: #19191F;--bg-accent: #17171C;--bg-warning: #3f1f1f;--border-default: #21212B;--border-subtle: #0C0C0E;--border-input-focus: #a1a1aa;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-inverse: #18181b;--text-warning: #f87171;--slider-track: #2a2a35;--slider-thumb: #ffffff;--slider-track-active: #353550;--shadow-inset: rgba(0, 0, 0, .3);--shadow-inset-dark: rgba(0, 0, 0, .4);--shadow-drop: rgba(0, 0, 0, .3);--shadow-white: rgba(255, 255, 255, .1);--shadow-input-1: rgba(28, 28, 33, 1);--shadow-input-2: rgba(0, 0, 0, .15);--preview-checker: #3f3f46;--preview-bg: #27272a;--layer-highlight: #22222A;--toast-bg: #ffffff;--toast-border: #e5e5e5;--toast-text: #1c1c1e;--toast-text-muted: #6e6e73;--toast-shadow: rgba(0, 0, 0, .15);--toast-success: #34c759;--toast-error: #ff3b30;--toast-info: #007aff;--seg-indicator-bg: #17171C;--seg-indicator-border: #23232A;--seg-indicator-shadow: 0 3px 4px 0 #1C1C21 inset, 6px 27px 8px 0 rgba(108, 108, 147, 0), 4px 17px 7px 0 rgba(108, 108, 147, .01);--btn-inner-bg: #17171C;--btn-inner-border: #23232A;--btn-inner-shadow: 0 3px 4px 0 #1C1C21 inset, 6px 27px 8px 0 rgba(108, 108, 147, 0), 4px 17px 7px 0 rgba(108, 108, 147, .01);--input-bg: #101013;--input-shadow: 0 0 0 1px #1C1C21, 0 0 1px 1px rgba(0, 0, 0, .15) inset, 0 1px 4px -1px rgba(0, 0, 0, .15) inset}.app-shell{height:100vh;max-height:100vh;background-color:var(--bg-main);display:flex;flex-direction:column;font-family:Inter,sans-serif;overflow:hidden}.app-main{flex:1;padding:12px;overflow:hidden;display:flex;gap:12px;min-height:0}.header{height:59px;padding:12px;display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-card);border-bottom:1px solid var(--border-default)}.header-logo{display:flex;align-items:center;gap:7px}.header-logo-image{width:35px;height:35px;border-radius:8px;overflow:hidden;flex-shrink:0}.header-logo-image img{width:100%;height:100%;object-fit:cover}.header-logo-text{display:flex;flex-direction:column}.header-title{font-size:14px;font-weight:400;color:var(--text-primary);line-height:normal;white-space:nowrap}.header-subtitle{font-size:11px;font-weight:400;color:var(--text-secondary);line-height:normal}.header-actions{display:flex;align-items:center;gap:7px}.header-btn-icon{width:37px;height:29px;overflow:hidden;padding:2px;background-color:var(--bg-button);border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}.header-btn-icon:hover{background-color:var(--bg-button-hover)}.header-btn-icon-inner{width:33px;height:25px;overflow:hidden;background-color:var(--btn-inner-bg);border:1px solid var(--btn-inner-border);border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:var(--btn-inner-shadow)}.header-btn-icon-inner svg{width:13px;height:13px;color:var(--text-primary)}.header-btn-export{height:31px;padding:2px;background-color:var(--bg-button);border-radius:8px;border:none;overflow:hidden;cursor:pointer;display:flex;align-items:center;transition:background-color .15s ease}.header-btn-export:hover{background-color:var(--bg-button-hover)}.header-btn-export-inner{height:27px;padding:6px 10px;background-color:var(--btn-inner-bg);border:1px solid var(--btn-inner-border);border-radius:6px;display:flex;align-items:center;gap:10px;box-shadow:var(--btn-inner-shadow)}.header-btn-export-inner svg{width:13px;height:13px;color:var(--text-primary)}.header-btn-export-text{font-size:12px;font-weight:400;color:var(--text-primary)}.sidebar{width:300px;height:100%;background-color:var(--bg-card);border-radius:12px;border:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.sidebar-header{padding:16px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white)}.sidebar-header-title{font-size:14px;font-weight:500;color:var(--text-primary)}.sidebar-content{flex:1;overflow-y:auto}.section{border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white)}.section-header{width:100%;padding:16px;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;transition:background-color .15s ease}.section-header:hover{background-color:var(--bg-input)}.section-title{font-size:14px;font-weight:500;color:var(--text-primary)}.section-chevron{width:16px;height:16px;color:var(--text-secondary);transition:transform .2s ease}.section-content{padding:0 16px 16px;display:flex;flex-direction:column;gap:16px}.upload-button{width:100%;height:34px;padding:2px;background-color:var(--bg-button);border-radius:8px;border:none;cursor:pointer;transition:background-color .15s ease}.upload-button:hover{background-color:var(--bg-button-hover)}.upload-button-inner{width:100%;height:100%;background-color:var(--bg-accent);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 1px 2px 0 var(--shadow-drop),0 1px 0 0 var(--shadow-white) inset}.upload-button-inner svg{width:14px;height:14px;color:var(--text-primary)}.upload-button-text{font-size:12px;font-weight:400;color:var(--text-primary)}.control-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.control-label{font-size:12px;font-weight:400;color:var(--text-secondary);flex-shrink:0}.segmented-control{display:flex;padding:2px;background-color:var(--bg-button);border-radius:10px;position:relative;width:100%;box-shadow:inset 0 0 1px 1px var(--shadow-inset),inset 0 1px 4px -1px var(--shadow-inset-dark)}.segmented-indicator{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--option-count, 2));transform:translate(calc(var(--selected-index, 0) * 100%));background-color:var(--seg-indicator-bg);border:1px solid var(--seg-indicator-border);border-radius:8px;box-shadow:var(--seg-indicator-shadow);z-index:0;transition:transform .2s cubic-bezier(.23,1,.32,1);will-change:transform}.segmented-option{flex:1;padding:6px 12px;font-size:12px;font-weight:400;color:var(--text-secondary);background:transparent;border:none;border-radius:8px;cursor:pointer;text-align:center;transition:color .15s ease;position:relative;z-index:1;-webkit-user-select:none;user-select:none}@media(hover:hover)and (pointer:fine){.segmented-option:hover:not(.selected){color:var(--text-primary)}}.segmented-option:focus-visible{outline:2px solid var(--bg-accent);outline-offset:2px}.segmented-option.selected{color:var(--text-primary);font-weight:500}.segmented-option:active{transform:scale(.98)}.segmented-control.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.segmented-indicator{transition-duration:.01ms!important}}.select-container{position:relative;flex:1}.select-input{width:100%;height:29px;padding:0 30px 0 10px;font-size:12px;font-weight:400;color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:6px;box-shadow:inset 0 0 1px 1px var(--shadow-inset),inset 0 1px 4px -1px var(--shadow-inset-dark);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.select-input:focus{outline:none;border-color:var(--border-input-focus)}.select-container:after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--text-secondary);pointer-events:none}.preview-panel{flex:1;height:100%;background-color:var(--bg-card);border-radius:12px;border:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden}.preview-header{padding:16px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white);display:inline-flex;height:54px;margin-bottom:2px;align-items:center;justify-content:space-between}.preview-header-title{font-size:14px;font-weight:500;color:var(--text-primary)}.preview-bg-options{display:flex;align-items:center;gap:4px}.preview-bg-btn{width:28px;height:28px;padding:0;background-color:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s ease}.preview-bg-btn:hover{background-color:var(--bg-input);color:var(--text-primary)}.preview-bg-btn.active{background-color:var(--bg-button);border-color:var(--border-default);color:var(--text-primary)}.preview-bg-solid-indicator{width:14px;height:14px;border-radius:4px}.preview-bg-color-indicator{width:14px;height:14px;border-radius:4px;border:1px solid var(--border-default)}.preview-bg-color-container{position:relative}.preview-color-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.preview-color-dropdown{position:absolute;top:100%;right:0;margin-top:8px;padding:8px;background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 12px var(--shadow-drop);z-index:100;display:flex;align-items:center;gap:8px}.preview-color-picker{width:32px;height:32px;padding:0;border:1px solid var(--border-default);border-radius:4px;cursor:pointer;background:none}.preview-color-picker::-webkit-color-swatch-wrapper{padding:0}.preview-color-picker::-webkit-color-swatch{border:none;border-radius:3px}.preview-color-text{width:80px;height:32px;padding:0 8px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:6px}.preview-color-text:focus{outline:none;border-color:var(--border-input-focus)}.preview-canvas{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;background-color:var(--bg-card);transition:background-color .2s ease}.preview-canvas-dotted{background-image:radial-gradient(circle,var(--text-muted) 1px,transparent 1px);background-size:20px 20px}.preview-svg{max-width:100%;max-height:100%}.timeline-container{padding:16px 20px;display:flex;flex-direction:column;gap:12px}.timeline-progress-bar{position:relative;width:100%;height:24px;display:flex;align-items:center}.timeline-progress-track{position:absolute;left:0;right:0;height:6px;background:var(--bg-input);border-radius:3px;pointer-events:none}.timeline-progress-fill{position:absolute;left:0;height:6px;background-color:var(--slider-thumb);border-radius:3px;pointer-events:none;z-index:1}.timeline-progress-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:2;width:100%;height:24px;background:transparent;cursor:pointer;margin:0;padding:0}.timeline-progress-input::-webkit-slider-runnable-track{width:100%;height:6px;background:transparent;border-radius:3px;border:none}.timeline-progress-input::-moz-range-track{width:100%;height:6px;background:transparent;border-radius:3px;border:none}.timeline-progress-input::-moz-range-progress{height:6px;background-color:var(--slider-thumb);border-radius:3px}.timeline-progress-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--slider-thumb);border-radius:50%;border:2px solid var(--bg-card);box-shadow:0 1px 3px #0000004d;cursor:grab;margin-top:-4px;transition:transform .1s ease,box-shadow .1s ease}.timeline-progress-input::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 6px #0000004d}.timeline-progress-input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.timeline-progress-input::-moz-range-thumb{width:14px;height:14px;background:var(--slider-thumb);border-radius:50%;border:2px solid var(--bg-card);box-shadow:0 1px 3px #0000004d;cursor:grab;transition:transform .1s ease,box-shadow .1s ease}.timeline-progress-input::-moz-range-thumb:hover{transform:scale(1.15)}.timeline-progress-input:focus{outline:none}.timeline-progress-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #3b3b464d}.timeline-controls-row{display:flex;align-items:center;gap:12px}.timeline-play-btn{width:32px;height:32px;background-color:var(--bg-button-hover);border:none;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,transform .1s ease;flex-shrink:0}.timeline-play-btn:hover{background-color:var(--bg-button)}.timeline-play-btn:active{transform:scale(.95)}.timeline-play-btn svg{color:var(--text-primary)}.timeline-timecode{font-size:13px;font-family:Inter,sans-serif;font-weight:400;color:var(--text-secondary);letter-spacing:-.01em}.timeline-speed-selector{display:flex;align-items:center;gap:2px;margin-left:auto;background-color:var(--bg-input);border-radius:6px;padding:2px}.timeline-speed-btn{padding:4px 8px;font-size:11px;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.timeline-speed-btn:hover{color:var(--text-secondary);background-color:var(--bg-button)}.timeline-speed-btn.active{color:var(--text-primary);background-color:var(--bg-accent);box-shadow:0 1px 2px #0000001a}.controls-section-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;margin-bottom:8px;background:transparent;border:none;cursor:pointer;color:var(--text-primary)}.controls-section-header:hover{opacity:.8}.section-chevron{color:var(--text-secondary);transition:transform .2s ease}.section-chevron.open{transform:rotate(180deg)}.layers-list{display:flex;flex-direction:column;gap:4px}.layer-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.layer-item:hover{background-color:var(--bg-input)}.layer-item.hovered{background-color:var(--layer-highlight)}.layer-icon{width:14px;height:14px;color:var(--text-secondary)}.layer-name{flex:1;font-size:12px;font-weight:400;color:var(--text-primary)}.layer-visibility{width:16px;height:16px;border:1px solid var(--border-default);border-radius:4px;cursor:pointer;background-color:var(--bg-input)}.layer-visibility.visible{background-color:var(--slider-thumb);border-color:var(--slider-thumb)}.layer-drag-handle{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--text-muted);cursor:grab;opacity:.5;transition:opacity .15s ease,color .15s ease}.layer-item:hover .layer-drag-handle{opacity:1;color:var(--text-secondary)}.layer-item.dragging{opacity:.5;background-color:var(--bg-input)}.layer-item.drag-over{background-color:var(--layer-highlight);border:1px dashed var(--border-input-focus);margin-top:-1px;margin-bottom:-1px}.text-input{width:100%;padding:10px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:6px;resize:vertical;min-height:80px}.text-input:focus{outline:none;border-color:var(--border-input-focus)}.text-input::placeholder{color:var(--text-muted)}.export-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.export-menu{position:absolute;top:100%;right:0;margin-top:8px;width:240px;background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:12px;box-shadow:0 8px 24px #00000026;z-index:100;overflow:hidden;padding:4px}.export-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13px;font-weight:400;color:var(--text-primary);background:none;border:none;text-align:left;cursor:pointer;border-radius:8px;transition:background-color .15s ease}.export-menu-item:hover{background-color:var(--bg-input)}.export-menu-icon{color:var(--text-secondary);flex-shrink:0}.export-menu-content{display:flex;flex-direction:column;flex:1;gap:2px}.export-menu-label{font-size:13px;font-weight:500;color:var(--text-primary)}.export-menu-desc{font-size:11px;color:var(--text-muted)}.export-menu-shortcut{font-size:11px;color:var(--text-muted);background-color:var(--bg-button);padding:2px 6px;border-radius:4px}.export-menu-divider{height:1px;background-color:var(--border-subtle);margin:4px 0}.custom-dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;width:100%;background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:12px;box-shadow:0 8px 24px #00000026;z-index:100;overflow:hidden;padding:4px;animation:fadeIn .15s ease-out}.custom-dropdown-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;font-size:13px;font-weight:400;color:var(--text-secondary);background:none;border:none;text-align:left;cursor:pointer;border-radius:8px;transition:all .15s ease}.custom-dropdown-option:hover{background-color:var(--bg-input);color:var(--text-primary)}.custom-dropdown-option.active{color:var(--text-primary);background-color:var(--bg-input);font-weight:500}.speed-dropdown-menu{position:absolute;bottom:100%;left:0;margin-bottom:8px;margin-top:0;width:120px;background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:12px;box-shadow:0 8px 24px #00000026;z-index:100;overflow:hidden;padding:4px;animation:slideUp .15s ease-out}.custom-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;margin-left:auto;height:36px;padding:0 12px;background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:8px;font-size:12px;color:var(--text-primary);cursor:pointer;transition:all .15s ease}.custom-dropdown-trigger:hover{border-color:var(--border-input-focus)}.custom-dropdown-trigger:focus{outline:none;border-color:var(--border-input-focus);box-shadow:0 0 0 2px #6366f11a}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.speed-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;font-size:13px;font-weight:400;color:var(--text-secondary);background:none;border:none;text-align:left;cursor:pointer;border-radius:8px;transition:all .15s ease}.speed-option:hover{background-color:var(--bg-input);color:var(--text-primary)}.speed-option.active{color:var(--text-primary);background-color:var(--bg-input);font-weight:500}.timeline-speed-container{position:relative;display:flex;align-items:center}.timeline-speed-trigger{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s ease;min-width:60px;justify-content:space-between}.timeline-speed-trigger:hover{background-color:var(--bg-button);color:var(--text-primary)}.timeline-loop-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:all .15s ease;margin-left:8px}.timeline-loop-btn:hover{background-color:var(--bg-button);color:var(--text-primary)}.timeline-loop-btn.active{color:#3b82f6;background-color:#3b82f61a}.timeline-controls-right{display:flex;align-items:center;margin-left:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes transformPath{0%{transform:translate(0) scale(1) rotate(0);opacity:1}to{transform:translate(var(--tx, 0),var(--ty, 0)) scale(var(--ts, 1)) rotate(var(--tr, 0deg));opacity:var(--to, 1)}}.animate-slideDown{animation:slideDown .15s ease-out}.add-svg-panel{width:300px;height:100%;background-color:var(--bg-card);border-radius:12px;border:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.add-svg-header{display:flex;align-items:center;justify-content:space-between;padding:16px;height:54px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white)}.add-svg-header-title{font-size:14px;font-weight:500;color:var(--text-primary)}.add-svg-content{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}.add-svg-code-section{display:flex;flex-direction:column;gap:8px}.add-svg-code-label{font-size:12px;font-weight:400;color:var(--text-secondary)}.add-svg-code-textarea{width:100%;min-height:100px;padding:10px;font-size:11px;font-family:JetBrains Mono,monospace;color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:8px;resize:vertical}.add-svg-code-textarea:focus{outline:none;border-color:var(--border-input-focus)}.add-svg-code-textarea::placeholder{color:var(--text-muted)}.add-svg-warnings{display:flex;align-items:flex-start;gap:8px;padding:8px;background-color:var(--bg-warning);border-radius:6px}.add-svg-warnings-text{font-size:11px;color:var(--text-warning)}.add-svg-warnings-text p{margin:0}.controls-panel{width:300px;height:100%;background-color:var(--bg-card);border-radius:12px;border:1px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.controls-header{display:flex;align-items:center;justify-content:space-between;padding:16px;height:54px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white)}.controls-header-title{font-size:14px;font-weight:500;color:var(--text-primary)}.controls-tabs-container{padding:12px 16px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white)}.controls-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;display:flex;flex-direction:column;gap:0;position:relative}.controls-section{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white);display:flex;flex-direction:column;gap:12px}.controls-section:last-child{border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white);margin-bottom:2px}.controls-section-title{font-size:12px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.controls-field{display:flex;align-items:center;justify-content:space-between;gap:8px}.controls-field-label{font-size:12px;font-weight:400;color:var(--text-secondary);flex-shrink:0;min-width:70px}.controls-field-input-group{display:flex;align-items:center;gap:8px;flex:1}.controls-field-input{display:inline-flex;width:50%;height:29px;padding:0 8px;font-size:12px;font-family:Inter,sans-serif;color:var(--text-primary);background-color:var(--input-bg);box-shadow:var(--input-shadow);border:none;border-radius:8px;text-align:left}.controls-field-input:focus{outline:none;box-shadow:0 0 0 2px var(--shadow-white),0 0 0 2px var(--shadow-input-2) inset;border:1px var(--border-input-focus)!important}.controls-field-input-short{width:100%;flex:1}.controls-edit-btn{padding:6px 12px;font-size:12px;font-weight:500;color:var(--text-secondary);background-color:var(--bg-button);border:1px solid var(--border-default);border-radius:6px;cursor:pointer;transition:all .15s ease;flex-shrink:0}.controls-edit-btn:hover{color:var(--text-primary);background-color:var(--bg-button-hover);border-color:var(--border-input-focus)}.radix-slider-root{position:relative;display:flex;align-items:center;flex:1;width:50%;height:20px;-webkit-user-select:none;user-select:none;touch-action:none}.radix-slider-track{position:relative;flex-grow:1;height:6px;background-color:var(--slider-track);border-radius:3px}.radix-slider-range{position:absolute;height:100%;background-color:var(--slider-track-active);border-radius:3px}.radix-slider-thumb{display:block;width:14px;height:14px;background-color:var(--slider-thumb);border:1px solid var(--slider-track-active);border-radius:50%;box-shadow:0 1px 3px #0003;cursor:grab;transition:transform .1s ease,box-shadow .1s ease}.radix-slider-thumb:hover{transform:scale(1.1);box-shadow:0 2px 6px #00000040}.radix-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.radix-slider-thumb:focus{outline:none;box-shadow:0 0 0 3px #4f4f694d}.controls-toggle,.controls-toggle-wide{flex:1}.controls-color-input{display:flex;align-items:center;gap:8px;flex:1}.controls-color-picker{width:24px;height:24px;padding:0;border:1px solid var(--border-default);border-radius:4px;cursor:pointer;background:none}.controls-color-picker::-webkit-color-swatch-wrapper{padding:0}.controls-color-picker::-webkit-color-swatch{border:none;border-radius:3px}.controls-color-text{flex:1;height:29px;padding:0 8px;font-size:12px;font-family:Inter,sans-serif;color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:6px}.controls-color-text:focus{outline:none;border-color:var(--border-input-focus)}.controls-color-input-inline{display:flex;align-items:center;flex:1;height:36px;padding:4px;background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:8px}.controls-color-picker-inline{width:28px;height:28px;padding:0;border:none;border-radius:6px;cursor:pointer;background:none;flex-shrink:0}.controls-color-picker-inline::-webkit-color-swatch-wrapper{padding:0}.controls-color-picker-inline::-webkit-color-swatch{border:none;border-radius:6px}.controls-color-text-inline{flex:1;height:100%;padding:0 8px;font-size:12px;font-family:Inter,sans-serif;color:var(--text-primary);background:transparent;border:none}.controls-color-text-inline:focus{outline:none}.controls-empty-message{font-size:12px;color:var(--text-secondary);text-align:center;padding:24px 0}.toast-container{position:fixed;bottom:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}.toast{display:flex;align-items:center;gap:8px;padding:12px 16px;background-color:var(--toast-bg);border:1px solid var(--toast-border);border-radius:10px;box-shadow:0 4px 12px var(--toast-shadow);pointer-events:auto;min-width:200px;max-width:400px}.toast-content{display:flex;align-items:center;gap:8px;flex:1}.toast-message{font-size:13px;font-weight:500;color:var(--toast-text)}.toast-close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:none;border:none;color:var(--toast-text-muted);cursor:pointer;border-radius:4px;transition:background-color .15s ease,color .15s ease}.toast-close:hover{background-color:#80808033;color:var(--toast-text)}.toast-success .toast-content svg{color:var(--toast-success)}.toast-error .toast-content svg{color:var(--toast-error)}.toast-info .toast-content svg{color:var(--toast-info)}.toast-enter{animation:toastEnter .2s cubic-bezier(.23,1,.32,1) forwards}.toast-exit{animation:toastExit .2s cubic-bezier(.23,1,.32,1) forwards}@keyframes toastEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes toastExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(16px)}}.help-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:fadeIn .15s ease}.help-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;max-width:90vw;max-height:80vh;background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:16px;box-shadow:0 24px 48px #0003;z-index:1000;display:flex;flex-direction:column;overflow:hidden;animation:modalOpen .2s cubic-bezier(.34,1.56,.64,1)}.help-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}.help-modal-title{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.help-modal-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}.help-modal-close:hover{background-color:var(--bg-input);color:var(--text-primary)}.help-modal-tabs{padding:12px 20px;border-bottom:1px solid var(--border-subtle)}.help-modal-content{flex:1;overflow-y:auto;padding:16px 20px}.shortcuts-content{display:flex;flex-direction:column;gap:20px}.shortcut-section{display:flex;flex-direction:column;gap:8px}.shortcut-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 4px}.shortcut-list{display:flex;flex-direction:column;gap:6px}.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}.shortcut-keys{display:flex;align-items:center;gap:4px}.shortcut-key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;font-size:11px;font-weight:500;font-family:Inter,sans-serif;color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:6px;box-shadow:0 1px 0 var(--border-default)}.shortcut-separator{font-size:12px;color:var(--text-muted);margin:0 2px}.shortcut-description{font-size:13px;color:var(--text-secondary)}.cheatsheet-content{display:flex;flex-direction:column;gap:16px}.cheatsheet-section{display:flex;flex-direction:column;gap:6px}.cheatsheet-section-title{font-size:13px;font-weight:600;color:var(--text-primary);margin:0}.cheatsheet-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}.cheatsheet-list li{font-size:12px;color:var(--text-secondary);line-height:1.5}.cheatsheet-list li strong{color:var(--text-primary);font-weight:500}.cheatsheet-list li code{font-family:JetBrains Mono,monospace;font-size:11px;background-color:var(--bg-input);padding:2px 6px;border-radius:4px}@keyframes modalOpen{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.add-svg-section{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border-subtle);box-shadow:0 1px 0 0 var(--shadow-white)}.add-svg-section:last-of-type{border-bottom:none;box-shadow:none;padding-bottom:0}.add-svg-section-title{font-size:12px;font-weight:500;color:var(--text-primary)}.example-icons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.example-icon-btn{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.example-icon-btn:hover{background-color:var(--bg-button-hover);border-color:var(--border-input-focus);color:var(--text-primary);transform:scale(1.02)}.example-icon-btn:active{transform:scale(.98)}.preview-bg-divider{width:1px;height:16px;background-color:var(--border-subtle);margin:0 4px}.preview-bg-swatch{width:14px;height:14px;border-radius:4px;transition:transform .1s ease}.preview-bg-btn:hover .preview-bg-swatch{transform:scale(1.1)}.preview-bg-swatch-white{background-color:#fff;border:1px solid var(--border-default);box-shadow:inset 0 0 0 1px #0000000d}.preview-bg-swatch-black{background-color:#000;border:1px solid rgba(255,255,255,.1)}.preview-bg-segmented{position:relative;display:flex;align-items:center;padding:2px;background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:8px;box-shadow:inset 0 0 1px 1px var(--shadow-inset)}.preview-bg-indicator{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--option-count, 4));transform:translate(calc(var(--selected-index, 0) * 100%));background-color:var(--seg-indicator-bg);border:1px solid var(--seg-indicator-border);border-radius:6px;box-shadow:var(--seg-indicator-shadow);z-index:0;transition:transform .2s cubic-bezier(.23,1,.32,1);will-change:transform}.preview-bg-option{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:24px;background:none;border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:color .15s ease}.preview-bg-option:hover,.preview-bg-option.active{color:var(--text-primary)}.header-mobile-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.header-mobile-toggle:hover{background-color:var(--bg-button-hover);color:var(--text-primary)}.panel-close-btn{display:none;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.panel-close-btn:hover{background-color:var(--bg-button-hover);color:var(--text-primary)}.panel-backdrop{display:none}@media(max-width:1024px){.header-mobile-toggle,.panel-close-btn{display:flex}.panel-backdrop{display:block;position:fixed;right:0;bottom:0;left:0;top:59px;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;animation:fadeIn .2s ease}.header-logo-text{display:none}.add-svg-panel{position:fixed;left:0;top:59px;bottom:0;width:280px;z-index:100;transform:translate(-100%);transition:transform .3s cubic-bezier(.23,1,.32,1);border-radius:0;border-right:1px solid var(--border-default)}.add-svg-panel.panel-open{transform:translate(0)}.controls-panel{position:fixed;right:0;top:59px;bottom:0;width:300px;z-index:100;transform:translate(100%);transition:transform .3s cubic-bezier(.23,1,.32,1);border-radius:0;border-left:1px solid var(--border-default)}.controls-panel.panel-open{transform:translate(0)}.preview-panel{flex:1}}@media(max-width:768px){.header{padding:8px 12px}.header-btn-icon{width:34px;height:34px}.header-btn-icon-inner{width:28px;height:28px}.header-btn-select{display:none}.add-svg-panel{width:85vw;max-width:320px}.controls-panel{width:85vw;max-width:340px}.app-main{padding:8px;gap:8px}.preview-header{padding:8px 12px}.preview-bg-segmented{padding:2px}.preview-bg-option{width:24px;height:22px}.timeline-container{padding:8px 12px}.playback-buttons{gap:6px}.playback-btn{width:28px;height:28px}}.easing-editor{background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000001a;width:240px}.easing-editor-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)}.easing-editor-title{font-size:13px;font-weight:500;color:var(--text-primary)}.easing-editor-close{width:24px;height:24px;background:transparent;border:none;border-radius:4px;color:var(--text-secondary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.easing-editor-close:hover{background-color:var(--bg-button-hover);color:var(--text-primary)}.easing-editor-content{padding:16px;display:flex;flex-direction:column;gap:12px}.easing-editor-canvas-container{position:relative;width:200px;height:200px;margin:0 auto}.easing-editor-canvas{display:block;background-color:var(--bg-input);border-radius:8px;cursor:crosshair}.easing-editor-ball{position:absolute;width:12px;height:12px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #3b82f666;pointer-events:none}.easing-editor-value{text-align:center}.easing-editor-value code{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-secondary);background-color:var(--bg-input);padding:6px 12px;border-radius:6px;display:inline-block}.easing-editor-presets{display:flex;flex-wrap:wrap;gap:6px}.easing-editor-preset-btn{padding:6px 10px;font-size:11px;font-weight:500;color:var(--text-secondary);background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:6px;cursor:pointer;transition:all .15s ease}.easing-editor-preset-btn:hover{color:var(--text-primary);background-color:var(--bg-button-hover);border-color:var(--border-input-focus)}.controls-field-with-popover{position:relative}.easing-editor-popover{position:absolute;top:100%;left:0;right:0;margin-top:8px;z-index:100;animation:slideDown .15s cubic-bezier(.23,1,.32,1)}.easing-editor-popover .easing-editor{width:100%;box-shadow:0 8px 32px #0003,0 2px 8px #0000001a}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.layers-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}.layer-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:8px;cursor:default;transition:all .15s ease;-webkit-user-select:none;user-select:none}.layer-item:hover,.layer-item.hovered{background-color:var(--layer-highlight);border-color:var(--border-input-focus)}.layer-item.dragging{opacity:.5;background-color:var(--bg-button)}.layer-item.drag-over{border-top:2px solid var(--text-primary)}.layer-drag-handle{display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:grab;padding:4px;border-radius:4px;margin-left:-4px}.layer-drag-handle:hover{color:var(--text-secondary);background-color:#0000000d}.layer-drag-handle:active{cursor:grabbing}.layer-icon{color:var(--text-secondary);flex-shrink:0}.layer-name{flex:1;font-size:12px;color:var(--text-primary);font-weight:400}.layer-visibility-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.layer-visibility-btn:hover{background-color:#0000000d;color:var(--text-primary)}.layer-visibility-btn.hidden-layer{color:var(--text-muted);opacity:.5}.controls-empty-message{font-size:12px;color:var(--text-muted);text-align:center;padding:24px 0;background-color:var(--bg-input);border:1px dashed var(--border-default);border-radius:8px}.empty-state-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--text-secondary);background-color:var(--bg-input);border-radius:12px;border:1px dashed var(--border-default)}.empty-state-message p{margin:0}