.css-demo{border:1px solid rgba(255,255,255,.08);border-radius:.75rem;overflow:hidden;margin:1.5rem 0;background:#0c0c0f}.css-demo-chrome{display:flex;align-items:center;justify-content:space-between;padding:.625rem 1rem;background:#18181b;border-bottom:1px solid rgba(255,255,255,.06)}.css-demo-dots{display:flex;gap:.375rem}.css-demo-dots .dot{width:.5rem;height:.5rem;border-radius:50%}.css-demo-dots .red{background:#ef444499}.css-demo-dots .yellow{background:#eab30899}.css-demo-dots .green{background:#22c55e99}.css-demo-filename{font-size:.6875rem;font-family:JetBrains Mono,monospace;color:#71717a}.css-demo-badge{font-size:.5625rem;font-weight:700;color:#a78bfa;background:#a78bfa1a;padding:.125rem .5rem;border-radius:9999px;letter-spacing:.05em}.css-demo-tabs{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.06);overflow-x:auto;scrollbar-width:none}.css-demo-tabs::-webkit-scrollbar{display:none}.css-demo-tab{padding:.625rem 1rem;font-size:.75rem;font-weight:500;color:#71717a;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;font-family:inherit}.css-demo-tab:hover{color:#a1a1aa}.css-demo-tab.active{color:#fafafa;border-bottom-color:#6366f1}.css-demo-content{padding:1.5rem}.css-demo-panel{display:none}.css-demo-panel.active{display:block}.css-demo-preview{display:flex;flex-direction:column;align-items:center;gap:1.25rem}.css-demo-hint{font-size:.6875rem;color:#52525b;text-align:center;margin:0}.css-demo-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.css-demo-control-btn{padding:.5rem 1rem;min-height:2.75rem;font-size:.6875rem;font-weight:600;color:#a5b4fc;background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:.375rem;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}.css-demo-control-btn:hover{background:#6366f133;border-color:#6366f14d}.demo-btn-transition{padding:.75rem 2rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}.demo-btn-transition:hover{background:#2563eb;transform:translateY(-3px);box-shadow:0 8px 20px #3b82f64d}.demo-btn-no-transition{padding:.75rem 2rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;font-family:inherit}.demo-btn-no-transition:hover{background:#2563eb;transform:translateY(-3px);box-shadow:0 8px 20px #3b82f64d}.css-demo-versus{display:flex;gap:2rem;margin-top:.5rem}.versus-col{display:flex;flex-direction:column;align-items:center;gap:.5rem}.versus-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.125rem .5rem;border-radius:9999px}.versus-label.bad{color:#f87171;background:#ef44441a}.versus-label.good{color:#34d399;background:#34d3991a}.keyframe-stage{width:100%;min-height:120px;display:flex;align-items:center;justify-content:center;background:#ffffff05;border-radius:.5rem;border:1px dashed rgba(255,255,255,.06)}.keyframe-box{padding:1rem 2rem;background:#6366f1;color:#fff;border-radius:.75rem;font-weight:700;font-size:1rem}@keyframes demo-fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-20px)}50%{transform:translateY(0)}75%{transform:translateY(-10px)}}@keyframes demo-shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-6px)}30%,70%{transform:translate(6px)}}@keyframes demo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.keyframe-box.anim-fadein{animation:demo-fadeInUp .6s ease-out}.keyframe-box.anim-bounce{animation:demo-bounce .8s ease}.keyframe-box.anim-shake{animation:demo-shake .5s ease}.keyframe-box.anim-spin{animation:demo-spin .6s ease-in-out}.stagger-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem;width:100%;max-width:360px}@keyframes demo-stagger-in{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.stagger-card{padding:1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;text-align:center;font-size:.75rem;font-weight:600;color:#a1a1aa;opacity:0;animation:demo-stagger-in .4s ease-out forwards;animation-delay:calc(var(--i) * .1s)}.stagger-grid.reset .stagger-card{animation:none;opacity:0}.hover-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%;max-width:320px}.hover-card{padding:1.25rem 1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.625rem;text-align:center;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}.hover-label{display:block;font-size:.875rem;font-weight:700;color:#fafafa;margin-bottom:.25rem}.hover-code{display:block;font-size:.625rem;font-family:JetBrains Mono,monospace;color:#52525b}.hover-lift:hover{transform:translateY(-8px);box-shadow:0 12px 24px #0000004d}.hover-scale:hover{transform:scale(1.05)}.hover-glow:hover{box-shadow:0 0 24px #6366f166;border-color:#6366f14d}.hover-border:hover{border-color:#6366f1;background:#6366f10d}.timing-tracks{width:100%;display:flex;flex-direction:column;gap:.625rem}.timing-row{display:flex;align-items:center;gap:.75rem}.timing-name{font-size:.6875rem;font-family:JetBrains Mono,monospace;color:#71717a;width:5.5rem;text-align:right;flex-shrink:0}.timing-track{flex:1;height:1.75rem;background:#ffffff08;border-radius:9999px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06)}@keyframes demo-slide{0%{left:0}to{left:calc(100% - 1.25rem)}}.timing-ball{position:absolute;top:50%;transform:translateY(-50%);left:0;width:1.25rem;height:1.25rem;background:#6366f1;border-radius:50%;animation:demo-slide 1.5s forwards}.timing-tracks.reset .timing-ball{animation:none;left:0}.css-demo-tabs{position:relative}.css-demo-tabs:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2rem;background:linear-gradient(to right,transparent,#0c0c0f);pointer-events:none}@media(prefers-reduced-motion:reduce){.css-demo *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:480px){.stagger-grid{grid-template-columns:repeat(2,1fr)}.hover-showcase{grid-template-columns:1fr;max-width:200px}.css-demo-versus{flex-direction:column;gap:1rem}.timing-name{width:4rem;font-size:.5625rem}}.motion-trans-demo{position:relative;border:1px solid var(--demo-border, rgba(255,255,255,.08));border-radius:.625rem;background:var(--demo-bg, #0c0c0f);padding:2rem 1.25rem 1.25rem;margin:1rem 0 1.5rem;max-width:440px;min-height:150px;display:flex;flex-direction:column;align-items:center}.motion-trans-label{position:absolute;top:.5rem;left:.75rem;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#22d3ee;background:#06b6d41a;padding:.1rem .4rem;border-radius:9999px}.motion-trans-title{font-size:.75rem;font-weight:600;color:var(--demo-text-secondary, #a1a1aa);margin:0 0 .75rem;text-align:center}.motion-trans-row{display:flex;gap:2rem;align-items:center;justify-content:center}.motion-trans-col{display:flex;flex-direction:column;align-items:center;gap:.5rem}.motion-trans-tag{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.125rem .5rem;border-radius:9999px}.motion-trans-tag.bad{color:#f87171;background:#ef44441a}.motion-trans-tag.good{color:#34d399;background:#34d3991a}.motion-trans-btn{padding:.625rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;font-size:.8125rem;font-weight:600;cursor:pointer;font-family:inherit}.motion-trans-btn--raw:hover{background:#2563eb;transform:translateY(-3px);box-shadow:0 8px 20px #3b82f64d}.motion-trans-btn--smooth{transition:background .25s ease,transform .25s ease,box-shadow .25s ease}.motion-trans-btn--smooth:hover{background:#2563eb;transform:translateY(-3px);box-shadow:0 8px 20px #3b82f64d}.motion-trans-hint{font-size:.625rem;color:var(--demo-text-faint, #52525b);text-align:center;margin:.75rem 0 0}@media(max-width:480px){.motion-trans-row{flex-direction:column;gap:1rem}}.motion-kf-demo{position:relative;border:1px solid var(--demo-border, rgba(255,255,255,.08));border-radius:.625rem;background:var(--demo-bg, #0c0c0f);padding:2rem 1.25rem 1.25rem;margin:1rem 0 1.5rem;max-width:380px;min-height:150px;display:flex;flex-direction:column;align-items:center;gap:.625rem}.motion-kf-label{position:absolute;top:.5rem;left:.75rem;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#22d3ee;background:#06b6d41a;padding:.1rem .4rem;border-radius:9999px}.motion-kf-stage{width:100%;min-height:72px;display:flex;align-items:center;justify-content:center;background:var(--demo-bg-surface, rgba(255,255,255,.02));border-radius:.5rem;border:1px dashed var(--demo-border, rgba(255,255,255,.08))}.motion-kf-box{padding:.625rem 1.5rem;background:#6366f1;color:#fff;border-radius:.5rem;font-weight:700;font-size:.875rem}@keyframes motion-kf-fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.motion-kf-box.motion-kf-playing{animation:motion-kf-fadeInUp .6s ease-out}.motion-kf-play{padding:.5rem .75rem;font-size:.6875rem;font-weight:600;color:#a5b4fc;background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:.375rem;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}.motion-kf-play:hover{background:#6366f133;border-color:#6366f14d}.motion-kf-hint{font-size:.625rem;color:var(--demo-text-faint, #52525b);text-align:center;margin:0}.motion-hv-demo{position:relative;border:1px solid var(--demo-border, rgba(255,255,255,.08));border-radius:.625rem;background:var(--demo-bg, #0c0c0f);padding:2rem 1.25rem 1.25rem;margin:1rem 0 1.5rem;max-width:480px;min-height:150px;display:flex;flex-direction:column;align-items:center}.motion-hv-label{position:absolute;top:.5rem;left:.75rem;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#22d3ee;background:#06b6d41a;padding:.1rem .4rem;border-radius:9999px}.motion-hv-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.motion-hv-card{width:120px;padding:1rem .75rem;background:var(--demo-bg-surface, rgba(255,255,255,.02));border:1px solid var(--demo-border, rgba(255,255,255,.08));border-radius:.5rem;text-align:center;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.motion-hv-name{display:block;font-size:.8125rem;font-weight:700;color:var(--demo-text, #fafafa);margin-bottom:.25rem}.motion-hv-code{display:block;font-size:.5625rem;font-family:Geist Mono,monospace;color:var(--demo-text-faint, #52525b);background:none!important;padding:0!important;border:none!important}.motion-hv-lift:hover{transform:translateY(-6px);box-shadow:0 10px 24px #00000059}.motion-hv-scale:hover{transform:scale(1.06)}.motion-hv-glow:hover{box-shadow:0 0 20px #6366f166;border-color:#6366f159}.motion-hv-hint{font-size:.625rem;color:var(--demo-text-faint, #52525b);text-align:center;margin:.75rem 0 0}@media(max-width:480px){.motion-hv-card{width:100px}}.motion-sc-demo{position:relative;border:1px solid var(--demo-border, rgba(255,255,255,.08));border-radius:.625rem;background:var(--demo-bg, #0c0c0f);padding:2rem 1.25rem 1.25rem;margin:1rem 0 1.5rem;max-width:420px;display:flex;flex-direction:column;align-items:center}.motion-sc-label{position:absolute;top:.5rem;left:.75rem;font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#22d3ee;background:#06b6d41a;padding:.1rem .4rem;border-radius:9999px}.motion-sc-title{font-size:.75rem;font-weight:600;color:var(--demo-text-secondary, #a1a1aa);margin:0 0 .5rem;text-align:center}.motion-sc-viewport{width:100%;height:200px;overflow-y:auto;border:1px solid var(--demo-border, rgba(255,255,255,.08));border-radius:.5rem;background:var(--demo-bg-surface, rgba(255,255,255,.02));scroll-behavior:smooth}.motion-sc-viewport::-webkit-scrollbar{width:4px}.motion-sc-viewport::-webkit-scrollbar-track{background:transparent}.motion-sc-viewport::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:9999px}.motion-sc-spacer{height:120px;display:flex;align-items:center;justify-content:center}.motion-sc-arrow{font-size:.625rem;color:var(--demo-text-faint, #52525b);animation:motion-sc-bounce 1.5s ease-in-out infinite}@keyframes motion-sc-bounce{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}.motion-sc-gap{height:80px}.motion-sc-end{height:60px}.motion-sc-item{margin:0 1rem;padding:.75rem 1rem;background:#6366f114;border:1px solid rgba(99,102,241,.15);border-radius:.5rem;display:flex;align-items:center;gap:.75rem;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.motion-sc-item.motion-sc-visible{opacity:1;transform:translateY(0)}.motion-sc-icon{width:28px;height:28px;background:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;color:#fff;flex-shrink:0}.motion-sc-text{font-size:.8125rem;font-weight:600;color:#e4e4e7}.motion-sc-hint{font-size:.625rem;color:var(--demo-text-faint, #52525b);text-align:center;margin:.75rem 0 0}