:root{--figma-corner-smoothing:60%}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0F0F10;color:#e8e8ed;-webkit-font-smoothing:antialiased}.app{display:flex;height:100vh;width:100%}
.sidebar{width:220px;min-width:220px;background:#121214;border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;padding:0;overflow-y:auto}.sidebar-brand{padding:24px 20px 20px;font-size:18px;font-weight:700;letter-spacing:-0.3px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.06);color:#fff}.sidebar-brand span{background:linear-gradient(135deg,#6c5ce7,#a29bfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-nav{padding:12px 10px;list-style:none;flex:1}.sidebar-nav li{padding:10px 14px;margin:2px 0;border-radius:12px;font-size:14px;font-weight:500;color:rgba(255,255,255,0.55);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:10px}.sidebar-nav li i{width:18px;font-size:14px;opacity:0.6}.sidebar-nav li:hover{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.8)}.sidebar-nav li.active{background:rgba(108,92,231,0.15);color:#a29bfe}.sidebar-nav li.active i{opacity:1}.sidebar-footer{margin-top:auto;padding:16px 20px;font-size:11px;color:rgba(255,255,255,0.25);border-top:1px solid rgba(255,255,255,0.06)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}.header{position:relative;z-index:100;padding:20px 28px 16px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;background:#0F0F10}.header h2{font-size:20px;font-weight:700;letter-spacing:-0.2px}.header-actions{display:flex;align-items:center;gap:8px;position:relative}.header #demoCounter{font-size:12px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06);padding:4px 12px;border-radius:40px}.icon-tool{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;border-radius:6px;font-size:15px}.icon-tool:hover,.icon-tool.active{background:rgba(255,255,255,.07);color:#fff}.action-menu{position:absolute;right:0;top:34px;z-index:200;width:156px;padding:6px;background:#202023;border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.45);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .12s,transform .12s,visibility 0s linear .12s}.action-menu::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px}.action-menu.open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);transition-delay:0s}.action-menu button{position:relative;width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.72);font:500 12px inherit;text-align:left;cursor:pointer}.action-menu button:hover{background:rgba(255,255,255,.07);color:#fff}.action-menu i{width:14px;color:#a29bfe}
.demo-grid{position:relative;z-index:1;flex:1;overflow-y:auto;padding:16px 28px 32px;display:block}.demo-grid::-webkit-scrollbar{width:4px}.demo-grid::-webkit-scrollbar-track{background:transparent}.demo-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:10px}.motion-group{position:relative;border-bottom:1px solid rgba(255,255,255,.045);padding-bottom:18px;margin-bottom:10px}.motion-group.menu-open{z-index:80}.group-header{height:42px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);user-select:none}.group-drag{width:20px;height:28px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);cursor:grab}.group-drag:active{cursor:grabbing}.group-toggle,.group-more{width:24px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:rgba(255,255,255,.45);cursor:pointer;border-radius:5px}.group-toggle:hover,.group-more:hover{background:rgba(255,255,255,.06);color:#fff}.group-toggle i{font-size:10px;transition:transform .18s}.motion-group.collapsed .group-toggle i{transform:rotate(-90deg)}.group-title{font-size:15px;font-weight:650;flex:0 1 auto}.group-count{font-size:11px;color:rgba(255,255,255,.28)}.group-more{margin-left:4px}.group-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-content:start}.motion-group.collapsed .group-body{display:none}.motion-group.dragging{opacity:.45}.motion-group.drag-over{border-top:2px solid #6c5ce7}.group-menu-wrap{position:relative;z-index:2;display:inline-flex}.group-menu{right:auto;left:0;top:32px}.empty-group{grid-column:1/-1;min-height:72px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.09);border-radius:8px;color:rgba(255,255,255,.25);font-size:12px}
.demo-card{background:rgba(255,255,255,0.06);border-radius:20px;border:1px solid rgba(255,255,255,0.06);transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column}.demo-card:hover{border-color:rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,.35)}.demo-preview{padding:24px 16px 16px;display:flex;justify-content:center;align-items:center;min-height:100px;position:relative;border-bottom:1px solid rgba(255,255,255,0.04);overflow:hidden;border-radius:20px 20px 0 0}.demo-badge{position:absolute;top:10px;left:14px;font-size:10px;font-weight:600;color:rgba(255,255,255,0.3);letter-spacing:0.3px;text-transform:uppercase;background:rgba(255,255,255,0.05);padding:2px 8px;border-radius:30px}.demo-info{padding:16px 16px 24px;flex:1;display:flex;flex-direction:column}.demo-name{font-weight:600;font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between}.demo-params{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:11px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:12px;margin-top:4px}.demo-params span{display:flex;align-items:center;gap:4px}.demo-params i{opacity:0.4;font-size:10px;width:12px}.curve-badge{font-family:'SF Mono','Fira Code',monospace;font-size:10px;background:rgba(255,255,255,0.06);padding:2px 8px;border-radius:30px}.demo-actions{margin-top:auto;padding-top:8px;display:flex;align-items:stretch;gap:6px;justify-content:flex-end}.css-tag{display:inline-flex;align-items:center;justify-content:center;line-height:1}.btn-copy{width:84px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:transparent;border:1px solid rgba(255,255,255,0.1);padding:4px 8px;border-radius:30px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.6);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.btn-copy:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);color:#fff}.btn-copy i{width:10px;margin-right:4px;font-size:10px}.btn-copy.copy-success{color:#a29bfe;border-color:rgba(108,92,231,0.35)}.btn-copy.copy-success i{animation:copyCheckIn .32s cubic-bezier(.34,1.56,.64,1) both}@keyframes copyCheckIn{from{opacity:0;transform:scale(.2) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.tab-bar{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,0.04);border-radius:14px;position:relative}.tab-indicator{position:absolute;top:4px;left:0;bottom:4px;background:rgba(108,92,231,0.3);border-radius:10px;transition:transform .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1);pointer-events:none}.tab-bar .tab-item{padding:8px 16px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.5);cursor:pointer;border-radius:10px;transition:color .2s;position:relative;z-index:1;user-select:none;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;white-space:nowrap}.tab-bar .tab-item.active{color:#fff}.tab-bar.morph .tab-indicator{transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1)}.tab-bar .tab-indicator.elastic{transition:transform .38s cubic-bezier(.34,1.56,.64,1),width .38s cubic-bezier(.34,1.56,.64,1)}
.fade-stage{position:relative;width:100%;height:50px}.fade-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;border-radius:12px;background:rgba(108,92,231,0.1);opacity:0;transition:opacity .22s ease;pointer-events:none}.fade-pane.active{opacity:1}.fade-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}.fade-dot{width:6px;height:6px;border-radius:10px;background:rgba(255,255,255,0.2);transition:.2s}.fade-dot.active{background:#6c5ce7;width:20px}
.scale-stage{position:relative;width:100%;height:44px}.scale-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;border-radius:12px;background:rgba(108,92,231,0.1);transform:scale(0.96);opacity:0;transition:transform .2s cubic-bezier(0.2,0.9,0.4,1),opacity .2s ease}.scale-pane.active{transform:scale(1);opacity:1}
.uline-bar{display:flex;gap:16px;position:relative;padding:8px 0}.uline-item{font-size:14px;font-weight:500;color:rgba(255,255,255,0.4);cursor:pointer;transition:color .2s}.uline-item.active{color:#fff}.uline-indicator{position:absolute;bottom:0;height:2px;background:#6c5ce7;border-radius:2px;transition:width .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1)}
.liquid-shape{width:120px;height:48px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;cursor:pointer;transition:border-radius .4s cubic-bezier(.34,1.56,.64,1),width .4s cubic-bezier(.34,1.56,.64,1),height .4s cubic-bezier(.34,1.56,.64,1);user-select:none}
.ripple-btn{position:relative;overflow:hidden;padding:10px 28px;background:rgba(108,92,231,0.2);border:1px solid rgba(108,92,231,0.3);border-radius:14px;color:#a29bfe;font-size:14px;font-weight:600;cursor:pointer;user-select:none}.ripple-effect{position:absolute;border-radius:50%;background:rgba(108,92,231,0.3);transform:scale(0);animation:rippleAnim .5s cubic-bezier(0.2,0,0,1) forwards;pointer-events:none}@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
.blur-stage{position:relative;width:100%;height:44px}.blur-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;border-radius:12px;background:rgba(108,92,231,0.1);filter:blur(6px);opacity:0;transition:filter .3s cubic-bezier(0.25,0.46,0.45,0.94),opacity .3s ease}.blur-pane.active{filter:blur(0);opacity:1}
.text-demo{display:flex;justify-content:center;align-items:center;min-height:60px;width:100%}.text-anim-wrap,.text-anim-wrap *{font-family:inherit;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0}.text-anim-wrap{text-align:center}.t-line{display:inline-block}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes blurReveal{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}@keyframes maskReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}@keyframes typewriter{from{width:0}to{width:100%}}@keyframes textGlow{from{text-shadow:0 0 8px rgba(108,92,231,0.3)}to{text-shadow:0 0 24px rgba(108,92,231,0.8),0 0 48px rgba(108,92,231,0.3)}}@keyframes rotateIn{from{opacity:0;transform:rotate(-12deg) scale(0.9)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes appleHero{from{opacity:0;transform:scale(1.08);letter-spacing:-2px}to{opacity:1;transform:scale(1);letter-spacing:0}}@keyframes gradientFlow{from{background-position:0% 0}to{background-position:200% 0}}
.btn-demo{display:flex;justify-content:center;align-items:center;width:100%}.demo-btn{padding:10px 28px;border-radius:14px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:#e8e8ed;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s cubic-bezier(0.2,0.9,0.4,1),box-shadow .2s ease,border-color .2s;user-select:none;outline:none;font-family:inherit}.demo-btn:hover{background:rgba(255,255,255,0.1)}.glow-border-btn{border-color:rgba(255,255,255,0.15);transition:border-color .4s ease-in-out,box-shadow .4s ease-in-out}.grad-flow-btn{background:linear-gradient(90deg,#6c5ce7,#a29bfe,#6c5ce7);background-size:200% 100%;border:none;color:#fff;animation:gradientFlow 1.5s linear infinite}.shine-btn{background:linear-gradient(120deg,rgba(255,255,255,0.06) 30%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.06) 70%);background-size:200% 100%;transition:background-position .6s ease-in-out;background-position:0% 0;border:1px solid rgba(255,255,255,0.1)}@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.card-demo{display:flex;justify-content:center;align-items:center;width:100%}.demo-card-el{width:140px;background:rgba(255,255,255,0.06);border-radius:16px;border:1px solid rgba(255,255,255,0.06);overflow:hidden;transition:transform .3s cubic-bezier(0.2,0.9,0.4,1),box-shadow .3s ease,backdrop-filter .3s ease,background .3s ease;cursor:default}.demo-card-el.glass-card{transition:backdrop-filter .3s ease,background .3s ease}.card-visual{height:60px;background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.card-info{padding:10px 12px 12px}.card-title{font-size:13px;font-weight:600;margin-bottom:2px}.card-sub{font-size:11px;color:rgba(255,255,255,0.4)}@keyframes floatCard{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.share-motion-demo{height:104px;width:232px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:5px}.share-motion-trigger{width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.share-motion-trigger:hover{background:rgba(255,255,255,.08)}.share-motion-trigger img{display:block;width:20px;height:20px;filter:invert(1)}.share-motion-popover{width:220px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#242427;box-shadow:0 8px 20px rgba(0,0,0,.28);transform-origin:right top;animation:sharePopoverIn .2s cubic-bezier(.08,.82,.17,1) both}.share-motion-title{font-size:12px;font-weight:700;line-height:18px}.share-motion-subtitle{font-size:9px;line-height:14px;color:rgba(255,255,255,.45)}.share-motion-link{height:27px;margin-top:8px;padding:0 3px 0 7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.55);font-size:9px}.share-motion-link i{color:#a29bfe}.share-motion-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.share-motion-copy{height:21px;padding:0 8px;border:0;background:#6c5ce7;color:#fff;font-size:9px}@keyframes sharePopoverIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sharePopoverOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}body.light-theme .share-motion-trigger{background:transparent;color:#000}body.light-theme .share-motion-trigger:hover{background:rgba(0,0,0,.06)}body.light-theme .share-motion-trigger img{filter:none}body.light-theme .share-motion-popover{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 8px 20px rgba(0,0,0,.16)}body.light-theme .share-motion-subtitle{color:rgba(20,20,24,.5)}body.light-theme .share-motion-link{border-color:rgba(0,0,0,.15);color:rgba(20,20,24,.55)}
.list-demo{display:flex;justify-content:center;width:100%}.list-items{display:flex;flex-direction:column;gap:6px;width:120px}.list-item{padding:8px 12px;background:rgba(255,255,255,0.05);border-radius:10px;font-size:13px;font-weight:500;text-align:center}@keyframes slideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:720px){.sidebar{width:60px;min-width:60px}.sidebar-brand span,.sidebar-nav li span,.sidebar-footer{display:none}.sidebar-nav li{justify-content:center;padding:10px}.demo-grid{padding:12px 16px}.group-body{grid-template-columns:1fr}.header{padding:16px}}
.editor-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.editor-overlay.active{display:flex}.editor-panel{background:#1c1c1e;border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:24px 28px;width:420px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,0.6)}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.06)}.editor-header h3{font-size:16px;font-weight:600;color:#fff}.editor-header button{background:none;border:none;color:rgba(255,255,255,0.4);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s}.editor-header button:hover{background:rgba(255,255,255,0.08);color:#fff}.editor-group{margin-bottom:16px}.editor-group label{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:6px;letter-spacing:0.3px;text-transform:uppercase}.editor-slider-row{display:flex;align-items:center;gap:12px}.editor-slider-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:rgba(255,255,255,0.12);outline:none;transition:.15s}.editor-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#6c5ce7;cursor:pointer;border:2px solid #1c1c1e;box-shadow:0 0 0 1px rgba(255,255,255,0.15)}.editor-slider-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#6c5ce7;cursor:pointer;border:2px solid #1c1c1e}.editor-slider-value{font-size:14px;font-weight:600;color:#fff;min-width:54px;text-align:right;font-variant-numeric:tabular-nums}.editor-dur-input-wrap{display:flex;align-items:center;gap:4px}.editor-dur-input-wrap input[type=number]{width:60px;padding:6px 4px 6px 10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#e8e8ed;font-size:14px;font-weight:600;font-family:inherit;outline:none;text-align:right;-moz-appearance:textfield}.editor-dur-input-wrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.editor-dur-input-wrap input[type=number]:focus{border-color:#6c5ce7}.editor-unit-btn{padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.5);font-size:11px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;line-height:1;min-width:32px;text-align:center}.editor-unit-btn:hover{background:rgba(255,255,255,0.08);color:#fff}.editor-input{width:100%;padding:8px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#e8e8ed;font-size:13px;font-family:'SF Mono','Fira Code',monospace;outline:none;transition:.15s}.editor-input:focus{border-color:#6c5ce7;background:rgba(108,92,231,0.08)}.editor-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.editor-presets button{padding:4px 10px;border-radius:30px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.5);font-size:11px;font-family:'SF Mono','Fira Code',monospace;cursor:pointer;transition:.15s}.editor-presets button:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);color:#fff}.editor-presets button.active{background:rgba(108,92,231,0.2);border-color:#6c5ce7;color:#a29bfe}.editor-css-box{background:rgba(0,0,0,0.3);border-radius:10px;padding:10px 12px;font-size:12px;font-family:'SF Mono','Fira Code',monospace;color:rgba(255,255,255,0.5);line-height:1.6;word-break:break-all;max-height:80px;overflow-y:auto;white-space:pre-wrap}.editor-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06)}.editor-footer button{padding:8px 16px;border-radius:30px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}.btn-editor-reset,.btn-editor-default{background:transparent;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5)}.btn-editor-reset:hover,.btn-editor-default:hover{background:rgba(255,255,255,0.08);color:#fff}.btn-editor-default.saved{border-color:#6c5ce7;color:#a29bfe}.btn-editor-close{background:rgba(108,92,231,0.2);border:1px solid rgba(108,92,231,0.3);color:#a29bfe}.btn-editor-close:hover{background:rgba(108,92,231,0.3);border-color:#6c5ce7;color:#fff}
.help-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.help-overlay.active{display:flex}.help-panel{background:#1c1c1e;border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:24px 28px;width:700px;max-width:92vw;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,0.6)}.help-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.06)}.help-header h3{font-size:16px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}.help-header h3 i{color:#6c5ce7;font-size:15px}.help-header button{background:none;border:none;color:rgba(255,255,255,0.4);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s}.help-header button:hover{background:rgba(255,255,255,0.08);color:#fff}.help-body{overflow-y:auto;flex:1}.help-body::-webkit-scrollbar{width:4px}.help-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:10px}.help-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.5}.help-table thead{position:sticky;top:0;z-index:1}.help-table thead th{background:#1c1c1e;color:rgba(255,255,255,0.3);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;padding:8px 10px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.06)}.help-table tbody td{padding:10px 10px;color:rgba(255,255,255,0.5);border-bottom:1px solid rgba(255,255,255,0.03);vertical-align:top}.help-table tbody tr:hover td{background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.7)}.help-table .hl-name{color:rgba(255,255,255,0.6);font-weight:600;white-space:nowrap;font-family:'SF Mono','Fira Code',monospace;font-size:11px}.help-table tbody td:last-child{color:rgba(255,255,255,0.4)}.help-table tbody tr:hover td:last-child{color:rgba(255,255,255,0.6)}
.theme-control{padding:16px 20px;display:flex;justify-content:flex-start}.theme-toggle{position:relative;width:64px;height:32px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.05);cursor:pointer;transition:background .2s,border-color .2s}.theme-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}.theme-toggle img{position:relative;z-index:2;width:13px;height:13px;justify-self:center;opacity:.4;transition:opacity .2s,filter .2s}.theme-toggle:not(.is-light) .theme-moon,.theme-toggle.is-light .theme-sun{opacity:1}.theme-toggle .theme-thumb{position:absolute;z-index:1;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#6c5ce7;transform:translateX(32px);transition:transform .25s cubic-bezier(.22,1,.36,1)}.theme-toggle.is-light .theme-thumb{transform:translateX(0)}.sidebar-footer{margin-top:0}
body.light-theme{background:#f5f5f7;color:#202124}body.light-theme .sidebar{background:#fff;border-color:rgba(0,0,0,.08)}body.light-theme .sidebar-brand{color:#202124;border-color:rgba(0,0,0,.08)}body.light-theme .sidebar-nav li{color:rgba(20,20,24,.58)}body.light-theme .sidebar-nav li:hover{background:rgba(0,0,0,.045);color:#202124}body.light-theme .sidebar-nav li.active{background:rgba(108,92,231,.1);color:#6252d9}body.light-theme .theme-toggle{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.09);color:rgba(20,20,24,.42)}body.light-theme .theme-toggle:hover{background:rgba(0,0,0,.06)}body.light-theme .sidebar-footer{color:rgba(20,20,24,.35);border-color:rgba(0,0,0,.08)}body.light-theme .header{background:#f5f5f7;border-color:rgba(0,0,0,.08)}body.light-theme .header #demoCounter{background:rgba(0,0,0,.05);color:rgba(20,20,24,.42)}body.light-theme .icon-tool,body.light-theme .group-toggle,body.light-theme .group-more{color:rgba(20,20,24,.5)}body.light-theme .group-header{color:rgba(20,20,24,.82)}body.light-theme .group-drag,body.light-theme .group-count{color:rgba(20,20,24,.36)}body.light-theme .motion-group{border-color:rgba(0,0,0,.06)}body.light-theme .demo-card{background:#fff;border-color:rgba(0,0,0,.08)}body.light-theme .demo-card:hover{border-color:rgba(0,0,0,.14);box-shadow:0 16px 42px rgba(0,0,0,.1)}body.light-theme .demo-preview{background:#fafbfc;border-color:rgba(0,0,0,.07)}body.light-theme .demo-badge{background:rgba(0,0,0,.05);color:rgba(20,20,24,.45)}body.light-theme .demo-params{background:rgba(0,0,0,.04);color:rgba(20,20,24,.58)}body.light-theme .curve-badge{background:rgba(0,0,0,.055)}body.light-theme .btn-copy{border-color:rgba(0,0,0,.12);color:rgba(20,20,24,.58)}body.light-theme .action-menu,body.light-theme .editor-panel,body.light-theme .help-panel{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 16px 40px rgba(0,0,0,.15)}body.light-theme .action-menu button{color:rgba(20,20,24,.7)}body.light-theme .action-menu button:hover{background:rgba(0,0,0,.05);color:#202124}body.light-theme .editor-header h3,body.light-theme .help-header h3{color:#202124}body.light-theme .editor-group label{color:rgba(20,20,24,.52)}body.light-theme .editor-input,body.light-theme .editor-dur-input-wrap input{background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.1);color:#202124}body.light-theme .editor-css-box{background:rgba(0,0,0,.05);color:rgba(20,20,24,.65)}body.light-theme .help-table thead th{background:#fff;color:rgba(20,20,24,.42)}body.light-theme .help-table tbody td,body.light-theme .help-table .hl-name{color:rgba(20,20,24,.62);border-color:rgba(0,0,0,.05)}body.light-theme .tab-bar{background:#eceef2;border:1px solid rgba(0,0,0,.07)}body.light-theme .tab-bar .tab-item{color:rgba(20,20,24,.58)}body.light-theme .tab-bar .tab-item.active{color:#30266f}body.light-theme .fade-pane,body.light-theme .scale-pane,body.light-theme .blur-pane{background:#eeeafd;border:1px solid rgba(108,92,231,.14);color:#30266f}body.light-theme .uline-item{color:rgba(20,20,24,.5)}body.light-theme .uline-item.active{color:#202124}body.light-theme .demo-btn{background:#eceef2;border-color:rgba(0,0,0,.12);color:#202124}body.light-theme .demo-btn:hover{background:#e3e5ea}body.light-theme .grad-flow-btn{color:#fff;border-color:transparent}body.light-theme .ripple-btn{background:#eeeafd;border-color:rgba(108,92,231,.25);color:#5c4bd2}body.light-theme .demo-card-el{background:#f0f1f4;border-color:rgba(0,0,0,.09);color:#202124}body.light-theme .card-sub{color:rgba(20,20,24,.48)}body.light-theme .list-item{background:#eceef2;border:1px solid rgba(0,0,0,.07);color:#202124}body.light-theme .empty-group{border-color:rgba(0,0,0,.1);color:rgba(20,20,24,.35)}@media(max-width:720px){.theme-control{padding:16px 2px}.theme-toggle{transform:scale(.82)}}
body.light-theme .theme-toggle img{filter:invert(1)}body.light-theme .theme-toggle.is-light .theme-sun{filter:none}
.sidebar-brand,.header{height:61px}.sidebar-brand{padding:0 20px}.sidebar-brand>span{margin-left:-10px}.header{padding:0 28px}.demo-card[draggable=true]{cursor:grab}.demo-card[draggable=true]:active{cursor:grabbing}.demo-card.card-dragging{opacity:.38;transform:scale(.98)}.motion-group.card-drop-target{outline:1px solid rgba(108,92,231,.65);outline-offset:-1px;background:rgba(108,92,231,.035)}body.light-theme .editor-slider-row input[type=range]{background:rgba(20,20,24,.16)}body.light-theme .editor-slider-row input[type=range]::-webkit-slider-thumb{background:#6c5ce7;border-color:#fff;box-shadow:0 0 0 1px rgba(76,61,190,.25)}body.light-theme .editor-slider-row input[type=range]::-moz-range-thumb{background:#6c5ce7;border-color:#fff}body.light-theme .editor-unit-btn{background:rgba(0,0,0,.045);border-color:rgba(0,0,0,.14);color:rgba(20,20,24,.7)}body.light-theme .editor-unit-btn:hover{background:rgba(0,0,0,.08);color:#202124}body.light-theme .editor-footer{border-color:rgba(0,0,0,.08)}body.light-theme .btn-editor-reset,body.light-theme .btn-editor-default{background:#f5f5f7;border-color:rgba(0,0,0,.14);color:rgba(20,20,24,.68)}body.light-theme .btn-editor-reset:hover,body.light-theme .btn-editor-default:hover{background:#eceef2;border-color:rgba(0,0,0,.2);color:#202124}body.light-theme .btn-editor-default.saved{border-color:#6c5ce7;color:#5c4bd2}@media(max-width:720px){.header{padding:0 16px}}
body.light-theme .editor-presets button{background:#f5f5f7;border-color:rgba(0,0,0,.13);color:rgba(20,20,24,.68)}body.light-theme .editor-presets button:hover{background:#eceef2;border-color:rgba(0,0,0,.2);color:#202124}body.light-theme .editor-presets button.active{background:rgba(108,92,231,.12);border-color:#6c5ce7;color:#5141c2}
.add-motion-panel{width:520px}.motion-upload{height:156px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.025);display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;margin-bottom:20px;position:relative}.motion-upload:hover,.motion-upload.drag-over{border-color:#6c5ce7;background:rgba(108,92,231,.08)}.motion-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.motion-upload-content{display:flex;flex-direction:column;align-items:center}.motion-upload-content i{font-size:23px;color:#a29bfe;margin-bottom:10px}.motion-upload-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}.motion-upload-hint{font-size:11px;color:rgba(255,255,255,.36);margin-top:6px}.motion-upload-file{display:none;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:rgba(108,92,231,.12);max-width:88%}.motion-upload.has-file .motion-upload-content{display:none}.motion-upload.has-file .motion-upload-file{display:flex}.motion-upload-file i{color:#a29bfe}.motion-upload-file span{font-size:12px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-form-row{display:grid;grid-template-columns:1fr 120px;gap:12px}.motion-form-input{font-family:inherit}.motion-form-textarea{min-height:70px;resize:vertical;line-height:1.5}.add-motion-error{min-height:16px;margin-top:-8px;font-size:11px;color:#ff7675}.uploaded-preview{width:100%;height:74px;border:0;border-radius:8px;background:transparent}.uploaded-media{display:block;max-width:100%;max-height:74px;object-fit:contain;border-radius:8px}.uploaded-file-placeholder{display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.55);font-size:12px}.uploaded-file-placeholder i{color:#a29bfe}.btn-add-cancel{background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55)}.btn-add-cancel:hover{background:rgba(255,255,255,.08);color:#fff}.btn-add-submit{background:rgba(108,92,231,.2);border:1px solid rgba(108,92,231,.3);color:#a29bfe}.btn-add-submit:hover{background:rgba(108,92,231,.3);border-color:#6c5ce7;color:#fff}body.light-theme .motion-upload{background:#fafbfc;border-color:rgba(0,0,0,.16)}body.light-theme .motion-upload:hover,body.light-theme .motion-upload.drag-over{border-color:#6c5ce7;background:rgba(108,92,231,.07)}body.light-theme .motion-upload-title{color:#202124}body.light-theme .motion-upload-hint{color:rgba(20,20,24,.45)}body.light-theme .motion-upload-file{background:rgba(108,92,231,.1);color:#202124}body.light-theme .uploaded-file-placeholder{color:rgba(20,20,24,.6)}body.light-theme .btn-add-cancel{background:#f5f5f7;border-color:rgba(0,0,0,.14);color:rgba(20,20,24,.68)}body.light-theme .btn-add-submit{background:rgba(108,92,231,.12);border-color:rgba(108,92,231,.35);color:#5141c2}body.light-theme .editor-header button{color:rgba(20,20,24,.5)}body.light-theme .editor-header button:hover{background:rgba(0,0,0,.06);color:#202124}@media(max-width:560px){.motion-form-row{grid-template-columns:1fr}.add-motion-panel{width:calc(100vw - 28px)}}
.editor-dur-input-wrap input[type=number]{padding-left:4px;text-align:center}.exit-option-row{height:42px;padding:0 11px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:space-between}.exit-option-label{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:12px;font-weight:500}.exit-option-label i{width:13px;color:#a29bfe}.exit-switch{position:relative;width:38px;height:22px;padding:0;border:0;border-radius:20px;background:rgba(255,255,255,.13);cursor:pointer;transition:background .2s}.exit-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.22,1,.36,1)}.exit-switch.active{background:#6c5ce7}.exit-switch.active::after{transform:translateX(16px)}body.light-theme .exit-option-row{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.1)}body.light-theme .exit-option-label{color:rgba(20,20,24,.68)}body.light-theme .exit-switch{background:rgba(20,20,24,.18)}body.light-theme .exit-switch.active{background:#6c5ce7}
.delete-confirm-panel{width:400px;padding:24px}.delete-confirm-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,118,117,.12);color:#ff7675;font-size:16px;margin-bottom:16px}.delete-confirm-title{font-size:17px;font-weight:650;color:#fff;margin-bottom:8px}.delete-confirm-message{font-size:13px;line-height:1.65;color:rgba(255,255,255,.52)}.delete-confirm-message strong{color:rgba(255,255,255,.82);font-weight:600}.delete-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.delete-confirm-actions button{height:34px;padding:0 16px;border-radius:999px;font:600 12px inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.delete-confirm-cancel{border:1px solid rgba(255,255,255,.11);background:transparent;color:rgba(255,255,255,.6)}.delete-confirm-cancel:hover{background:rgba(255,255,255,.08);color:#fff}.delete-confirm-submit{border:1px solid #ff0000;background:rgba(255,0,0,.1);color:#ff0000}.delete-confirm-submit:hover{background:#ff0000;border-color:#ff0000;color:#fff}body.light-theme .delete-confirm-title{color:#202124}body.light-theme .delete-confirm-message{color:rgba(20,20,24,.55)}body.light-theme .delete-confirm-message strong{color:#202124}body.light-theme .delete-confirm-cancel{background:#f5f5f7;border-color:rgba(0,0,0,.13);color:rgba(20,20,24,.68)}body.light-theme .delete-confirm-cancel:hover{background:#eceef2;color:#202124}
.editor-layout-panel{width:860px;max-width:94vw;max-height:88vh}.editor-layout{display:grid;grid-template-columns:minmax(320px,1fr) 380px;gap:24px;min-height:390px}.editor-preview-pane{display:flex;flex-direction:column;min-width:0}.editor-section-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:6px}.editor-live-stage{position:relative;flex:1;min-height:350px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:28px}.editor-live-stage>.anim-target{width:100%;display:flex;align-items:center;justify-content:center}.editor-settings{min-width:0;display:flex;flex-direction:column}.editor-settings .editor-body{flex:1}.editor-layout-panel .editor-footer{margin-top:auto}body.light-theme .editor-section-label{color:rgba(20,20,24,.52)}body.light-theme .editor-live-stage{background:#fafbfc;border-color:rgba(0,0,0,.09)}@media(max-width:780px){.editor-layout-panel{width:calc(100vw - 24px);max-height:92vh}.editor-layout{grid-template-columns:1fr;gap:18px}.editor-live-stage{min-height:210px}.editor-settings{display:block}}
.anim-target .text-anim-wrap,.anim-target .demo-btn,.anim-target .demo-card-el,.anim-target .list-items{cursor:pointer}.sidebar-brand{font-size:20px}.header h2{font-size:18px}.group-title{font-size:14px}.curve-badge,.editor-input,.editor-presets button,.editor-css-box,.help-table .hl-name{font-family:inherit}button,input,textarea,select{font-family:inherit}button{border-radius:999px}.editor-panel,.help-panel{border-radius:24px}.sidebar-nav li{border-radius:12px;--corner-smoothing:var(--figma-corner-smoothing)}.tab-bar .tab-item,.tab-bar .tab-indicator{border-radius:10px;--corner-smoothing:var(--figma-corner-smoothing)}.help-header h3,.help-header h3 i,.help-header button,.help-table,.help-table thead th,.help-table .hl-name{font-size:14px}.help-table tbody tr:hover td{background:transparent;color:rgba(255,255,255,.5)}.help-table tbody tr:hover .hl-name{color:rgba(255,255,255,.6)}.help-table tbody tr:hover td:last-child{color:rgba(255,255,255,.4)}body.light-theme .help-table tbody tr:hover td,body.light-theme .help-table tbody tr:hover .hl-name,body.light-theme .help-table tbody tr:hover td:last-child{background:transparent;color:rgba(20,20,24,.62)}.effect-timeline{position:relative;width:150px;height:14px;display:flex;align-items:center}.effect-track{position:absolute;left:0;right:0;height:2px;border-radius:999px;background:rgba(255,255,255,.12)}.effect-dot{position:absolute;left:0;width:12px;height:12px;border-radius:50%;background:#6c5ce7;box-shadow:0 0 0 3px rgba(108,92,231,.14);animation:effectTimeline 1.8s var(--effect-curve,ease) infinite alternate}.effect-timeline.is-fade .effect-dot{animation-name:effectTimelineFade}.effect-note{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.3);white-space:nowrap}@keyframes effectTimeline{from{left:0}to{left:calc(100% - 12px)}}@keyframes effectTimelineFade{from{left:0;opacity:.2}to{left:calc(100% - 12px);opacity:1}}body.light-theme .effect-track{background:rgba(20,20,24,.14)}body.light-theme .effect-note{color:rgba(20,20,24,.42)}@media(prefers-reduced-motion:reduce){.effect-dot{animation-play-state:paused}}
.effect-dot{animation-duration:3s}.effect-note{font-size:12px;white-space:nowrap}.curve-label-row{display:flex;align-items:center;gap:6px}.curve-help{position:relative;display:inline-flex;height:27px;width:27px;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent;color:rgba(255,255,255,.58);cursor:help}.curve-help img{width:16px;height:16px;display:block}.curve-help:hover{background:transparent;color:#fff}.curve-help-popover{position:absolute;z-index:20;top:calc(100% + 10px);left:50%;width:430px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#242427;box-shadow:0 14px 34px rgba(0,0,0,.38);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-4px);transition:opacity .16s,transform .16s,visibility 0s linear .16s}.curve-help-popover::before{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;background:#242427;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);transform:translateX(-50%) rotate(45deg)}.curve-help:hover .curve-help-popover,.curve-help:focus-within .curve-help-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}.curve-help-title{font-size:12px;font-weight:650;color:rgba(255,255,255,.82);margin-bottom:8px}.curve-help-list{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none}.curve-help-list li{font-size:11px;line-height:1.5;color:rgba(255,255,255,.58);padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}.curve-help-list li:nth-last-child(-n+2){border-bottom:0}.curve-help-list b{color:#a29bfe;font-weight:600;margin-right:4px}body.light-theme .curve-help{color:rgba(20,20,24,.58)}body.light-theme .curve-help:hover{background:transparent;color:#202124}body.light-theme .curve-help-popover{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 14px 34px rgba(0,0,0,.16)}body.light-theme .curve-help-popover::before{background:#fff;border-color:rgba(0,0,0,.12)}body.light-theme .curve-help-title{color:#202124}body.light-theme .curve-help-list li{color:rgba(20,20,24,.62);border-color:rgba(0,0,0,.06)}body.light-theme .curve-help-list b{color:#5c4bd2}
.curve-label-row label{margin-bottom:0}
.curve-help-popover{width:430px;padding:0}.curve-help-table{display:grid;grid-template-columns:120px minmax(0,1fr)}.curve-help-head{padding:12px 14px;font-size:12px;font-weight:600;color:rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.07)}.curve-help-cell{min-height:58px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center}.curve-help-cell:nth-last-child(-n+2){border-bottom:0}.curve-help-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.68)}.curve-help-effect{display:block}.curve-help-effect .effect-timeline{width:100%;height:12px}.curve-help-effect .effect-dot{width:10px;height:10px}.curve-help-effect .effect-note{margin-top:5px;font-size:11px}.curve-help-effect .effect-dot{animation-duration:3s}@keyframes curveHelpTimeline{from{left:0}to{left:calc(100% - 10px)}}.curve-help-effect .effect-dot{animation-name:curveHelpTimeline}.curve-help-effect.is-fade .effect-dot{animation-name:effectTimelineFade}body.light-theme .curve-help-head{color:rgba(20,20,24,.45);border-color:rgba(0,0,0,.07)}body.light-theme .curve-help-cell{border-color:rgba(0,0,0,.06)}body.light-theme .curve-help-name{color:rgba(20,20,24,.68)}
.curve-help-popover{position:fixed;z-index:2200;top:var(--curve-popover-top,50%);left:var(--curve-popover-left,50%);width:310px;transform:translate(5px,-50%)}.curve-help:hover .curve-help-popover,.curve-help:focus-within .curve-help-popover{transform:translate(0,-50%)}.curve-help-popover::before{top:50%;left:-8px;width:8px;height:14px;border:0;clip-path:polygon(100% 0,100% 100%,0 50%);transform:translateY(-50%)}.curve-help-table{grid-template-columns:92px minmax(0,1fr)}.curve-help-head,.curve-help-cell{padding-left:12px;padding-right:12px}.curve-help-effect .effect-timeline{width:160px;max-width:100%}
@media(min-width:781px){.editor-layout-panel{overflow:visible}}
.btn-editor-export{margin-right:auto;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.58)}.btn-editor-export img{width:12px;height:16px;display:block;filter:invert(1);opacity:.72}.btn-editor-export:hover{background:rgba(255,255,255,.08);color:#fff}body.light-theme .btn-editor-export{background:#f5f5f7;border-color:rgba(0,0,0,.14);color:rgba(20,20,24,.68)}body.light-theme .btn-editor-export:hover{background:#eceef2;color:#202124}body.light-theme .btn-editor-export img{filter:none}