/* 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}

/* Advanced native recipe previews. These stay local, deterministic, and dependency-free. */
.sc-scrub-demo{--sc-scrub-progress:.18;position:relative;display:grid;place-items:center;gap:3px;width:100%;height:82px;overflow:hidden;border-radius:8px;background:#172033;color:#fff}.sc-scrub-demo i{position:absolute;width:40px;height:40px;border-radius:50%;background:#8b5cf6;transform:translateX(calc((var(--sc-scrub-progress) - .5) * 115px)) scale(calc(.75 + var(--sc-scrub-progress) * .45));box-shadow:0 0 28px #8b5cf688;transition:transform 350ms ease}.sc-scrub-demo b,.sc-scrub-demo small,.sc-scrub-demo button{z-index:1}.sc-scrub-demo small{color:#dbe6ff}.sc-scrub-demo button{position:absolute;right:6px;bottom:6px;padding:3px 5px;background:#252c42;color:#eaf0ff;border-color:#48536f}
.sc-sticky-demo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;padding:10px;border-radius:8px;background:#edf4ff;color:#155eef}.sc-sticky-demo>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#155eef;color:#fff;font-size:9px;font-weight:800}.sc-sticky-demo b{font-size:12px}.sc-sticky-demo button{padding:3px 5px}
.sc-highlight-demo{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.sc-highlight-demo button{padding:5px 7px;color:#66758a;background:#fff}.sc-highlight-demo button[aria-current=location]{background:#155eef;border-color:#155eef;color:#fff}
.sc-draw-demo{display:grid;justify-items:center;gap:3px}.sc-draw-demo svg{width:150px;height:55px;color:#5b5ce2}.sc-draw-demo path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;path-length:1}.sc-draw-demo.is-drawn path{animation:sc-preview-draw 800ms cubic-bezier(.2,.8,.2,1) forwards}.sc-draw-demo button{padding:3px 6px}
.sc-mask-demo{display:grid;justify-items:center;gap:8px}.sc-mask-demo>b{display:block;clip-path:inset(0 100% 0 0);transform:translateX(-8px);font-size:14px}.sc-mask-demo.is-revealed>b{animation:sc-preview-mask 700ms cubic-bezier(.2,.8,.2,1) forwards}.sc-mask-demo button{padding:3px 6px}
.sc-gradient-text-demo{display:grid;justify-items:center;gap:8px}.sc-gradient-text-demo>b{color:#155eef;background:linear-gradient(100deg,#155eef,#8b5cf6,#0ea5a1,#155eef);background-size:220% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sc-preview-gradient 6s linear infinite;font-size:16px}.sc-gradient-text-demo button{padding:3px 6px}
.sc-scramble-demo{display:grid;justify-items:center;gap:8px}.sc-scramble-demo>b{min-width:100px;color:#155eef;font:800 15px ui-monospace,monospace;letter-spacing:.08em;text-align:center}.sc-scramble-demo button{padding:3px 6px}
.sc-ticker-demo{display:grid;justify-items:center;gap:3px}.sc-ticker-demo strong{color:#155eef;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}.sc-ticker-demo button{margin-top:5px;padding:3px 6px}
.sc-ring-demo{display:grid;justify-items:center;gap:8px}.sc-ring-demo [data-ring-circle]{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:conic-gradient(#155eef var(--sc-ring-value,0%),#e2e8f0 0);position:relative}.sc-ring-demo [data-ring-circle]::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}.sc-ring-demo [data-ring-circle] strong{position:relative;z-index:1;color:#155eef;font-size:12px}.sc-ring-demo button{padding:3px 6px}
.sc-trail-demo,.sc-lens-demo{--sc-x:50%;--sc-y:50%;position:relative;display:grid;place-items:center;align-content:center;gap:3px;width:100%;height:82px;overflow:hidden;border-radius:8px;background:#171c2d;color:#fff;cursor:crosshair}.sc-trail-demo::before,.sc-trail-demo::after{content:"";position:absolute;left:var(--sc-x);top:var(--sc-y);width:11px;height:11px;border-radius:50%;background:#8b5cf6;transform:translate(-50%,-50%);box-shadow:0 0 18px #8b5cf6aa;transition:left 90ms ease,top 90ms ease}.sc-trail-demo::after{width:34px;height:34px;background:#155eef;opacity:.2;filter:blur(3px);transition-duration:420ms}.sc-trail-demo b,.sc-trail-demo small{z-index:1}.sc-trail-demo small,.sc-lens-demo small{color:#dbe6ff}
.sc-lens-demo::after{content:"";position:absolute;inset:0;background:radial-gradient(90px circle at var(--sc-x) var(--sc-y),rgba(255,255,255,.8),transparent 65%),linear-gradient(135deg,#155eef,#8b5cf6);mix-blend-mode:screen;pointer-events:none}.sc-lens-demo i{position:absolute;inset:0;background:linear-gradient(135deg,#0ea5a1,#8b5cf6);opacity:.75}.sc-lens-demo b,.sc-lens-demo small{z-index:1}
.sc-tilt-stack-demo{--sc-rotate-x:0deg;--sc-rotate-y:0deg;display:grid;place-items:center;width:130px;height:78px;perspective:700px}.sc-tilt-stack-demo::before,.sc-tilt-stack-demo::after{content:"";grid-area:1/1;width:92px;height:56px;border-radius:9px;background:#c7d2fe;transform:translateZ(-25px) translate(12px,8px);opacity:.45}.sc-tilt-stack-demo::after{transform:translateZ(-12px) translate(6px,4px);opacity:.7;background:#a5b4fc}.sc-tilt-stack-demo>div{grid-area:1/1;display:grid;place-items:center;align-content:center;gap:3px;width:104px;height:62px;border-radius:9px;background:linear-gradient(135deg,#155eef,#8b5cf6);color:#fff;transform:rotateX(var(--sc-rotate-x)) rotateY(var(--sc-rotate-y));transform-style:preserve-3d;transition:transform 180ms ease}.sc-tilt-stack-demo>div b,.sc-tilt-stack-demo>div small{transform:translateZ(20px)}.sc-tilt-stack-demo>div small{color:#dbe6ff}
.sc-stack-demo{position:relative;display:grid;place-items:center;width:115px;height:72px}.sc-stack-demo>i{grid-area:1/1;display:grid;place-items:center;width:84px;height:54px;border-radius:8px;background:#155eef;color:#fff;font-style:normal;font-weight:800;transition:transform 280ms ease,opacity 280ms ease}.sc-stack-demo>i:nth-child(2){transform:translate(8px,7px) scale(.94);opacity:.7;background:#8b5cf6}.sc-stack-demo>i:nth-child(3){transform:translate(16px,14px) scale(.88);opacity:.45;background:#0ea5a1}.sc-stack-demo[data-stack-index="1"]>i:first-child{transform:translate(8px,7px) scale(.94);opacity:.7}.sc-stack-demo[data-stack-index="1"]>i:nth-child(2){transform:translate(16px,14px) scale(.88);opacity:.45}.sc-stack-demo[data-stack-index="1"]>i:nth-child(3){transform:none;opacity:1}.sc-stack-demo[data-stack-index="2"]>i:first-child{transform:translate(16px,14px) scale(.88);opacity:.45}.sc-stack-demo[data-stack-index="2"]>i:nth-child(2){transform:none;opacity:1}.sc-stack-demo[data-stack-index="2"]>i:nth-child(3){transform:translate(8px,7px) scale(.94);opacity:.7}.sc-stack-demo button{position:absolute;bottom:-3px;padding:3px 5px}
.sc-grid-demo{--sc-grid-x:0px;--sc-grid-y:0px;position:relative;display:grid;place-items:center;align-content:center;gap:3px;width:100%;height:82px;overflow:hidden;border-radius:8px;background:#111827;color:#fff;cursor:crosshair}.sc-grid-demo::before{content:"";position:absolute;inset:-35%;background-image:linear-gradient(#94a3b833 1px,transparent 1px),linear-gradient(90deg,#94a3b833 1px,transparent 1px);background-size:26px 26px;transform:perspective(260px) rotateX(54deg) translate(var(--sc-grid-x),var(--sc-grid-y));transform-origin:center bottom}.sc-grid-demo b,.sc-grid-demo small{z-index:1}.sc-grid-demo small{color:#cbd5e1}
.sc-dialog-demo{display:grid;justify-items:center;width:100%;position:relative}.sc-dialog-demo>[role=dialog]{position:absolute;z-index:3;display:grid;gap:6px;top:0;width:145px;padding:10px;border:1px solid #dce3ee;border-radius:8px;background:#fff;box-shadow:0 18px 45px #0f172a33;color:#172033}.sc-dialog-demo>[role=dialog] p{margin:0;color:#66758a;font-size:10px}.sc-dialog-demo>[role=dialog] button{justify-self:end;padding:3px 6px}
.sc-palette-demo{position:relative}.sc-palette-demo>[data-palette-dialog]{position:absolute;z-index:3;top:30px;left:50%;display:grid;gap:4px;width:140px;padding:7px;transform:translateX(-50%);border:1px solid #dce3ee;border-radius:8px;background:#fff;box-shadow:0 18px 45px #0f172a33}.sc-palette-demo input{width:100%;padding:4px;border:1px solid #cbd5e1;border-radius:4px;font-size:10px}.sc-palette-demo [data-palette-item]{padding:4px;text-align:left}.sc-chips-demo{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.sc-chips-demo button[aria-pressed=true]{background:#155eef;border-color:#155eef;color:#fff}.sc-chips-demo small{width:100%;text-align:center;color:#66758a}
.sc-range-demo,.sc-float-demo,.sc-strength-demo{display:grid;gap:6px;width:145px;color:#172033}.sc-range-demo span{font-size:10px;font-weight:800}.sc-range-demo input{width:100%;accent-color:#155eef}.sc-range-demo output{color:#155eef;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}.sc-float-demo{position:relative}.sc-float-demo input{width:100%;padding:13px 7px 5px;border:1px solid #cbd5e1;border-radius:6px;background:#fff}.sc-float-demo span{position:absolute;left:7px;top:10px;color:#64748b;font-size:10px;pointer-events:none;transition:transform 150ms ease,color 150ms ease,background 150ms ease}.sc-float-demo input:focus+span,.sc-float-demo input:not(:placeholder-shown)+span{transform:translateY(-9px) scale(.78);padding-inline:2px;background:#fff;color:#155eef}.sc-strength-demo input{width:100%;padding:7px;border:1px solid #cbd5e1;border-radius:6px;font-size:10px}.sc-strength-demo [role=progressbar]{height:5px;overflow:hidden;border-radius:99px;background:#e2e8f0}.sc-strength-demo [role=progressbar] i{display:block;width:var(--sc-strength,0%);height:100%;background:#22c55e;transition:width 180ms ease}.sc-strength-demo small{color:#66758a}
.sc-dropzone-demo{display:grid;place-items:center;align-content:center;gap:4px;width:150px;height:67px;border:1px dashed #8fa4c7;border-radius:8px;background:#f8fbff;color:#155eef;text-align:center;transition:border-color 150ms ease,background 150ms ease}.sc-dropzone-demo.is-dragging{border-color:#155eef;background:#edf4ff}.sc-dropzone-demo small{color:#66758a}.sc-skeleton-live{display:grid;gap:7px;width:145px}.sc-skeleton-live [data-skeleton]{height:34px;border-radius:6px;background:linear-gradient(90deg,#e2e8f0,#fff,#e2e8f0);background-size:200% 100%;animation:sc-preview-shimmer 1.4s linear infinite}.sc-skeleton-live [data-content]{display:grid;gap:4px;min-height:34px;padding:7px;border-radius:6px;background:#edf4ff;color:#155eef}.sc-skeleton-live [data-content] small{color:#66758a}.sc-skeleton-live:not(.is-loaded) [data-content]{display:none}.sc-skeleton-live.is-loaded [data-skeleton]{display:none}.sc-skeleton-live button{justify-self:center;padding:3px 6px}
.sc-image-reveal-demo{position:relative;display:grid;place-items:center;width:145px;height:72px;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,#155eef,#8b5cf6);color:#fff;clip-path:inset(0 100% 0 0)}.sc-image-reveal-demo.is-revealed{animation:sc-preview-image 700ms cubic-bezier(.2,.8,.2,1) forwards}.sc-image-reveal-demo i{position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,#d8ff73 0 7%,transparent 8%),linear-gradient(135deg,#155eef,#8b5cf6)}.sc-image-reveal-demo b{z-index:1}.sc-image-reveal-demo button{position:absolute;z-index:2;right:5px;bottom:5px;padding:3px 5px;background:#fff;color:#155eef}
.sc-video-demo{position:relative;display:grid;place-items:center;width:145px;height:72px;overflow:hidden;border-radius:8px;background:#172033;color:#fff}.sc-video-demo i{position:absolute;inset:-20%;background:linear-gradient(120deg,#155eef,#8b5cf6,#0ea5a1);opacity:.75}.sc-video-demo.is-playing i{animation:sc-preview-video 2s linear infinite alternate}.sc-video-demo b,.sc-video-demo button{z-index:1}.sc-video-demo button{position:absolute;right:5px;bottom:5px;padding:3px 5px}
.sc-theme-demo{display:grid;place-items:center;gap:8px;width:145px;padding:14px;border-radius:8px;background:#fff;color:#172033;transition:background 180ms ease,color 180ms ease}.sc-theme-demo.is-dark{background:#172033;color:#fff}.sc-theme-demo button{padding:3px 6px}
.sc-copy-feedback-demo{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px}.sc-copy-feedback-demo code{padding:5px;border-radius:4px;background:#edf4ff;color:#155eef;font-size:10px}.sc-copy-feedback-demo button{padding:3px 6px}.sc-copy-feedback-demo small{width:100%;color:#16805d;text-align:center}
.sc-reading-demo{display:grid;justify-items:center;gap:8px;width:145px}.sc-reading-demo strong{color:#155eef}.sc-reading-demo>div{width:100%;height:5px;overflow:hidden;border-radius:99px;background:#e2e8f0}.sc-reading-demo>div i{display:block;width:0;height:100%;background:#155eef;transition:width 180ms ease}.sc-reading-demo button{padding:3px 6px}
@keyframes sc-preview-draw{to{stroke-dashoffset:0}}@keyframes sc-preview-mask{to{clip-path:inset(0);transform:none}}@keyframes sc-preview-gradient{to{background-position:220% center}}@keyframes sc-preview-image{to{clip-path:inset(0)}}@keyframes sc-preview-video{to{transform:translate(10%,4%) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.sc-scrub-demo i,.sc-tilt-stack-demo>div,.sc-float-demo span,.sc-strength-demo [role=progressbar] i,.sc-dropzone-demo,.sc-theme-demo,.sc-reading-demo>div i{transition:none}.sc-draw-demo.is-drawn path,.sc-mask-demo.is-revealed>b,.sc-image-reveal-demo.is-revealed,.sc-gradient-text-demo>b,.sc-skeleton-live [data-skeleton],.sc-video-demo.is-playing i{animation:none}.sc-draw-demo path{stroke-dashoffset:0}.sc-mask-demo>b,.sc-image-reveal-demo{clip-path:inset(0);transform:none}.sc-gradient-text-demo>b{background-position:0 center}.sc-skeleton-live [data-skeleton]{background:#e2e8f0}}