/* Live preview runtime. Every catalog card demonstrates a real interaction. */
.effects-live-preview,.sc-preview-stage{position:relative;width:100%;height:100%}.effects-live-preview{overflow:hidden}.sc-preview-stage{display:grid;place-items:center;padding:15px;color:#182039;font-size:11px}.sc-preview-stage button,.sc-preview-stage a{font:inherit}.sc-preview-stage button{border:1px solid #cbd3e4;border-radius:5px;background:#fff;color:#4d59ba;padding:4px 7px;font-weight:800;cursor:pointer}.sc-preview-stage button:hover{background:#eef0ff}.sc-preview-stage small{display:block;color:#7a879c;font-size:9px}
.effects-featured-preview .effects-live-preview{min-height:230px}
.sc-preview-reveal,.sc-preview-stagger,.sc-text-reveal,.sc-aos-preview,.sc-splitting-demo,.sc-timeline-demo{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.sc-preview-reveal span,.sc-preview-reveal b,.sc-preview-stagger span,.sc-text-reveal b,.sc-aos-preview>b,.sc-splitting-demo>b{opacity:0;transform:translateY(14px);transition:opacity 450ms ease,transform 450ms ease}.sc-preview-reveal.is-running span,.sc-preview-reveal.is-running b,.sc-preview-stagger.is-running span,.sc-text-reveal.is-running b,.sc-aos-preview.is-running>b,.sc-splitting-demo.is-running>b{opacity:1;transform:none}.sc-preview-reveal span,.sc-preview-reveal b{font-size:16px}.sc-preview-reveal b{color:#5b5ce2}.sc-preview-reveal button,.sc-text-reveal button,.sc-aos-preview button,.sc-splitting-demo button,.sc-timeline-demo button{flex-basis:100%;margin-top:6px}.sc-preview-stagger{width:130px;align-content:center}.sc-preview-stagger span{display:block;width:100%;height:7px;border-radius:3px;background:#6c72dc}.sc-preview-stagger span:nth-child(2){background:#aab1ff}.sc-preview-stagger span:nth-child(3){background:#d7dcff}.sc-preview-stagger.is-running span:nth-child(2){transition-delay:80ms}.sc-preview-stagger.is-running span:nth-child(3){transition-delay:160ms}
.sc-pointer-surface{--sc-x:50%;--sc-y:50%;display:grid;place-items:center;width:100%;height:78px;border-radius:8px;background:radial-gradient(70px circle at var(--sc-x) var(--sc-y),#aab1ff,transparent 68%),#171c2d;color:#fff;cursor:crosshair;text-align:center}.sc-pointer-surface b{display:block;font-size:11px}.sc-pointer-surface small{color:#c7cee0}.sc-magnetic-surface,.sc-ripple-surface{display:grid;place-items:center;width:100%;height:78px}.sc-magnetic-surface button{transition:transform 180ms cubic-bezier(.2,.8,.2,1);will-change:transform;background:#5b5ce2;color:#fff;border-color:#5b5ce2;padding:8px 13px}.sc-progress-demo{width:85%;text-align:center}.sc-progress-track{height:5px;overflow:hidden;border-radius:99px;background:#dfe4f1}.sc-progress-track span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#5b5ce2;transition:transform 120ms linear}.sc-progress-demo small{margin-top:10px}
.sc-mesh-surface,.sc-blob-demo{position:relative;display:grid;place-items:center;width:100%;height:84px;overflow:hidden;border-radius:8px;background:#161b2b;color:#fff;isolation:isolate}.sc-mesh-surface i{position:absolute;width:92px;height:92px;border-radius:50%;filter:blur(15px);opacity:.75;animation:sc-preview-drift 7s ease-in-out infinite alternate}.sc-mesh-surface i:first-child{background:#706dff;left:4%;top:-35%}.sc-mesh-surface i:nth-child(2){background:#d8ff73;right:3%;bottom:-40%;animation-delay:-2s}.sc-mesh-surface b,.sc-blob-demo b{z-index:1;font-size:11px}.sc-mesh-surface button,.sc-blob-demo button{position:absolute;right:6px;bottom:6px;z-index:2;padding:3px 5px;background:#252c42;color:#eaf0ff;border-color:#48536f}.sc-text-reveal{max-width:160px;font-size:18px;line-height:1}.sc-text-reveal b{display:block;width:100%;text-align:center}.sc-text-reveal b:nth-child(2){transition-delay:100ms;color:#5b5ce2}.sc-aos-preview{max-width:150px}.sc-aos-preview>b{font-size:16px;color:#5b5ce2}.sc-aos-preview small{width:100%;text-align:center}.sc-spring-preview{display:grid;place-items:center;gap:8px}.sc-spring-preview>b{display:grid;place-items:center;width:72px;height:32px;border-radius:7px;background:#5b5ce2;color:#fff;opacity:0}.sc-scroll-demo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;width:100%}.sc-scroll-demo [data-mini-scroll]{display:flex;gap:7px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.sc-scroll-demo [data-mini-scroll] span{flex:0 0 76px;padding:14px 6px;border-radius:6px;background:#e9ecff;color:#515cb6;text-align:center;scroll-snap-align:start;font-size:10px}.sc-scroll-demo button{white-space:nowrap}
.sc-tilt-surface,.sc-lift-surface{display:grid;place-items:center;align-content:center;gap:4px;width:115px;height:74px;border:1px solid #bbc4e2;border-radius:9px;background:linear-gradient(135deg,#eef0ff,#fff);box-shadow:0 11px 20px #5b5ce21c;transition:transform 180ms ease,box-shadow 180ms ease}.sc-tilt-surface b,.sc-lift-surface b{font-size:11px}.sc-tilt-surface small,.sc-lift-surface small{font-size:9px}.sc-lift-surface.is-lifted{transform:translateY(-5px);box-shadow:0 18px 28px #5b5ce234}.sc-ripple-surface button{position:relative;overflow:hidden;background:#151a29;color:#fff;border-color:#151a29;padding:9px 15px}.sc-ripple-mark{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;opacity:.42;transform:scale(0);animation:sc-preview-ripple 600ms ease-out forwards;pointer-events:none}.sc-accordion-demo{width:100%;padding:0 9px}.sc-accordion-demo>button{display:flex;justify-content:space-between;width:100%;text-align:left}.sc-accordion-demo>button span{transition:transform 180ms ease}.sc-accordion-demo>button[aria-expanded=true] span{transform:rotate(45deg)}.sc-accordion-demo [data-accordion-panel]{padding:9px 4px;color:#687287;font-size:10px}.sc-tooltip-demo{display:flex;align-items:center;gap:10px;color:#687287}.sc-tooltip-demo button{position:relative;width:27px;height:27px;padding:0;border-radius:50%;background:#5b5ce2;color:#fff}.sc-tooltip-demo button::after{content:'More information';position:absolute;left:50%;bottom:calc(100% + 7px);transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;padding:5px 7px;border-radius:4px;background:#151a29;color:#fff;font-size:9px;transition:opacity 150ms ease,transform 150ms ease}.sc-tooltip-demo button:hover::after,.sc-tooltip-demo button:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.sc-underline-demo{--sc-underline-x:0px;--sc-underline-width:0px;position:relative;display:flex;gap:15px;padding-bottom:7px}.sc-underline-demo::after{content:'';position:absolute;bottom:0;left:var(--sc-underline-x);width:var(--sc-underline-width);height:2px;background:#5b5ce2;transition:left 180ms ease,width 180ms ease}.sc-underline-demo a{color:#5b5ce2;text-decoration:none;font-size:10px}.sc-tabs-demo{width:100%;text-align:center}.sc-tabs-demo [role=tablist]{display:flex;justify-content:center;gap:4px}.sc-tabs-demo [role=tab]{padding:4px 12px}.sc-tabs-demo [aria-selected=true]{background:#5b5ce2;color:#fff}.sc-tabs-demo [role=tabpanel]{margin-top:10px;color:#5b5ce2;font-weight:700}.sc-carousel-demo,.sc-gallery-demo,.sc-embla-demo{position:relative;width:100%;padding:0 15px}.sc-carousel-viewport{overflow:hidden}.sc-carousel-track{display:flex;width:300%;transition:transform 300ms ease}.sc-carousel-track span{display:grid;place-items:center;width:33.333%;height:60px;margin:0 3px;border-radius:7px;background:#e8ebff;color:#5b5ce2;font-size:18px;font-weight:800}.sc-carousel-demo>button,.sc-gallery-demo>button{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:22px;height:22px;padding:0;border-radius:50%}.sc-carousel-demo>button:first-of-type,.sc-gallery-demo>button:first-of-type{left:0}.sc-carousel-demo>button:last-of-type,.sc-gallery-demo>button:last-of-type{right:0}.sc-embla-demo small{margin-top:5px;text-align:center}.sc-count-demo{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;justify-content:center}.sc-count-demo strong{width:100%;color:#5b5ce2;font-size:26px;line-height:1}.sc-count-demo span{color:#7a879c}.sc-count-demo button{flex-basis:100%;margin-top:4px}.sc-type-demo{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;color:#5b5ce2;font-weight:800}.sc-type-demo span{min-height:18px}.sc-type-demo i{width:1px;height:17px;background:#5b5ce2;animation:sc-preview-blink 800ms steps(2) infinite}.sc-type-demo button{flex-basis:100%;margin-top:6px}
.sc-marquee-demo,.sc-shimmer-demo{position:relative;width:100%;overflow:hidden}.sc-marquee-track{display:flex;width:max-content;color:#5b5ce2;font-weight:800;animation:sc-preview-marquee 7s linear infinite}.sc-preview-stage.is-paused .sc-marquee-track{animation-play-state:paused}.sc-marquee-demo button,.sc-shimmer-demo button{position:absolute;right:0;bottom:0}.sc-shimmer-demo{display:grid;gap:7px;width:100%;padding:11px;border-radius:7px;background:#e7ebf4}.sc-shimmer-demo div{height:8px;border-radius:3px;background:linear-gradient(90deg,#d8deeb,#fff,#d8deeb);background-size:200% 100%;animation:sc-preview-shimmer 1.5s linear infinite}.sc-shimmer-demo div:nth-child(2){width:78%}.sc-shimmer-demo div:nth-child(3){width:52%}.sc-preview-stage.is-paused .sc-shimmer-demo div{animation-play-state:paused}.sc-blob-demo i{position:absolute;width:82px;height:62px;border-radius:62% 38% 41% 59% / 53% 44% 56% 47%;background:#9da7ff;filter:blur(3px);animation:sc-preview-blob 7s ease-in-out infinite alternate}.sc-preview-stage.is-paused .sc-blob-demo i{animation-play-state:paused}.sc-sweep-demo a{padding-bottom:3px;color:#5b5ce2;text-decoration:none;background:linear-gradient(#5b5ce2,#5b5ce2) 0 100%/0 2px no-repeat;transition:background-size 220ms ease}.sc-sweep-demo a:hover,.sc-sweep-demo a:focus-visible{background-size:100% 2px}.sc-zoom-demo{display:grid;place-items:center;width:120px;height:74px;overflow:hidden;border-radius:8px;background:#cfd4ff;cursor:zoom-in}.sc-zoom-demo i{position:absolute;width:100%;height:100%;background:radial-gradient(circle at 30% 30%,#fff 0 8%,transparent 9%),linear-gradient(135deg,#7e85ef,#d8ff73);transition:transform 350ms ease}.sc-zoom-demo:hover i{transform:scale(1.12)}.sc-zoom-demo b{z-index:1;color:#151a29;font-size:10px}.sc-parallax-demo{position:relative;display:grid;place-items:center;width:130px;height:74px;overflow:hidden;border-radius:8px;background:#171c2d;color:#fff}.sc-parallax-demo i{position:absolute;width:66px;height:66px;border-radius:50%;background:#aab1ff;transition:transform 180ms ease}.sc-parallax-demo b,.sc-parallax-demo small{z-index:1}.sc-parallax-demo b{font-size:14px}.sc-parallax-demo small{color:#d1d6e6}.sc-toast-demo{display:grid;place-items:center;width:100%;height:75px}.sc-toast-demo>button{background:#5b5ce2;color:#fff;border-color:#5b5ce2}.sc-toast-demo [data-toast]{position:absolute;right:8px;bottom:8px;padding:7px 8px;border-radius:5px;background:#151a29;color:#fff;box-shadow:0 8px 20px #11131838;font-size:10px}.sc-toast-demo [data-toast-close]{margin-left:5px;padding:0;border:0;background:transparent;color:#fff}.sc-toggle-demo{display:flex;align-items:center;gap:8px;cursor:pointer}.sc-toggle-demo input{position:absolute;opacity:0}.sc-toggle-demo i{position:relative;width:37px;height:21px;border-radius:99px;background:#cbd3e1;transition:background 180ms ease}.sc-toggle-demo i::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform 180ms ease}.sc-toggle-demo input:checked+i{background:#5b5ce2}.sc-toggle-demo input:checked+i::after{transform:translateX(16px)}.sc-toggle-demo input:focus-visible+i{outline:3px solid #aab1ff;outline-offset:2px}.sc-timeline-demo{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:8px 4px 27px}.sc-timeline-demo>i{position:absolute;left:13%;right:13%;top:13px;height:2px;background:#d9deec}.sc-timeline-demo>i::after{content:'';display:block;width:0;height:100%;background:#5b5ce2;transition:width 700ms ease}.sc-timeline-demo.is-running>i::after{width:100%}.sc-timeline-demo>span{z-index:1;padding:4px 5px;border-radius:4px;background:#edf0ff;color:#5b5ce2;font-size:9px}.sc-flip-demo{width:118px;height:64px;padding:0;border:0;background:transparent;perspective:600px}.sc-flip-demo span{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 500ms ease}.sc-flip-demo b,.sc-flip-demo strong{position:absolute;inset:0;display:grid;place-items:center;border-radius:8px;background:#5b5ce2;color:#fff;backface-visibility:hidden}.sc-flip-demo strong{transform:rotateY(180deg);background:#d8ff73;color:#151a29}.sc-flip-demo.is-flipped span{transform:rotateY(180deg)}.sc-splitting-demo{gap:3px;font-size:22px}.sc-splitting-demo>b{transition-delay:calc(var(--sc-char-index,0) * 70ms)}.sc-splitting-demo>b:nth-child(2){--sc-char-index:1}.sc-splitting-demo>b:nth-child(3){--sc-char-index:2}.sc-splitting-demo>b:nth-child(4){--sc-char-index:3}.sc-splitting-demo button{flex-basis:100%}
@keyframes sc-preview-drift{to{transform:translate(25px,-11px) scale(1.15)}}@keyframes sc-preview-ripple{to{opacity:0;transform:scale(18)}}@keyframes sc-preview-blink{50%{opacity:0}}@keyframes sc-preview-marquee{to{transform:translateX(-50%)}}@keyframes sc-preview-shimmer{to{background-position:-200% 0}}@keyframes sc-preview-blob{to{border-radius:36% 64% 57% 43% / 41% 52% 48% 59%;transform:rotate(18deg) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.sc-preview-reveal span,.sc-preview-reveal b,.sc-preview-stagger span,.sc-text-reveal b,.sc-aos-preview>b,.sc-splitting-demo>b{opacity:1;transform:none;transition:none}.sc-magnetic-surface button,.sc-tilt-surface,.sc-lift-surface,.sc-carousel-track,.sc-flip-demo span,.sc-underline-demo::after,.sc-sweep-demo a,.sc-zoom-demo i,.sc-parallax-demo i,.sc-toggle-demo i,.sc-toggle-demo i::after{transition:none}.sc-mesh-surface i,.sc-marquee-track,.sc-shimmer-demo div,.sc-blob-demo i,.sc-type-demo i{animation:none}.sc-timeline-demo>i::after{transition:none;width:100%}}
.sc-gallery-track{display:flex;width:300%;transition:transform 300ms ease}.sc-gallery-track span{display:grid;place-items:center;width:33.333%;height:60px;margin:0 3px;border-radius:7px;background:#e8ebff;color:#5b5ce2;font-size:18px;font-weight:800}