.export-dialog{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--main-opposite);border-radius:16px;padding:16px;width:307px;box-shadow:90px 90px 36px #0000,57px 57px 32px #00000003,32px 32px 27px #0000000d,14px 14px 20px #00000017,4px 4px 11px #0000001a}.export-dialog-close{position:absolute;top:16px;right:16px;width:24px;height:24px;padding:4px;background:var(--grey-10);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.export-dialog-close:hover{background:var(--grey-15)}.export-dialog-close svg{width:16px;height:16px;color:var(--main)}.export-toggle-group{display:flex;gap:2px;padding:2px;background:var(--grey-10);border-radius:8px}.export-toggle-option{flex:1;height:28px;padding:6px 12px;background:var(--grey-10);border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--main);cursor:pointer;transition:all .15s ease}.export-toggle-option:hover:not(.active){background:var(--grey-15)}.export-toggle-option.active{background:var(--main-opposite);box-shadow:14px 14px 6px #0000,9px 9px 5px #00000003,5px 5px 4px #00000008,2px 2px 3px #0000000d,1px 1px 2px #0000000f}.export-toggle-option:disabled,.export-toggle-option.disabled{opacity:.5;cursor:not-allowed}.export-toggle-option.disabled:hover{background:var(--grey-10)}.export-resolution-display{display:flex;align-items:center;justify-content:center;padding:6px;background:var(--grey-10);border-radius:6px;font-family:Inter,sans-serif;font-size:10px;line-height:14px;color:var(--main-50)}.export-section-label{font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--main);margin:0}.export-format-options{display:flex;gap:8px}.export-format-options button{flex:1}.export-progress-container{display:flex;flex-direction:column;gap:8px}.export-progress-bar{width:100%;height:32px;background:transparent;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative}.export-progress-fill{position:absolute;left:0;top:0;height:100%;background:var(--main);border-radius:7px;transition:width .2s ease}.export-progress-text{display:flex;align-items:center;justify-content:center;padding:6px;background:var(--grey-10);border-radius:6px;font-family:Inter,sans-serif;font-size:10px;line-height:14px;color:var(--main-50)}.export-modal-toggle-wrap{position:relative;display:flex;flex:1}.export-modal-toggle-wrap .export-toggle-option{width:100%}.export-modal-toggle-wrap[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--main);color:var(--main-opposite);font-family:Inter,sans-serif;font-size:11px;line-height:16px;white-space:nowrap;padding:4px 8px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:100}.export-modal-toggle-wrap[data-tooltip]:hover:after{opacity:1}@media(max-width:1023px){.export-modal-toggle-group{display:none}}.export-video-btn-wrap{position:relative;display:flex;flex:1}.export-video-btn-wrap .export-btn{flex:1;width:100%}.export-video-btn-wrap[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--main);color:var(--main-opposite);font-family:Inter,sans-serif;font-size:11px;line-height:16px;white-space:nowrap;padding:4px 8px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:100}.export-video-btn-wrap .export-toggle-option{width:100%}.export-video-btn-wrap[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--main);color:var(--main-opposite);font-family:Inter,sans-serif;font-size:11px;line-height:16px;white-space:nowrap;padding:4px 8px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:10}.export-video-btn-wrap[data-tooltip]:hover:after{opacity:1}.video-export-error{text-align:center;padding:8px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;margin-bottom:8px}.video-export-error span{color:#ef4444!important}*{margin:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}*:focus,*:focus-visible{outline:none}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Inter Variable,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;position:relative;width:100%;height:100%;overflow:hidden}body[data-framer-theme=light],:root[data-theme=light]{--background: #ffffff;--foreground: #171717;--line: #e9e9e9;--main: #000000;--main-opposite: #ffffff;--main-50: rgba(0, 0, 0, .5);--grey-25: #8c8c8c;--grey-10: #f7f7f7;--grey-15: #e7e7e7;--color-1: #a600ff;--color-1-sub: #f4e0ff;--color-2: #67c416;--color-2-sub: #efffe0;--color-3: #ff6600;--color-3-sub: #ffebe0;--color-4: #00a1ff;--color-4-sub: #e0fcff;--color-5: #ffb700;--color-5-sub: #fff7ac;--blured-bg: rgba(255, 255, 255, .9);--blur-amount: 40px;--blur-saturate: 1.3;--scroll-bg: #fcfcfc;--sidebar-bg: #ffffff;--sidebar-border: #e9e9e9;--canvas-bg: #f7f7f7;--canvas-pattern-1: #f0f0f0;--canvas-pattern-2: #e8e8e8;--control-bg: #ffffff;--control-border: #e9e9e9;--text-primary: #181818;--text-secondary: #777777;--text-muted: #999999;--accent: #6366f1;--accent-hover: #5558e3;--accent-active: #4547c4;--accent-glow: rgba(99, 102, 241, .2);--cp-color-surface: #ffffff;--cp-color-text-primary: #181818;--cp-color-white: #ffffff;--cp-color-white-soft: #fefefe;--cp-shadow-strong: rgba(0, 0, 0, .15);--cp-shadow-soft: rgba(0, 0, 0, .1);--cp-shadow-slider-thumb: rgba(0, 0, 0, .15);--cp-border-faint: rgba(0, 0, 0, .06);--cp-border-default: rgba(0, 0, 0, .1);--cp-border-hover: rgba(0, 0, 0, .2);--cp-border-subtle: rgba(0, 0, 0, .12);--cp-border-strong: rgba(0, 0, 0, .15);--cp-indicator-border: rgba(0, 0, 0, .2);--cp-indicator-fill: rgba(0, 0, 0, .05);--cp-indicator-inner-shadow: rgba(0, 0, 0, .1);--cp-caret-stroke: rgba(0, 0, 0, .65);--cp-status-bar-bg: #f7f7f7;--cp-drag-handle-bg: rgba(0, 0, 0, .1);--cp-drag-handle-bg-hover: rgba(0, 0, 0, .2);--cp-layer-default: rgba(255, 255, 255, .9);--cp-layer-strong: rgba(255, 255, 255, .95);--cp-menu-bg: rgba(255, 255, 255, .98);--cp-menu-shadow: rgba(0, 0, 0, .15);--cp-menu-option-bg: rgba(0, 0, 0, .05);--cp-menu-option-text: #181818;--cp-gradient-track-bg: #e0e0e0;--cp-gradient-handle-border: rgba(255, 255, 255, .9);--cp-gradient-handle-shadow: rgba(0, 0, 0, .2);--cp-gradient-active-border: rgba(255, 72, 0, .9);--cp-gradient-active-shadow: rgba(255, 72, 0, .35);--cp-plane-frame-bg: rgba(0, 0, 0, .03);--cp-plane-frame-border: rgba(0, 0, 0, .08);--cp-plane-frame-inner: rgba(0, 0, 0, .05);--cp-plane-thumb-ring: rgba(255, 255, 255, .9);--cp-plane-thumb-shadow: rgba(0, 0, 0, .25);--cp-text-secondary: rgba(0, 0, 0, .7);--cp-text-muted: rgba(0, 0, 0, .5);--cp-slider-thumb-border: rgba(255, 255, 255, .9);--cp-input-border: rgba(0, 0, 0, .12);--cp-input-bg: rgba(0, 0, 0, .03);--cp-eyedropper-bg: rgba(255, 255, 255, .9);--cp-eyedropper-icon: rgba(0, 0, 0, .7)}body[data-framer-theme=dark],:root[data-theme=dark]{--background: #181818;--foreground: #ededed;--line: rgba(60, 60, 60, .93);--main: #d1cfd7;--main-opposite: #181818;--main-50: #7b7b7b;--grey-25: #a2a2a2;--grey-10: #202020;--grey-15: #3a3a3a;--color-1: #a600ff;--color-1-sub: #5e0091;--color-2: #67c416;--color-2-sub: #2d5f00;--color-3: #ff6600;--color-3-sub: #7f3300;--color-4: #00a1ff;--color-4-sub: #004974;--color-5: #ffaa00;--color-5-sub: #805c00;--blured-bg: rgba(32, 32, 32, .9);--blur-amount: 40px;--blur-saturate: 1.3;--scroll-bg: #282828;--sidebar-bg: #181818;--sidebar-border: rgba(60, 60, 60, .93);--canvas-bg: #202020;--canvas-pattern-1: #2a2a2a;--canvas-pattern-2: #202020;--control-bg: #202020;--control-border: rgba(60, 60, 60, .93);--text-primary: #d1cfd7;--text-secondary: #a2a2a2;--text-muted: #7b7b7b;--accent: #6366f1;--accent-hover: #5558e3;--accent-active: #4547c4;--accent-glow: rgba(99, 102, 241, .3)}:root{--text-12: 12px;--text-10: 10px;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-24: 24px;--border-radius: 6px;--border-radius-sm: 4px;--transition: .2s ease;--small-shadow: 14px 14px 6px 0px #00000000, 9px 9px 5px 0px #00000003, 5px 5px 4px 0px #00000008, 2px 2px 3px 0px #0000000d, 1px 1px 2px 0px #0000000f}.sidebar-left{width:280px;flex-shrink:0;height:calc(100% - 24px);max-height:calc(100vh - 24px);background:var(--blured-bg);backdrop-filter:blur(var(--blur-amount)) saturate(var(--blur-saturate));-webkit-backdrop-filter:blur(var(--blur-amount)) saturate(var(--blur-saturate));padding:0;display:flex;flex-direction:column;align-items:center;position:absolute;top:12px;left:12px;z-index:20;border-radius:16px;overflow:clip;border:1px solid var(--line);box-shadow:4px 4px 11px #0000001a,14px 14px 20px #00000017,32px 32px 27px #0000000d,57px 57px 32px #00000003,90px 90px 36px #0000}.sidebar-left h2{font-size:16px;font-weight:600;color:var(--text-primary)}.show-left-panel-btn{position:absolute;top:12px;left:12px;z-index:20;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--blured-bg);backdrop-filter:blur(var(--blur-amount)) saturate(var(--blur-saturate));-webkit-backdrop-filter:blur(var(--blur-amount)) saturate(var(--blur-saturate));border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--text-primary);box-shadow:4px 4px 11px #0000001a;transition:var(--transition)}.show-left-panel-btn:hover{background:var(--grey-10)}.sidebar-tabs{padding:16px;background:transparent}.sidebar-tabs .sidebar-toggle{width:100%}.sidebar-presets-section{display:flex;flex-direction:column;align-items:flex-start;padding:16px;gap:8px;width:280px;flex:1;background:transparent;overflow-y:auto;scrollbar-width:none}.sidebar-presets-section::-webkit-scrollbar{display:none}.sidebar-generation-section{display:flex;flex-direction:column;padding:0 16px 16px;width:280px;flex:1;background:transparent;overflow-y:auto;scrollbar-width:none}.sidebar-generation-section::-webkit-scrollbar{display:none}.sidebar-generation-section .procedural-panel{padding:0}.sidebar-plugin-buttons{display:flex;gap:8px;padding:16px;width:100%;border-top:1px solid var(--line);background:var(--main-opposite);flex-shrink:0}.plugin-button{display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--main-opposite);color:var(--main);font-size:12px;line-height:16px;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .15s ease}.plugin-button:hover{background:var(--grey-10)}.plugin-button svg{flex-shrink:0}@media(max-width:1023px){.sidebar-plugin-buttons{display:none}}.sidebar-right{display:flex;flex-direction:column;align-items:center;padding:0;width:280px;flex-shrink:0;height:calc(100% - 24px);max-height:calc(100vh - 24px);background:var(--blured-bg);backdrop-filter:blur(var(--blur-amount)) saturate(var(--blur-saturate));-webkit-backdrop-filter:blur(var(--blur-amount)) saturate(var(--blur-saturate));box-shadow:4px 4px 11px #0000001a,14px 14px 20px #00000017,32px 32px 27px #0000000d,57px 57px 32px #00000003,90px 90px 36px #0000;overflow:hidden;position:absolute;top:12px;right:12px;z-index:20;border-radius:16px;border:1px solid var(--line)}.sidebar-right-scrollable{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;overflow-y:auto;overflow-x:clip;scrollbar-width:none;width:100%}.sidebar-right-scrollable::-webkit-scrollbar{display:none}.sidebar-right::-webkit-scrollbar{display:none}.sidebar-right h2{font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:16px;color:var(--text-primary)}.sidebar-right-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:16px;width:280px;border-bottom:1px solid var(--line)}.sidebar-right-header-left,.sidebar-right-header-right{display:flex;flex-direction:row;align-items:center;gap:4px}.sidebar-right-icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;border:none;border-radius:6px;background:transparent;cursor:pointer;color:var(--text-primary);transition:var(--transition)}.sidebar-right-icon-btn:hover,.sidebar-right-icon-btn.active{background:var(--grey-10)}.sidebar-right-icon-btn:disabled{opacity:.3;cursor:default}.sidebar-right-icon-btn:disabled:hover{background:transparent}.sidebar-right-icon-btn svg{width:16px;height:16px}.sidebar-section{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:16px;gap:8px;width:280px;border-bottom:1px solid var(--line);position:relative}.sidebar-section-label{font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:16px;color:var(--main-50)}.sidebar-section-label--toggle{cursor:pointer;user-select:none;color:var(--main)}.sidebar-section-label--toggle:hover{color:var(--main)}.sidebar-section input,.sidebar-section select,.sidebar-section textarea,.sidebar-section .dropdown,.sidebar-section button{user-select:text;-webkit-user-select:text}.sidebar-row{display:flex;flex-direction:row;align-items:flex-start;gap:8px;align-self:stretch}.sidebar-row-fill{flex:1;min-width:0}.sidebar-toggle{display:flex;flex-direction:row;align-items:flex-start;padding:2px;gap:2px;width:100%;height:32px;background:var(--grey-10);border-radius:8px;align-self:stretch}.sidebar-toggle-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:6px 12px;gap:8px;height:28px;background:transparent;border-radius:6px;border:none;cursor:pointer;font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--text-primary);flex:1}.sidebar-toggle-btn.active{background:var(--background);box-shadow:9px 9px 5px #00000003,5px 5px 4px #00000008,2px 2px 3px #0000000d,1px 1px 2px #0000000f}.sidebar-toggle-btn svg{width:16px;height:16px;flex:none}.canvas-container{position:relative;background:var(--canvas-bg);background-image:linear-gradient(45deg,var(--canvas-pattern-1) 25%,transparent 25%),linear-gradient(-45deg,var(--canvas-pattern-1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--canvas-pattern-1) 75%),linear-gradient(-45deg,transparent 75%,var(--canvas-pattern-1) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.sidebar-header{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:8px;width:280px;height:64px;background:var(--background);position:relative;border-bottom:1px solid var(--line)}.sidebar-header-inner{display:flex;flex-direction:column;align-items:flex-start;padding:16px;gap:8px;width:280px;height:64px}.logo-section{display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:8px;width:248px;height:32px}.logo-icon{width:32px;height:32px;flex:none;border-radius:8px;overflow:hidden}.logo-icon img{display:block;width:100%;height:100%;object-fit:cover}.logo-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0;min-width:0;height:32px;flex:1}.logo-text span{font-family:Inter,sans-serif;font-style:normal;font-weight:400;font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.menu-button-container{display:flex;flex-direction:row;align-items:center;padding:0;gap:2px;height:32px;flex-shrink:0}.menu-button{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:6px;gap:8px;width:32px;height:32px;background:transparent;border-radius:6px;border:none;cursor:pointer;color:var(--text-primary);transition:var(--transition)}.menu-button:hover,.menu-button--filled{background:var(--grey-10)}.menu-button--filled:hover{background:var(--grey-15)}.menu-button svg,.menu-button .icon{width:16px;height:16px}.dropdown-menu{display:flex;flex-direction:column;align-items:flex-start;padding:8px;position:fixed;width:232px;background:var(--background);box-shadow:57px 57px 32px #00000003,32px 32px 27px #0000000d,14px 14px 20px #00000017,4px 4px 11px #0000001a;border-radius:16px;z-index:100}.dropdown-item{display:flex;flex-direction:row;align-items:center;padding:4px 8px;gap:4px;width:216px;height:32px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--main);transition:var(--transition);text-align:left;align-self:stretch}.dropdown-item:hover,.dropdown-item.active{background:var(--grey-10)}.dropdown-item svg,.dropdown-item .option-icon{width:16px;height:16px;flex:none}.dropdown-item span{flex:1;font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--main)}.check-icon{width:12px;height:12px;flex:none}.dropdown-divider{display:block;padding:8px 0;width:100%;border:none!important;outline:none!important;background:none!important;box-shadow:none!important}.dropdown-divider:after{content:"";display:block;height:1px;background:var(--line)}.floating-toolbar{display:flex;flex-direction:column;align-items:center;padding:0;position:absolute;height:40px;left:50%;transform:translate(-50%);top:24px;background:var(--background);box-shadow:9px 9px 5px #00000003,5px 5px 4px #00000008,2px 2px 3px #0000000d,1px 1px 2px #0000000f;border-radius:8px;z-index:50}.toolbar-color-btn{display:none;gap:6px;padding:4px 8px;min-width:90px;box-shadow:inset 0 0 0 1px var(--line);background:var(--background)}.toolbar-color-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,.3)}.toolbar-color-hex{font-size:11px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;color:var(--text-primary);text-transform:uppercase}.toolbar-color-dropdown{display:none}.toolbar-inner{display:flex;flex-direction:column;align-items:flex-start;padding:4px;gap:8px;height:40px}.toolbar-toggle{display:flex;flex-direction:row;align-items:flex-start;padding:2px;gap:2px;height:32px;background:var(--grey-10);border-radius:8px}.toolbar-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:6px 12px;gap:8px;height:28px;background:transparent;border-radius:6px;border:none;cursor:pointer;font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--text-primary);transition:var(--transition)}.toolbar-btn:hover{background:var(--grey-15)}.toolbar-btn.active{border-radius:6px;background:var(--main-opposite, #FFF);box-shadow:14px 14px 6px #0000,9px 9px 5px #00000003,5px 5px 4px #00000008,2px 2px 3px #0000000d,1px 1px 2px #0000000f}.toolbar-btn svg{flex:none}.toolbar-btn .shortcut{font-family:Inter,sans-serif;font-size:10px;line-height:14px;color:var(--grey-25)}.center-column{flex:1;min-width:0;display:flex;flex-direction:column}.mobile-canvas-section{flex:1;min-height:0;display:flex;flex-direction:column}.canvas-container{flex:1;min-height:0;position:relative;background:var(--canvas-bg);display:flex;align-items:center;justify-content:center;padding:64px 24px 24px;overflow:clip}.canvas-container.gradient-editing{overflow:visible}.artboard{position:relative}html.eyedropper-mode,html.eyedropper-mode *{cursor:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.22 6.36L18.18 12.35M7.24 19.39L7.1 19.44C6.45 19.65 5.85 19.01 6.36 18.5C6.85 18 7.25 17.46 7.48 16.84L7.54 16.69C8.12 15.19 8.99 13.82 10.15 12.66L18.31 4.5C19.33 3.48 21 3.48 22.02 4.5C23.04 5.52 23.04 7.19 22.02 8.21L13.92 16.31C12.73 17.5 11.29 18.4 9.7 18.92L7.24 19.39Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12.22 6.36L18.18 12.35M7.24 19.39L7.1 19.44C6.45 19.65 5.85 19.01 6.36 18.5C6.85 18 7.25 17.46 7.48 16.84L7.54 16.69C8.12 15.19 8.99 13.82 10.15 12.66L18.31 4.5C19.33 3.48 21 3.48 22.02 4.5C23.04 5.52 23.04 7.19 22.02 8.21L13.92 16.31C12.73 17.5 11.29 18.4 9.7 18.92L7.24 19.39Z' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12.22 6.36L18.18 12.35M7.24 19.39L7.1 19.44C6.45 19.65 5.85 19.01 6.36 18.5C6.85 18 7.25 17.46 7.48 16.84L7.54 16.69C8.12 15.19 8.99 13.82 10.15 12.66L18.31 4.5C19.33 3.48 21 3.48 22.02 4.5C23.04 5.52 23.04 7.19 22.02 8.21L13.92 16.31C12.73 17.5 11.29 18.4 9.7 18.92L7.24 19.39Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 2 22,crosshair!important}.artboard.eyedropper-mode{cursor:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.22 6.36L18.18 12.35M7.24 19.39L7.1 19.44C6.45 19.65 5.85 19.01 6.36 18.5C6.85 18 7.25 17.46 7.48 16.84L7.54 16.69C8.12 15.19 8.99 13.82 10.15 12.66L18.31 4.5C19.33 3.48 21 3.48 22.02 4.5C23.04 5.52 23.04 7.19 22.02 8.21L13.92 16.31C12.73 17.5 11.29 18.4 9.7 18.92L7.24 19.39Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12.22 6.36L18.18 12.35M7.24 19.39L7.1 19.44C6.45 19.65 5.85 19.01 6.36 18.5C6.85 18 7.25 17.46 7.48 16.84L7.54 16.69C8.12 15.19 8.99 13.82 10.15 12.66L18.31 4.5C19.33 3.48 21 3.48 22.02 4.5C23.04 5.52 23.04 7.19 22.02 8.21L13.92 16.31C12.73 17.5 11.29 18.4 9.7 18.92L7.24 19.39Z' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12.22 6.36L18.18 12.35M7.24 19.39L7.1 19.44C6.45 19.65 5.85 19.01 6.36 18.5C6.85 18 7.25 17.46 7.48 16.84L7.54 16.69C8.12 15.19 8.99 13.82 10.15 12.66L18.31 4.5C19.33 3.48 21 3.48 22.02 4.5C23.04 5.52 23.04 7.19 22.02 8.21L13.92 16.31C12.73 17.5 11.29 18.4 9.7 18.92L7.24 19.39Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 2 22,crosshair}.artboard-canvas{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:linear-gradient(45deg,var(--canvas-pattern-1) 25%,transparent 25%),linear-gradient(-45deg,var(--canvas-pattern-1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--canvas-pattern-1) 75%),linear-gradient(-45deg,transparent 75%,var(--canvas-pattern-1) 75%);background-color:var(--canvas-pattern-2);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.artboard-canvas--hide-mesh>div>canvas{visibility:hidden}.export-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0009}.color-input{width:40px;height:32px;border:none;border-radius:4px;cursor:pointer;padding:0}.export-section{display:flex;flex-direction:column;align-items:flex-start;padding:16px;gap:8px;width:280px;border-radius:0 0 16px 16px;background:var(--main-opposite);border-top:1px solid var(--line);z-index:1001;flex-shrink:0}.export-buttons-row{display:flex;gap:8px;width:100%}.export-video-btn-wrap{display:none}@media(max-width:1023px){.export-video-btn-wrap{display:flex}}.export-btn{box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:12px;gap:4px;flex:1;min-width:0;height:32px;background:var(--background);border:1px solid var(--line);border-radius:6px;cursor:pointer;font-family:Inter,sans-serif;font-size:12px;line-height:16px;color:var(--text-primary);transition:var(--transition)}.export-btn:hover{background:var(--grey-15)}.export-btn.disabled,.export-btn:disabled{opacity:.5;cursor:not-allowed}.export-btn.disabled:hover,.export-btn:disabled:hover{background:var(--background)}.export-btn svg{width:16px;height:16px}.color-picker-wrapper{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.sidebar-eyedropper-btn{position:absolute;left:22px;bottom:22px;z-index:2}.color-picker-wrapper .ColorPicker__eyedropper{display:none!important}.color-picker-wrapper .ColorPicker__inputs{padding-left:42px}.color-picker-inline.ColorPicker{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;margin:0 auto;z-index:1;background:transparent}.color-picker-inline.ColorPicker:has(.ColorPicker__gradientHandle--active){padding:0}.color-picker-inline .ColorPicker__dragHandle{display:none}.color-picker-bg.ColorPicker{width:256px;background:var(--main-opposite);border-radius:12px;box-shadow:0 4px 24px #00000026;padding:12px;z-index:10000}.color-picker-bg .ColorPicker__header{padding-top:0}.color-picker-bg .ColorPicker__modeList{width:100%;left:0;right:0}.color-picker-bg .ColorPicker__inputs{padding:0}.color-picker-wrapper .color-inputs-row{order:10}.eyedropper-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--grey-10);border:none;border-radius:6px;cursor:pointer;color:var(--text-primary);transition:var(--transition);flex-shrink:0}.eyedropper-btn:hover{background:var(--grey-15)}.eyedropper-btn.active{background:var(--main);color:var(--main-opposite)}.eyedropper-btn svg{width:16px;height:16px}.app.ui-hidden{background:transparent}.app.ui-hidden .center-column{position:fixed;inset:0;width:100vw;height:100vh}.app.ui-hidden .canvas-container{display:flex;align-items:center;justify-content:center;padding:24px}.app.ui-hidden .artboard{box-shadow:none}.bottom-right-controls{position:absolute;left:304px;bottom:12px;z-index:50;display:flex;align-items:center;gap:8px;transition:left .2s ease}.bottom-right-controls.left-panel-hidden{left:12px}.hotkeys-container{position:relative}.hotkeys-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:8px;background:var(--main-opposite);border:none;border-radius:32px;cursor:pointer;color:var(--main);box-shadow:90px 90px 36px #0000,57px 57px 32px #00000003,32px 32px 27px #0000000d,14px 14px 20px #00000017,4px 4px 11px #0000001a;transition:var(--transition);overflow:clip}.hotkeys-btn:hover{background:var(--grey-10)}.hotkeys-btn svg{width:16px;height:16px}.hotkeys-panel{position:absolute;bottom:calc(100% + 8px);left:0;display:flex;flex-direction:row;align-items:flex-start;width:280px;background:var(--main-opposite);border-radius:20px;box-shadow:90px 90px 36px #0000,57px 57px 32px #00000003,32px 32px 27px #0000000d,14px 14px 20px #00000017,4px 4px 11px #0000001a;overflow:clip}.hotkeys-keys{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:8px;background:var(--main-opposite)}.hotkeys-descriptions{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:8px;flex:1;background:var(--main-opposite)}.hotkeys-key{display:flex;flex-direction:column;align-items:center;justify-content:center;height:16px;padding:0 4px;background:var(--grey-10);border-radius:4px;font-family:Inter,sans-serif;font-size:10px;font-weight:400;line-height:14px;color:var(--main);white-space:nowrap}.hotkeys-key-group{display:flex;flex-direction:row;align-items:flex-start;gap:2px;height:16px}.hotkeys-desc{font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:16px;color:var(--main-50)}.color-picker-controls-wrapper .ColorPickerControls{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}.color-picker-controls-wrapper .ColorPickerControls__canvas{overflow:visible}.color-picker-controls-wrapper .ColorPickerControls__handle,.color-picker-controls-wrapper .ColorPickerControls__handle--endpoint{filter:drop-shadow(0 0 1px rgba(0,0,0,.5)) drop-shadow(0 1px 3px rgba(0,0,0,.3))}.color-picker-controls-wrapper .ColorPickerControls__axis{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}@media(max-width:1023px){.color-picker-controls-wrapper .ColorPickerControls__handle{r:22}.color-picker-controls-wrapper .ColorPickerControls__handle--endpoint{r:18}}.ColorPicker__eyedropper:disabled{opacity:.3;cursor:not-allowed}@media(min-width:1024px){.toolbar-btn.toolbar-color-btn,.toolbar-mirror-toggle{display:none}html,body,#root{min-width:1024px;min-height:768px}.bottom-right-controls{position:absolute;left:304px;bottom:12px;right:auto}.bottom-right-controls.left-panel-hidden{left:12px}}.mobile-navbar,.mobile-toolbar{display:none}.sidebar-right-scroll-wrapper{position:absolute;top:0;right:0;width:0;height:100%;overflow:visible;pointer-events:none}.sidebar-right-scroll-wrapper .sidebar-right{pointer-events:all}.sidebar-right-scroll-wrapper .sheet-handle{display:none}.effects-panel{display:flex;flex-direction:column;width:100%;align-self:stretch;box-sizing:border-box}.effects-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.effects-list:empty{display:none}.effect-card{background:var(--grey-10, #F7F7F7);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:4px}.effect-card.disabled{opacity:.5}.effect-card-header{display:flex;align-items:center;gap:8px}.effect-card-title{flex:1;font-size:12px;font-weight:400;line-height:16px;color:var(--main, black)}.effect-card--dragging{opacity:.3}.effect-card--ghost{background:var(--grey-10, #F7F7F7)}.effect-card-title{user-select:none}.effect-toggle-btn,.effect-reset-btn,.effect-remove-btn{padding:2px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--main, black);border-radius:4px;transition:all .15s ease}.effect-toggle-icon{width:16px;height:16px;border-radius:2px;object-fit:cover;flex-shrink:0}.effect-card.disabled .effect-toggle-icon{opacity:.4}.effect-toggle-btn:hover,.effect-reset-btn:hover,.effect-remove-btn:hover{background:var(--grey-15, #e7e7e7)}.effect-card-controls{display:flex;flex-direction:column;gap:4px}.effect-control{display:flex;align-items:center;gap:4px;height:24px}.effect-control-label{width:66px;flex-shrink:0;font-size:12px;font-weight:400;line-height:16px;color:var(--main-50, rgba(0, 0, 0, .5))}.effects-add-wrapper{position:relative;width:100%;margin-top:8px}.effects-add-wrapper button.button{display:flex;justify-content:center;align-items:center;border-radius:8px;box-sizing:border-box;cursor:pointer;transition:background .3s;user-select:none;padding:9px 12px;height:36px;width:100%!important;background:transparent!important;border:1px solid var(--line)!important;color:var(--main)!important}.effects-popover{background:var(--main-opposite, white);border:none;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:57px 57px 32px #00000003,32px 32px 27px #0000000d,14px 14px 20px #00000017,4px 4px 11px #0000001a;overflow:clip;box-sizing:border-box}.effects-popover-item{width:100%;height:32px;padding:4px 8px;display:flex;align-items:center;gap:4px;background:var(--main-opposite, white);border:none;border-radius:6px;cursor:pointer;color:var(--main, black);font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:16px;text-align:left;transition:background .15s ease}.effects-popover-item:hover{background:var(--grey-10, #F7F7F7)}.effects-popover-item-icon{width:16px;height:16px;border-radius:2px;object-fit:cover;flex-shrink:0}@media(max-width:1023px){html,body,#root{min-width:0;min-height:0;height:auto;overflow:visible}.app{overflow:visible;height:auto;min-height:100dvh}.sidebar-left{display:none}.show-left-panel-btn{display:flex}.center-column{width:100%;margin-left:0;flex-direction:column;height:100dvh;overflow:hidden}.mobile-canvas-section{flex:1 1 200px;min-height:200px;max-height:70dvh;display:flex;flex-direction:column;overflow:hidden;touch-action:none}.mobile-canvas-section:has(.animation-panel),.mobile-canvas-section:has(.mckp-timeline-floating){max-height:none;overflow:visible}.mobile-canvas-section .canvas-container{flex:1;min-height:0;padding:12px;touch-action:none}.sidebar-section{-webkit-user-select:none;user-select:none}.sidebar-section-label--toggle{cursor:pointer}.sidebar-section-header{width:100%;cursor:pointer;display:flex;align-items:center}.sidebar-section-header>.sidebar-section-label--toggle{cursor:pointer}.sidebar-right-scroll-wrapper{position:static;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;pointer-events:all;width:auto;height:auto;border-top:1px solid var(--sidebar-border);background:var(--sidebar-bg)}.sidebar-right-scroll-wrapper .sheet-handle{display:none}.sidebar-right{position:static;width:100%;height:auto;max-height:none;border-radius:0;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;display:flex;flex-direction:column;flex:1;overflow:visible}.sidebar-right-header{display:none}.sidebar-right .sidebar-right-scrollable{overflow:visible;flex:1;min-height:0;align-items:stretch;width:100%;max-width:100%;padding:0}.sidebar-right .sidebar-right-scrollable>*{max-width:100%;width:100%}.sidebar-right .export-section{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--main-opposite, white);padding:12px;box-shadow:0 4px 24px #0000004f;border-radius:16px 16px 0 0;border-top:none;width:100%}.sidebar-right .export-section .export-buttons-row{display:flex;gap:10px;width:100%}.sidebar-right .export-section .export-btn{flex:1 1 0;min-width:0;height:32px;padding:0 4px;background:var(--main, black);color:var(--main-opposite, white);border:none;border-radius:6px;font-size:12px;font-weight:400;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-right .export-section .export-video-btn-wrap{flex:1 1 0;min-width:0}.sidebar-right .export-section .export-video-btn-wrap .export-btn{width:100%;padding:0 4px}.sidebar-right .export-section .export-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sidebar-right .export-section .export-btn svg{display:none}.sidebar-right .export-section .export-btn:hover{opacity:.85}.sidebar-right .export-section .copy-image-btn:disabled{opacity:.7;cursor:wait}.sidebar-right .sidebar-right-scrollable{padding-bottom:56px}.canvas-container{margin-left:0;padding:8px}.mobile-navbar{display:flex}.toolbar{display:none}.zoom-controls{display:none!important}.bottom-right-controls{position:absolute;right:12px;bottom:12px;left:auto;z-index:50;display:flex;align-items:center;gap:8px}.hotkeys-panel{position:absolute;bottom:calc(100% + 8px);right:0;left:auto}.mobile-navbar{position:relative;z-index:10;display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border)}.mobile-navbar-title{font-size:14px;font-weight:600;color:var(--main)}.mobile-navbar-actions{display:flex;align-items:center;gap:4px;margin-left:auto}.mobile-navbar-zoom{display:flex;align-items:center;gap:4px}.mobile-navbar-zoom .dropdown{min-width:90px}.mobile-navbar-zoom .dropdown__header{background:transparent;border:none;box-shadow:none;padding:4px 8px;height:auto;justify-content:center}.mobile-navbar-zoom .dropdown__header:hover{box-shadow:none;background:var(--grey-10)}.mobile-navbar-zoom .dropdown__label{font-size:14px;font-weight:500;color:var(--main);text-align:center}.mobile-navbar-zoom .dropdown__content-wrapper{top:32px;left:-8px}.mobile-navbar-preset-btn{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border:none;background:transparent;color:var(--main);border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap}.preset-btn{width:auto!important;height:32px;padding:0 12px;font-size:12px;border-radius:8px;gap:6px;flex-shrink:0}.preset-btn .icon{width:12px;height:12px}.mobile-navbar-preset-btn:hover{background:var(--grey-10)}.mobile-navbar-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--main, black);border-radius:8px;cursor:pointer}.mobile-navbar-btn:disabled{opacity:.3;cursor:not-allowed}.mobile-navbar-btn:hover:not(:disabled){background:var(--grey-10)}.floating-toolbar{display:none}.mobile-toolbar{position:sticky;top:48px;z-index:9;display:flex;padding:12px 16px;background:var(--background);border-bottom:1px solid var(--line)}.mobile-toolbar-gradient-row{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px}.mobile-toolbar-gradient-label{font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:var(--main)}.mobile-toolbar-done-btn{padding:6px 16px;border-radius:6px;border:none;background:var(--main, black);color:var(--main-opposite, #fff);font-family:Inter,sans-serif;font-size:13px;font-weight:500;cursor:pointer}.mobile-toolbar .floating-toolbar{display:flex;position:static;transform:none;height:auto;width:100%;box-shadow:none;background:transparent;border-radius:0;z-index:auto}.mobile-toolbar .toolbar-inner{padding:0;height:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;position:relative}.mobile-toolbar .toolbar-mirror-toggle{flex-shrink:0}.mobile-toolbar .toolbar-placeholder{flex:1;min-width:8px}.mobile-toolbar .toolbar-toggle{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:var(--spacing-2);background:var(--grey-10);border-radius:var(--spacing-8)}.mobile-toolbar .toolbar-toggle .toolbar-btn{flex:1}.mobile-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-8);padding:var(--spacing-6) var(--spacing-12);height:28px;background:var(--grey-10);border-radius:var(--spacing-6);border:none;cursor:pointer;font-family:Inter,sans-serif;font-size:var(--text-12);line-height:16px;color:var(--main);transition:background var(--transition),box-shadow var(--transition);white-space:nowrap}.mobile-toolbar .toolbar-btn:hover{background:var(--grey-15)}.mobile-toolbar .toolbar-btn.active{position:relative;z-index:1;background:var(--main-opposite);box-shadow:var(--small-shadow)}.mobile-toolbar .toolbar-btn .shortcut{display:none}.mobile-toolbar .toolbar-color-btn{display:flex}.toolbar-color-dropdown,.mobile-toolbar .toolbar-color-dropdown{display:none}.toolbar-color-dropdown-portal{display:block;position:fixed;width:256px;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:12px;box-shadow:0 4px 24px #00000026;z-index:10000;padding:12px;box-sizing:border-box;isolation:isolate}.toolbar-color-dropdown-portal .color-picker-inline{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;margin:0;z-index:1;background:transparent;box-sizing:border-box}.toolbar-color-dropdown-portal .color-picker-inline.ColorPicker{padding:0!important;width:100%!important;border-radius:0}.toolbar-color-dropdown-portal .ColorPicker__header{padding-top:0}.toolbar-color-dropdown-portal .ColorPicker__inputs{padding:0}.toolbar-color-dropdown-portal .ColorPicker__dragHandle,.toolbar-color-dropdown-portal .ColorPicker__eyedropper{display:none!important}.sidebar-right .color-picker-section{display:none}.sidebar-right .sidebar-section:has(.sidebar-toggle),.sidebar-right .sidebar-section.mode-section{display:none}.sidebar-row--column{flex-direction:column}.sidebar-row--grid-inputs{flex-direction:row}.sidebar-row .sidebar-row-fill{flex:1;min-width:0}.animation-panel,.mckp-timeline-floating{touch-action:auto}.mckp-timeline-floating{position:static;transform:none;bottom:auto;left:auto;width:100%}.mckp-timeline-floating .mckp-timeline-container{min-width:0;width:100%;border-radius:0;border-top:1px solid var(--line);box-shadow:none;background:var(--sidebar-bg);padding:8px 16px}.animation-panel--keyframe{height:auto;max-height:none}.animation-panel-header{padding:8px 16px}.animation-panel-body{flex-direction:column}.animation-panel-controls{padding:8px 16px;flex-wrap:wrap;gap:8px}.animation-panel-easing{margin-left:0;width:100%}.animation-panel-easing .easing-selector{width:100%}.animation-panel-easing .easing-dropdown{flex:1}.animation-panel-easing .easing-dropdown__trigger{width:100%;min-width:0}.animation-panel--keyframe .timeline{height:88px;flex:none}.easing-dropdown__backdrop{position:fixed;inset:0;z-index:9999;background:transparent}.easing-dropdown__panel{position:fixed!important;inset:auto 0 0!important;width:100%!important;border-radius:16px 16px 0 0!important;z-index:10000!important;flex-direction:column}.easing-dropdown__grid{padding:16px}.easing-dropdown__row{grid-template-columns:repeat(3,1fr)}.easing-dropdown__preview{border-left:none;border-top:none;border-bottom:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;padding:16px;min-width:0;order:-1}.easing-dropdown__preview-label{margin-top:6px;text-align:center}.mobile-play-btn{position:absolute;left:12px;bottom:12px;z-index:50;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;border-radius:6px;border:none;background:var(--main-opposite, white);color:var(--main);box-shadow:90px 90px 36px #0000,57px 57px 32px #00000003,32px 32px 27px #0000000d,14px 14px 20px #00000017,4px 4px 11px #0000001a;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.mobile-play-btn:active{transform:scale(.92)}.mobile-play-btn--playing{background:var(--main-opposite, white);color:var(--main)}}html.is-plugin .sidebar-right .color-picker-section{display:flex}html.is-plugin .sidebar-right .sidebar-section:has(.sidebar-toggle),html.is-plugin .sidebar-right .sidebar-section.mode-section{display:flex}