.demo-show-hide-content{flex-direction: column;align-items: center;}.demo-show-hide-content .toggle-check{display: none;}.demo-show-hide-content .toggle-btn{display: inline-block;padding: .6rem 1.25rem;background: var(--accent);color: var(--bg);border-radius: 8px;cursor: pointer;font-size: .95rem;user-select: none;transition: background .2s;}:is(.demo-show-hide-content .toggle-btn):hover{background: var(--accent);}.demo-show-hide-content .toggle-content{display: none;margin-top: 1rem;padding: 1rem 1.25rem;background: var(--accent-dim);border-left: 4px solid var(--accent);border-radius: 0 8px 8px 0;font-size: .95rem;}.demo-show-hide-content .toggle-check:checked ~ .toggle-content{display: block;}.demo-show-hide-content .toggle-check:checked ~ .toggle-btn{background: var(--accent);}@media (prefers-reduced-motion: reduce){.demo-show-hide-content .rm-text, .demo-show-hide-content .rm-fade{transition: none;}}
.demo-accordion{flex-direction: column;align-items: center;}.demo-accordion details{width: 100%;max-width: 560px;border: 1px solid var(--border);border-radius: 8px;margin-bottom: .5rem;overflow: hidden;}[open]:is(.demo-accordion details) summary{background: var(--accent-dim);}[open]:is(.demo-accordion details) summary::after{transform: rotate(45deg);}.demo-accordion summary{padding: .9rem 1.1rem;font-weight: 600;font-size: .95rem;cursor: pointer;list-style: none;display: flex;justify-content: space-between;align-items: center;background: var(--surface);user-select: none;transition: background .2s;}:is(.demo-accordion summary)::-webkit-details-marker{display: none;}:is(.demo-accordion summary)::after{content: "+";font-size: 1.2rem;font-weight: 400;color: var(--accent);transition: transform .25s;}.demo-accordion .accordion-body{padding: 1rem 1.1rem;font-size: .9rem;color: var(--text-muted);border-top: 1px solid var(--border);background: var(--surface);}@media (prefers-reduced-motion: reduce){.demo-accordion .acc-panel, .demo-accordion .acc-head::after, .demo-accordion summary, .demo-accordion summary::after{transition: none;}}
.demo-click-reveal{flex-direction: column;align-items: center;}.demo-click-reveal .reveal-check{display: none;}.demo-click-reveal .reveal-btn{display: inline-flex;align-items: center;gap: .5rem;padding: .6rem 1.25rem;background: var(--surface-2);color: var(--text);border-radius: 8px;cursor: pointer;font-size: .9rem;user-select: none;border: 1px solid var(--border);transition: background .2s, color .2s, border-color .2s;}.demo-click-reveal .reveal-icon{flex-shrink: 0;}.demo-click-reveal .icon-lock{display: none;}.demo-click-reveal .reveal-panel{display: none;margin-top: 1rem;padding: 1.25rem;background: var(--accent-dim);border-radius: 10px;font-size: .95rem;}.demo-click-reveal .reveal-check:checked ~ .reveal-btn{background: var(--accent);color: var(--bg);border-color: var(--accent);}.demo-click-reveal .reveal-check:checked ~ .reveal-btn .icon-eye{display: none;}.demo-click-reveal .reveal-check:checked ~ .reveal-btn .icon-lock{display: block;}.demo-click-reveal .reveal-check:checked ~ .reveal-panel{display: block;}@media (prefers-reduced-motion: reduce){.demo-click-reveal .reveal-anim-panel, .demo-click-reveal .reveal-spoiler-text{transition: none;}}
.demo-card-flip .flip-card{width: 200px;height: 130px;perspective: 800px;}:is(.demo-card-flip .flip-card):hover .flip-inner{transform: rotateY(180deg);}.demo-card-flip .flip-inner{width: 100%;height: 100%;position: relative;transform-style: preserve-3d;transition: transform .55s ease;}.demo-card-flip .flip-front,.demo-card-flip .flip-back{position: absolute;inset: 0;border-radius: 12px;backface-visibility: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: .95rem;font-weight: 600;padding: 1rem;text-align: center;}.demo-card-flip .flip-front{background: var(--accent);color: var(--bg);}.demo-card-flip .flip-back{background: var(--violet);color: var(--bg);transform: rotateY(180deg);}@media (prefers-reduced-motion: reduce){.demo-card-flip .flip-inner{transition: none;}}
.demo-image-zoom .zoom-wrap{width: 200px;height: 130px;border-radius: 10px;overflow: hidden;}:is(.demo-image-zoom .zoom-wrap) img{width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .4s ease;}:is(.demo-image-zoom .zoom-wrap):hover img{transform: scale(1.3);}@media (prefers-reduced-motion: reduce){:is(.demo-image-zoom .zoom-wrap) img, .demo-image-zoom .zoom-cap{transition: none;}}
.demo-gradient-text .grad{font-size: 2.5rem;font-weight: 800;background: linear-gradient(90deg, var(--accent), var(--sky));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;display: inline-block;}.demo-gradient-text .grad-2{font-size: 2.5rem;font-weight: 800;background: linear-gradient(90deg, var(--accent), var(--teal), var(--sky), var(--violet), var(--rose));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;display: inline-block;}.demo-gradient-text .grad-animated{font-size: 2.5rem;font-weight: 800;background: linear-gradient(90deg, var(--accent), var(--teal), var(--sky), var(--violet), var(--rose) );background-size: 400% 100%;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;display: inline-block;animation: gradient-shift 3s ease-in-out infinite alternate;}@keyframes gradient-shift{from{background-position: 0% 50%;}to{background-position: 100% 50%;}}@supports (background-clip: text) or (-webkit-background-clip: text){.demo-gradient-text .grad-split{background: linear-gradient(var(--sky) 0 50%, var(--accent) 50% 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;}}@media (forced-colors: active){.demo-gradient-text .grad-conic, .demo-gradient-text .grad-stripes, .demo-gradient-text .grad-split{-webkit-text-fill-color: currentColor;color: CanvasText;}}
.demo-modal-dialog .modal-open-btn{display: inline-block;padding: .6rem 1.25rem;background: var(--accent);color: var(--bg);border-radius: 8px;font-size: .9rem;font-weight: 500;text-decoration: none;cursor: pointer;}.demo-modal-dialog .modal-overlay{display: none;position: absolute;inset: 0;scroll-margin-top: 80px;background: rgba(0,0,0,.55);z-index: 10;align-items: center;justify-content: center;}:is(.demo-modal-dialog .modal-overlay):target{display: flex;}.demo-modal-dialog .modal-box{background: var(--surface);border-radius: 12px;padding: 2rem;max-width: 400px;width: 90%;box-shadow: 0 8px 32px rgba(0,0,0,.18);position: relative;}:is(.demo-modal-dialog .modal-box) :is(h3, .modal-box-title){margin-bottom: .75rem;font-size: 1.2rem;}:is(.demo-modal-dialog .modal-box) p{color: var(--text-muted);font-size: .9rem;margin-bottom: 1.25rem;}.demo-modal-dialog .modal-close{display: inline-block;padding: .5rem 1rem;background: var(--surface-2);color: var(--text);border-radius: 6px;font-size: .875rem;text-decoration: none;}:is(.demo-modal-dialog .modal-close):hover{background: var(--border);}@media (prefers-reduced-motion: reduce){:is(.demo-modal-dialog .modal-anim):target, :is(.demo-modal-dialog .modal-anim):target .modal-box{animation: none;}}
.demo-scroll-carousel .carousel-wrap{position: relative;}.demo-scroll-carousel .carousel-hint{text-align: center;font-size: .75rem;color: var(--text-muted);margin-top: .6rem;letter-spacing: .02em;}.demo-scroll-carousel .carousel{display: flex;overflow-x: auto;scroll-snap-type: x mandatory;border-radius: 10px;scrollbar-width: none;}:is(.demo-scroll-carousel .carousel)::-webkit-scrollbar{display: none;}.demo-scroll-carousel .carousel-slide{flex: 0 0 100%;height: 160px;border-radius: 10px;scroll-snap-align: start;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;font-weight: 700;color: var(--bg);}:is(.demo-scroll-carousel .carousel-slide):nth-child(1){background: var(--violet);}:is(.demo-scroll-carousel .carousel-slide):nth-child(2){background: var(--sky);}:is(.demo-scroll-carousel .carousel-slide):nth-child(3){background: var(--yellow);color: var(--bg);}:is(.demo-scroll-carousel .carousel-slide):nth-child(4){background: var(--teal);}:is(.demo-scroll-carousel .carousel-slide):nth-child(5){background: var(--accent);color: var(--bg);}@media (prefers-reduced-motion: reduce){.demo-scroll-carousel .carousel{scroll-behavior: auto;}}
.demo-aspect-ratio-box .ratio-grid{display: flex;gap: 1rem;flex-wrap: wrap;justify-content: center;}.demo-aspect-ratio-box .ratio-box{background: var(--accent);border-radius: 10px;display: flex;align-items: center;justify-content: center;color: var(--bg);font-size: .8rem;font-weight: 600;}.demo-aspect-ratio-box .ratio-16-9{aspect-ratio: 16 / 9;width: 160px;background: var(--accent);}.demo-aspect-ratio-box .ratio-1-1{aspect-ratio: 1 / 1;width: 90px;background: var(--violet);}.demo-aspect-ratio-box .ratio-4-3{aspect-ratio: 4 / 3;width: 120px;background: var(--sky);}
.demo-glitch-effect .glitch-wrapper{display: flex;align-items: center;justify-content: center;}.demo-glitch-effect .glitch{position: relative;font-size: 3rem;font-weight: 800;letter-spacing: .05em;color: var(--text);font-family: var(--font-mono);}:is(.demo-glitch-effect .glitch)::before,:is(.demo-glitch-effect .glitch)::after{content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}:is(.demo-glitch-effect .glitch)::before{color: var(--teal);animation: glitch-1 1.5s infinite;}:is(.demo-glitch-effect .glitch)::after{color: var(--coral);animation: glitch-2 1.5s infinite;}:is(.demo-glitch-effect .glitch-intense)::before{animation: glitch-intense-1 0.8s infinite;}:is(.demo-glitch-effect .glitch-intense)::after{animation: glitch-intense-2 0.8s infinite;}@keyframes glitch-1{0%, 90%, 100%{clip-path: inset(0 0 100% 0);left: 0;}92%{clip-path: inset(20% 0 60% 0);left: -3px;}94%{clip-path: inset(50% 0 30% 0);left: 2px;}96%{clip-path: inset(10% 0 75% 0);left: -2px;}98%{clip-path: inset(65% 0 10% 0);left: 3px;}}@keyframes glitch-2{0%, 88%, 100%{clip-path: inset(0 0 100% 0);left: 0;}90%{clip-path: inset(40% 0 40% 0);left: 3px;}92%{clip-path: inset(5% 0 80% 0);left: -3px;}94%{clip-path: inset(75% 0 5% 0);left: 2px;}96%{clip-path: inset(30% 0 55% 0);left: -2px;}}@keyframes glitch-intense-1{0%, 72%, 100%{clip-path: inset(0 0 100% 0);left: 0;}74%{clip-path: inset(10% 0 55% 0);left: -7px;}78%{clip-path: inset(45% 0 20% 0);left: 6px;}82%{clip-path: inset(70% 0 5% 0);left: -5px;}86%{clip-path: inset(5% 0 72% 0);left: 8px;}90%{clip-path: inset(30% 0 40% 0);left: -4px;}94%{clip-path: inset(85% 0 3% 0);left: 5px;}}@keyframes glitch-intense-2{0%, 68%, 100%{clip-path: inset(0 0 100% 0);left: 0;}71%{clip-path: inset(60% 0 15% 0);left: 8px;}75%{clip-path: inset(15% 0 60% 0);left: -7px;}79%{clip-path: inset(88% 0 3% 0);left: 5px;}83%{clip-path: inset(3% 0 88% 0);left: -8px;}87%{clip-path: inset(40% 0 35% 0);left: 6px;}91%{clip-path: inset(22% 0 58% 0);left: -5px;}}@media (prefers-reduced-motion: reduce){.demo-glitch-effect .glitch::before, .demo-glitch-effect .glitch::after, .demo-glitch-effect .glitch-hover:hover::before, .demo-glitch-effect .glitch-hover:hover::after, .demo-glitch-effect .glitch-hover:focus-visible::before, .demo-glitch-effect .glitch-hover:focus-visible::after{animation: none;}.demo-glitch-effect .glitch-rgb{animation: none;text-shadow: 2px 0 #ff6b6b, -2px 0 #57d9a3;}}
.demo-sticky-table .table-scroll{max-height: 240px;overflow-y: auto;border: 1px solid var(--border);border-radius: var(--radius-lg);}.demo-sticky-table table{width: 100%;border-collapse: collapse;font-size: .875rem;}.demo-sticky-table thead th{position: sticky;top: 0;z-index: 1;background: var(--surface);padding: .75rem 1rem;text-align: left;font-weight: 600;font-size: .8rem;text-transform: uppercase;letter-spacing: .06em;color: var(--text-muted);border-bottom: 1px solid var(--border);}.demo-sticky-table tbody tr{border-bottom: 1px solid var(--border);transition: background .15s;}:is(.demo-sticky-table tbody tr):last-child{border-bottom: none;}:is(.demo-sticky-table tbody tr):hover{background: var(--surface-2);}.demo-sticky-table tbody td{padding: .65rem 1rem;color: var(--text);}:is(.demo-sticky-table tbody td):first-child{font-weight: 500;}.demo-sticky-table .badge-status{display: inline-block;padding: .2rem .6rem;border-radius: 99px;font-size: .75rem;font-weight: 600;}.demo-sticky-table .badge-active{background: rgba(87, 217, 163, .12);color: var(--teal);}.demo-sticky-table .badge-pending{background: rgba(255, 212, 68, .12);color: var(--yellow);}.demo-sticky-table .badge-inactive{background: var(--surface-2);color: var(--text-muted);}
.demo-css-lightbox .lb-gallery{width: 100%;max-width: 480px;display: grid;grid-template-columns: repeat(3, 1fr);gap: .75rem;}.demo-css-lightbox .lb-thumb{display: block;aspect-ratio: 1;border-radius: var(--radius);overflow: hidden;position: relative;cursor: zoom-in;border: 2px solid transparent;transition: border-color .2s, transform .2s;}:is(.demo-css-lightbox .lb-thumb):hover{border-color: var(--accent);transform: scale(1.02);}.demo-css-lightbox .lb-thumb-img{width: 100%;height: 100%;object-fit: cover;display: block;background-size: cover;background-position: center;}.demo-css-lightbox .lb-overlay{display: none;position: fixed;inset: 0;background: rgba(0,0,0,.85);z-index: 999;align-items: center;justify-content: center;padding: 2rem;}:is(.demo-css-lightbox .lb-overlay):target{display: flex;}.demo-css-lightbox .lb-overlay-img{max-width: 90vw;max-height: 80vh;border-radius: var(--radius-lg);object-fit: contain;background-size: cover;background-position: center;}.demo-css-lightbox .lb-close{position: fixed;top: 1.5rem;right: 1.5rem;width: 40px;height: 40px;background: var(--surface);border: 1px solid var(--border);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--text);text-decoration: none;font-size: 1.2rem;line-height: 1;transition: background .15s;}:is(.demo-css-lightbox .lb-close):hover{background: var(--surface-2);}.demo-css-lightbox .lb-img-1{background: linear-gradient(135deg, var(--violet), var(--sky));}.demo-css-lightbox .lb-img-2{background: linear-gradient(135deg, var(--coral), var(--orange));}.demo-css-lightbox .lb-img-3{background: linear-gradient(135deg, var(--accent), var(--teal));}.demo-css-lightbox .lb-img-4{background: linear-gradient(135deg, var(--rose), var(--violet));}.demo-css-lightbox .lb-img-5{background: linear-gradient(135deg, var(--orange), var(--yellow));}.demo-css-lightbox .lb-img-6{background: linear-gradient(135deg, var(--sky), var(--teal));}
.demo-scroll-shelf .shelf-wrap{position: relative;width: 100%;max-width: 620px;}.demo-scroll-shelf .shelf{display: flex;gap: .75rem;overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;padding-bottom: .5rem;-webkit-overflow-scrolling: touch;}:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar{height: 4px;}:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar-track{background: var(--surface-2);border-radius: 2px;}:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar-thumb{background: var(--border);border-radius: 2px;}:is(.demo-scroll-shelf .shelf)::-webkit-scrollbar-thumb:hover{background: var(--text-muted);}.demo-scroll-shelf .shelf-item{flex: 0 0 160px;scroll-snap-align: start;background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;transition: border-color .2s;}:is(.demo-scroll-shelf .shelf-item):hover{border-color: var(--accent);}:is(.demo-scroll-shelf .shelf-item):nth-child(1) .shelf-thumb{background: linear-gradient(135deg, var(--violet), var(--sky));}:is(.demo-scroll-shelf .shelf-item):nth-child(2) .shelf-thumb{background: linear-gradient(135deg, var(--accent), var(--teal));}:is(.demo-scroll-shelf .shelf-item):nth-child(3) .shelf-thumb{background: linear-gradient(135deg, var(--coral), var(--orange));}:is(.demo-scroll-shelf .shelf-item):nth-child(4) .shelf-thumb{background: linear-gradient(135deg, var(--rose), var(--violet));}:is(.demo-scroll-shelf .shelf-item):nth-child(5) .shelf-thumb{background: linear-gradient(135deg, var(--sky), var(--teal));}:is(.demo-scroll-shelf .shelf-item):nth-child(6) .shelf-thumb{background: linear-gradient(135deg, var(--orange), var(--yellow));}:is(.demo-scroll-shelf .shelf-item):nth-child(7) .shelf-thumb{background: linear-gradient(135deg, var(--teal), var(--accent));}.demo-scroll-shelf .shelf-thumb{height: 90px;background-size: cover;background-position: center;}.demo-scroll-shelf .shelf-body{padding: .6rem .75rem;}.demo-scroll-shelf .shelf-title{font-size: .85rem;font-weight: 600;margin-bottom: .15rem;}.demo-scroll-shelf .shelf-sub{font-size: .75rem;color: var(--text-muted);}.demo-scroll-shelf .shelf-hint{text-align: center;font-size: .75rem;color: var(--text-muted);margin-top: .5rem;}@media (prefers-reduced-motion: reduce){.demo-scroll-shelf .shelf, .demo-scroll-shelf .shelf-vertical{scroll-behavior: auto;}}
.demo-neon-text .neon-stage{display: flex;flex-direction: column;gap: 1.5rem;align-items: center;padding: 1rem;background: #0a0a0b;border-radius: var(--radius-lg);}.demo-neon-text .neon{font-family: var(--font-sans);font-size: 2.5rem;font-weight: 800;letter-spacing: .02em;animation: neon-flicker 4s infinite;}.demo-neon-text .neon-green{color: #b8ff57;text-shadow: 0 0 4px #b8ff57, 0 0 10px #b8ff57, 0 0 20px #b8ff57, 0 0 40px #6ddf00, 0 0 80px #6ddf00;}.demo-neon-text .neon-blue{color: #38bdf8;text-shadow: 0 0 4px #38bdf8, 0 0 10px #38bdf8, 0 0 20px #38bdf8, 0 0 40px #0ea5e9, 0 0 80px #0ea5e9;animation-delay: .5s;}.demo-neon-text .neon-pink{color: #f472b6;font-size: 1.5rem;text-shadow: 0 0 4px #f472b6, 0 0 10px #f472b6, 0 0 20px #f472b6, 0 0 40px #ec4899, 0 0 80px #ec4899;animation-delay: 1s;}@keyframes neon-flicker{0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%{opacity: 1;}20%, 24%, 55%{opacity: .7;filter: brightness(.8);}}@media (prefers-reduced-motion: reduce){.demo-neon-text .neon, .demo-neon-text .neon-tube{animation: none;}.demo-neon-text .neon-switch{transition: none;}}
.demo-typewriter .tw-stage{display: flex;flex-direction: column;gap: 1.25rem;padding: .5rem;}.demo-typewriter .tw-line{overflow: hidden;white-space: nowrap;width: 0;font-family: var(--font-mono);border-right: 2px solid var(--accent);}.demo-typewriter .tw-line-1{font-size: 1.5rem;font-weight: 600;color: var(--text);animation: tw-type-1 1.8s steps(18) forwards, tw-cursor .7s step-end infinite;}.demo-typewriter .tw-line-2{font-size: 1rem;color: var(--accent);animation: tw-type-2 1.2s steps(14) 2s forwards, tw-cursor .7s step-end 2s infinite;border-right-color: var(--teal);}.demo-typewriter .tw-line-3{font-size: .85rem;color: var(--text-muted);animation: tw-type-3 1s steps(25) 3.4s forwards, tw-cursor .7s step-end 3.4s infinite;border-right-color: var(--text-muted);}@keyframes tw-type-1{to{width: 18ch;}}@keyframes tw-type-2{to{width: 14ch;}}@keyframes tw-type-3{to{width: 25ch;}}@keyframes tw-cursor{50%{border-right-color: transparent;}}@media (prefers-reduced-motion: reduce){.demo-typewriter .tw-line-1{animation: none;width: 18ch;}.demo-typewriter .tw-line-2{animation: none;width: 14ch;}.demo-typewriter .tw-line-3{animation: none;width: 25ch;}.demo-typewriter .tw-loop{animation: none;width: 23ch;}.demo-typewriter .tw-block-text{animation: none;width: 12ch;}.demo-typewriter .tw-block-caret{animation: none;}}
.demo-confetti .confetti-stage{position: relative;width: 100%;height: 220px;overflow: hidden;border-radius: var(--radius-lg);background: var(--surface);display: flex;align-items: center;justify-content: center;}.demo-section > .demo-wrapper.demo-confetti{padding: 0;overflow: hidden;}.demo-section > .demo-wrapper.demo-confetti .confetti-stage{border-radius: 0;height: 240px;}.demo-confetti .confetti-text{font-size: 1.25rem;font-weight: 700;z-index: 1;position: relative;}.demo-confetti .confetti-field{position: absolute;inset: 0 3%;display: flex;justify-content: space-between;align-items: flex-start;}.demo-confetti .piece{position: relative;top: -18px;flex: 0 0 auto;width: 10px;height: 10px;border-radius: 2px;animation: confetti-fall 1.8s linear infinite;}.demo-confetti .piece:nth-child(8n+1){background: var(--coral);}.demo-confetti .piece:nth-child(8n+2){background: var(--sky);}.demo-confetti .piece:nth-child(8n+3){background: var(--yellow);}.demo-confetti .piece:nth-child(8n+4){background: var(--accent);}.demo-confetti .piece:nth-child(8n+5){background: var(--rose);}.demo-confetti .piece:nth-child(8n+6){background: var(--teal);}.demo-confetti .piece:nth-child(8n+7){background: var(--violet);}.demo-confetti .piece:nth-child(8n){background: var(--orange);}.demo-confetti .piece:nth-child(5n+1){width: 8px;height: 12px;}.demo-confetti .piece:nth-child(5n+2){width: 12px;height: 8px;border-radius: 50%;}.demo-confetti .piece:nth-child(5n+3){width: 6px;height: 14px;}.demo-confetti .piece:nth-child(5n+4){width: 14px;height: 6px;}.demo-confetti .piece:nth-child(5n){width: 9px;height: 9px;border-radius: 50%;}.demo-confetti .piece:nth-child(7n+1){animation-duration: 1.86s;}.demo-confetti .piece:nth-child(7n+2){animation-duration: 1.5s;}.demo-confetti .piece:nth-child(7n+3){animation-duration: 2.1s;}.demo-confetti .piece:nth-child(7n+4){animation-duration: 1.62s;}.demo-confetti .piece:nth-child(7n+5){animation-duration: 2.22s;}.demo-confetti .piece:nth-child(7n+6){animation-duration: 1.74s;}.demo-confetti .piece:nth-child(7n){animation-duration: 1.98s;}.demo-confetti .piece:nth-child(11n+1){animation-delay: -0.9s;}.demo-confetti .piece:nth-child(11n+2){animation-delay: -1.7s;}.demo-confetti .piece:nth-child(11n+3){animation-delay: -0.3s;}.demo-confetti .piece:nth-child(11n+4){animation-delay: -2.05s;}.demo-confetti .piece:nth-child(11n+5){animation-delay: -1.2s;}.demo-confetti .piece:nth-child(11n+6){animation-delay: -0.55s;}.demo-confetti .piece:nth-child(11n+7){animation-delay: -1.95s;}.demo-confetti .piece:nth-child(11n+8){animation-delay: -0.75s;}.demo-confetti .piece:nth-child(11n+9){animation-delay: -1.45s;}.demo-confetti .piece:nth-child(11n+10){animation-delay: -0.15s;}.demo-confetti .piece:nth-child(11n){animation-delay: -2.3s;}.demo-confetti .piece:nth-child(3n+2){margin-left: 1.4%;}.demo-confetti .piece:nth-child(3n){margin-right: 1.8%;}@keyframes confetti-fall{0%{transform: translateY(0) rotate(0deg) scaleX(1);opacity: 1;}25%{transform: translateY(16px) rotate(90deg) scaleX(0);}50%{transform: translateY(65px) rotate(180deg) scaleX(-1);}75%{transform: translateY(146px) rotate(270deg) scaleX(0);opacity: 1;}100%{transform: translateY(260px) rotate(360deg) scaleX(1);opacity: 0;}}@media (prefers-reduced-motion: reduce){.demo-confetti .piece, .demo-confetti .cannon-piece, .demo-confetti .burst-piece{display: none;}}
.demo-parallax .parallax-scene{width: 100%;position: relative;height: 300px;overflow-y: scroll;overflow-x: hidden;border-radius: var(--radius-lg);scroll-behavior: smooth;scroll-timeline-name: --parallax;}.demo-parallax .parallax-inner{height: 600px;position: relative;overflow: hidden;}.demo-parallax .parallax-layer{position: absolute;inset: 0;will-change: transform;}.demo-parallax .layer-bg{background: radial-gradient(ellipse at 50% 20%, rgba(184, 255, 87, .08) 0%, transparent 60%), linear-gradient(180deg, #0c0c0d 0%, #0f1a0a 100%);animation: parallax-bg linear both;animation-timeline: --parallax;}.demo-parallax .layer-mid{display: flex;align-items: flex-start;justify-content: center;padding-top: 100px;animation: parallax-mid linear both;animation-timeline: --parallax;}.demo-parallax .layer-front{display: flex;flex-direction: column;align-items: center;justify-content: flex-end;padding-bottom: 2rem;animation: parallax-front linear both;animation-timeline: --parallax;}.demo-parallax .parallax-stars{position: absolute;inset: 0;background-image: radial-gradient(circle 1px at 15% 20%, var(--text-muted) 0%, transparent 100%), radial-gradient(circle 1px at 35% 45%, var(--text-muted) 0%, transparent 100%), radial-gradient(circle 2px at 55% 15%, var(--accent) 0%, transparent 100%), radial-gradient(circle 1px at 70% 60%, var(--text-muted) 0%, transparent 100%), radial-gradient(circle 1px at 85% 30%, var(--text-muted) 0%, transparent 100%), radial-gradient(circle 2px at 25% 70%, var(--sky) 0%, transparent 100%), radial-gradient(circle 1px at 90% 75%, var(--text-muted) 0%, transparent 100%);animation: parallax-stars linear both;animation-timeline: --parallax;}.demo-parallax .parallax-moon{width: 80px;height: 80px;background: radial-gradient(circle at 35% 35%, var(--yellow), var(--orange));border-radius: 50%;box-shadow: 0 0 30px rgba(255, 212, 68, .3);position: absolute;top: 60px;right: 80px;}.demo-parallax .parallax-hills{width: 120%;height: 120px;background: var(--surface);border-radius: 50% 50% 0 0;margin-bottom: -20px;}.demo-parallax .parallax-text{position: relative;text-align: center;color: var(--text);}:is(.demo-parallax .parallax-text) h2{font-size: 1.4rem;margin-bottom: .25rem;}:is(.demo-parallax .parallax-text) p{font-size: .85rem;color: var(--text-muted);}.demo-parallax .scroll-hint{position: sticky;bottom: .5rem;text-align: center;font-size: .72rem;color: var(--text-muted);pointer-events: none;}@keyframes parallax-bg{from{transform: translateY(0);}to{transform: translateY(-15%);}}@keyframes parallax-stars{from{transform: translateY(0);}to{transform: translateY(-30%);}}@keyframes parallax-mid{from{transform: translateY(0);}to{transform: translateY(-20%);}}@keyframes parallax-front{from{transform: translateY(0);}to{transform: translateY(-5%);}}@media (prefers-reduced-motion: reduce){.demo-parallax .px-h-layer{animation: none;}}
.demo-morphing-blob .blob-stage{display: flex;gap: 2rem;align-items: center;justify-content: center;padding: 1rem;flex-wrap: wrap;}.demo-morphing-blob .blob{display: flex;align-items: center;justify-content: center;animation: blob-morph 8s ease-in-out infinite;}.demo-morphing-blob .blob-green{width: 120px;height: 120px;background: radial-gradient(circle at 30% 30%, var(--accent), #6ddf00);}.demo-morphing-blob .blob-blue{width: 100px;height: 100px;background: radial-gradient(circle at 30% 30%, var(--sky), var(--violet));animation-delay: -3s;animation-duration: 6s;}.demo-morphing-blob .blob-pink{width: 80px;height: 80px;background: radial-gradient(circle at 30% 30%, var(--rose), var(--orange));animation-delay: -1.5s;animation-duration: 7s;}.demo-morphing-blob .blob-label{font-size: .7rem;color: var(--bg);font-weight: 700;text-align: center;letter-spacing: .05em;}@keyframes blob-morph{0%, 100%{border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;}25%{border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;}50%{border-radius: 50% 60% 50% 40% / 40% 30% 60% 50%;}75%{border-radius: 40% 50% 60% 30% / 60% 40% 50% 70%;}}@media (prefers-reduced-motion: reduce){.demo-morphing-blob .blob-drifter{animation: none;border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;}.demo-morphing-blob .blob-frame{animation: none;border-radius: 50% 60% 50% 40% / 40% 30% 60% 50%;}}
.demo-particle-float .particle-stage{width: 100%;position: relative;height: 240px;overflow: hidden;border-radius: var(--radius-lg);background: var(--surface);}.demo-particle-float .particle{position: absolute;border-radius: 50%;animation: particle-rise linear infinite;opacity: 0;}:is(.demo-particle-float .particle):nth-child(1){left: 8%;width: 6px;height: 6px;background: var(--accent);animation-duration: 4s;animation-delay: 0s;}:is(.demo-particle-float .particle):nth-child(2){left: 16%;width: 4px;height: 4px;background: var(--sky);animation-duration: 5.5s;animation-delay: 0.5s;}:is(.demo-particle-float .particle):nth-child(3){left: 24%;width: 8px;height: 8px;background: var(--violet);animation-duration: 3.8s;animation-delay: 1s;}:is(.demo-particle-float .particle):nth-child(4){left: 32%;width: 3px;height: 3px;background: var(--coral);animation-duration: 6s;animation-delay: 1.5s;}:is(.demo-particle-float .particle):nth-child(5){left: 40%;width: 5px;height: 5px;background: var(--teal);animation-duration: 4.5s;animation-delay: 0.3s;}:is(.demo-particle-float .particle):nth-child(6){left: 48%;width: 7px;height: 7px;background: var(--rose);animation-duration: 5s;animation-delay: 0.8s;}:is(.demo-particle-float .particle):nth-child(7){left: 56%;width: 4px;height: 4px;background: var(--yellow);animation-duration: 3.5s;animation-delay: 1.2s;}:is(.demo-particle-float .particle):nth-child(8){left: 64%;width: 6px;height: 6px;background: var(--accent);animation-duration: 5.8s;animation-delay: 0.6s;}:is(.demo-particle-float .particle):nth-child(9){left: 72%;width: 3px;height: 3px;background: var(--sky);animation-duration: 4.2s;animation-delay: 1.8s;}:is(.demo-particle-float .particle):nth-child(10){left: 80%;width: 8px;height: 8px;background: var(--orange);animation-duration: 4.8s;animation-delay: 0.2s;}:is(.demo-particle-float .particle):nth-child(11){left: 88%;width: 5px;height: 5px;background: var(--teal);animation-duration: 3.2s;animation-delay: 1.4s;}:is(.demo-particle-float .particle):nth-child(12){left: 94%;width: 4px;height: 4px;background: var(--violet);animation-duration: 5.3s;animation-delay: 0.9s;}@keyframes particle-rise{0%{transform: translateY(240px) translateX(0);opacity: 0;}10%{opacity: .8;}90%{opacity: .6;}100%{transform: translateY(-20px) translateX(20px);opacity: 0;}}@media (prefers-reduced-motion: reduce){.demo-particle-float .pf-sway, .demo-particle-float .pf-sway-dot{animation: none;}.demo-particle-float .pf-snow{animation: none;opacity: .5;}}
.demo-css-rain .rain-stage{width: 100%;position: relative;height: 220px;overflow: hidden;border-radius: var(--radius-lg);background: linear-gradient(180deg, #0a0e14 0%, #111c2e 100%);}.demo-css-rain .rain-text{position: absolute;bottom: 1.5rem;left: 50%;transform: translateX(-50%);text-align: center;color: rgba(255,255,255,.7);font-size: 1.1rem;font-weight: 600;z-index: 1;white-space: nowrap;}.demo-css-rain .drop{position: absolute;top: -20px;width: 1px;background: linear-gradient(180deg, transparent, rgba(147, 197, 253, .8));animation: rain-fall linear infinite;border-radius: 0 0 1px 1px;}:is(.demo-css-rain .drop):nth-child(1){left: 5%;height: 18px;animation-duration: 1.1s;animation-delay: 0s;}:is(.demo-css-rain .drop):nth-child(2){left: 9%;height: 14px;animation-duration: 0.9s;animation-delay: 0.3s;}:is(.demo-css-rain .drop):nth-child(3){left: 14%;height: 22px;animation-duration: 1.3s;animation-delay: 0.7s;}:is(.demo-css-rain .drop):nth-child(4){left: 19%;height: 16px;animation-duration: 1.0s;animation-delay: 0.1s;}:is(.demo-css-rain .drop):nth-child(5){left: 24%;height: 20px;animation-duration: 1.2s;animation-delay: 0.5s;}:is(.demo-css-rain .drop):nth-child(6){left: 29%;height: 14px;animation-duration: 0.8s;animation-delay: 0.9s;}:is(.demo-css-rain .drop):nth-child(7){left: 34%;height: 24px;animation-duration: 1.4s;animation-delay: 0.2s;}:is(.demo-css-rain .drop):nth-child(8){left: 38%;height: 16px;animation-duration: 1.0s;animation-delay: 0.6s;}:is(.demo-css-rain .drop):nth-child(9){left: 43%;height: 18px;animation-duration: 1.1s;animation-delay: 0.4s;}:is(.demo-css-rain .drop):nth-child(10){left: 48%;height: 12px;animation-duration: 0.9s;animation-delay: 0.8s;}:is(.demo-css-rain .drop):nth-child(11){left: 53%;height: 20px;animation-duration: 1.2s;animation-delay: 0.15s;}:is(.demo-css-rain .drop):nth-child(12){left: 58%;height: 16px;animation-duration: 1.0s;animation-delay: 0.55s;}:is(.demo-css-rain .drop):nth-child(13){left: 63%;height: 22px;animation-duration: 1.3s;animation-delay: 0.35s;}:is(.demo-css-rain .drop):nth-child(14){left: 68%;height: 14px;animation-duration: 0.8s;animation-delay: 0.75s;}:is(.demo-css-rain .drop):nth-child(15){left: 73%;height: 18px;animation-duration: 1.1s;animation-delay: 0.45s;}:is(.demo-css-rain .drop):nth-child(16){left: 78%;height: 20px;animation-duration: 1.2s;animation-delay: 0.05s;}:is(.demo-css-rain .drop):nth-child(17){left: 83%;height: 12px;animation-duration: 0.9s;animation-delay: 0.65s;}:is(.demo-css-rain .drop):nth-child(18){left: 88%;height: 24px;animation-duration: 1.4s;animation-delay: 0.25s;}:is(.demo-css-rain .drop):nth-child(19){left: 93%;height: 16px;animation-duration: 1.0s;animation-delay: 0.85s;}:is(.demo-css-rain .drop):nth-child(20){left: 97%;height: 18px;animation-duration: 1.15s;animation-delay: 0.5s;}@keyframes rain-fall{0%{transform: translateY(0) scaleX(1);opacity: 0;}5%{opacity: 1;}95%{opacity: .8;}100%{transform: translateY(240px) scaleX(0.5);opacity: 0;}}@media (prefers-reduced-motion: reduce){.demo-css-rain .rw-drop{animation: none;opacity: .35;}.demo-css-rain .rs-drop{animation: none;}.demo-css-rain .rs-ring{animation: none;opacity: 0;}}
.demo-elastic-bounce .bounce-stage{display: flex;gap: 3rem;align-items: flex-end;justify-content: center;height: 200px;padding-bottom: .5rem;position: relative;}.demo-elastic-bounce .bounce-lane{display: flex;flex-direction: column;align-items: center;gap: .5rem;height: 100%;justify-content: flex-end;}.demo-elastic-bounce .ball{width: 40px;height: 40px;border-radius: 50%;}.demo-elastic-bounce .ball-elastic{background: radial-gradient(circle at 35% 35%, var(--accent), #6ddf00);animation: bounce-elastic 1.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;}.demo-elastic-bounce .ball-spring{background: radial-gradient(circle at 35% 35%, var(--sky), var(--violet));animation: bounce-spring 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;width: 36px;height: 36px;}.demo-elastic-bounce .ball-linear{background: radial-gradient(circle at 35% 35%, var(--coral), var(--orange));animation: bounce-linear 1.4s linear infinite;width: 36px;height: 36px;}.demo-elastic-bounce .bounce-label{font-size: .72rem;color: var(--text-muted);font-weight: 500;text-align: center;}.demo-elastic-bounce .bounce-floor{position: absolute;bottom: 1.75rem;left: 10%;right: 10%;height: 2px;background: var(--border);border-radius: 1px;}@keyframes bounce-elastic{0%, 100%{transform: translateY(0) scaleX(1) scaleY(1);}10%{transform: translateY(-140px) scaleX(1) scaleY(1);}30%{transform: translateY(0) scaleX(1.3) scaleY(0.7);}40%{transform: translateY(-70px) scaleX(1) scaleY(1);}60%{transform: translateY(0) scaleX(1.15) scaleY(0.85);}70%{transform: translateY(-30px) scaleX(1) scaleY(1);}85%{transform: translateY(0) scaleX(1.05) scaleY(0.95);}}@keyframes bounce-spring{from{transform: translateY(0);}to{transform: translateY(-140px);}}@keyframes bounce-linear{0%, 100%{transform: translateY(0);}50%{transform: translateY(-140px);}}@keyframes bounce-elastic-mini{0%, 100%{transform: translateY(0) scaleX(1) scaleY(1);}10%{transform: translateY(-80px) scaleX(1) scaleY(1);}30%{transform: translateY(0) scaleX(1.3) scaleY(0.7);}40%{transform: translateY(-40px) scaleX(1) scaleY(1);}60%{transform: translateY(0) scaleX(1.15) scaleY(0.85);}70%{transform: translateY(-18px) scaleX(1) scaleY(1);}85%{transform: translateY(0) scaleX(1.05) scaleY(0.95);}}@keyframes bounce-spring-mini{from{transform: translateY(0);}to{transform: translateY(-80px);}}@keyframes bounce-linear-mini{0%, 100%{transform: translateY(0);}50%{transform: translateY(-80px);}}@media (prefers-reduced-motion: reduce){.demo-elastic-bounce .bb-eased, .demo-elastic-bounce .bb-parabolic{animation: none;}.demo-elastic-bounce .eb-chip{transition: border-color .2s ease;}:is(.demo-elastic-bounce .eb-chip):hover, :is(.demo-elastic-bounce .eb-chip):focus-visible, :is(.demo-elastic-bounce .eb-chip):active{transform: none;}}
.demo-border-draw-button .draw-btns{display: flex;gap: 1.5rem;align-items: center;justify-content: center;flex-wrap: wrap;padding: .5rem;}.demo-border-draw-button .draw-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;padding: .75rem 2rem;background: transparent;border: none;color: var(--text);font-family: var(--font-sans);font-size: .95rem;font-weight: 600;cursor: pointer;letter-spacing: .02em;}:is(.demo-border-draw-button .draw-btn) svg{position: absolute;inset: 0;width: 100%;height: 100%;overflow: visible;}:is(.demo-border-draw-button .draw-btn) rect{fill: none;stroke: var(--accent);stroke-width: 2;rx: 8;}:is(.demo-border-draw-button .draw-btn) .border-rect{stroke-dasharray: 387;stroke-dashoffset: 387;transition: stroke-dashoffset .6s cubic-bezier(0.4, 0, 0.2, 1);}:is(.demo-border-draw-button .draw-btn):hover .border-rect{stroke-dashoffset: 0;}.demo-border-draw-button .draw-btn-blue{color: var(--sky);}:is(.demo-border-draw-button .draw-btn-blue) .border-rect{stroke: var(--sky);}.demo-border-draw-button .draw-btn-pink{color: var(--rose);}:is(.demo-border-draw-button .draw-btn-pink) .border-rect{stroke: var(--rose);}@media (prefers-reduced-motion: reduce){.demo-border-draw-button .bd-ink{transition: none;}.demo-border-draw-button .bd-chase{stroke-dasharray: none;animation: border-pulse 2s ease-in-out infinite;}}
.demo-magnetic-button .mag-btns{display: flex;gap: 1.25rem;align-items: center;justify-content: center;flex-wrap: wrap;padding: 1rem .5rem;}.demo-magnetic-button .mag-btn{display: inline-flex;align-items: center;gap: .5rem;padding: .75rem 1.75rem;border-radius: var(--radius);font-family: var(--font-sans);font-size: .95rem;font-weight: 600;cursor: pointer;border: none;transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease, background .2s;}:is(.demo-magnetic-button .mag-btn):hover{transform: translateY(-6px) scale(1.04);}.demo-magnetic-button .mag-btn-primary{background: var(--accent);color: var(--bg);box-shadow: 0 2px 8px rgba(184, 255, 87, .2);}:is(.demo-magnetic-button .mag-btn-primary):hover{box-shadow: 0 16px 40px rgba(184, 255, 87, .35);}.demo-magnetic-button .mag-btn-sky{background: var(--sky);color: #0a0a0b;box-shadow: 0 2px 8px rgba(56, 189, 248, .2);}:is(.demo-magnetic-button .mag-btn-sky):hover{box-shadow: 0 16px 40px rgba(56, 189, 248, .35);}.demo-magnetic-button .mag-btn-ghost{background: transparent;color: var(--text);border: 2px solid var(--border);box-shadow: 0 2px 8px rgba(0,0,0,.1);}:is(.demo-magnetic-button .mag-btn-ghost):hover{border-color: var(--text-muted);box-shadow: 0 16px 40px rgba(0,0,0,.2);}@starting-style{.demo-magnetic-button .mag-btn{transform: translateY(10px);opacity: 0;}}@media (prefers-reduced-motion: reduce){.demo-magnetic-button .mg-state{transition: box-shadow .2s ease;}:is(.demo-magnetic-button .mg-state):hover, :is(.demo-magnetic-button .mg-state):focus-visible, :is(.demo-magnetic-button .mg-state):active, :is(.demo-magnetic-button .mg-tint):hover, :is(.demo-magnetic-button .mg-tint):focus-visible{transform: none;}}
.demo-ghost-button .ghost-btns{display: flex;gap: 1rem;align-items: center;justify-content: center;flex-wrap: wrap;padding: .5rem;}.demo-ghost-button .ghost-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;padding: .7rem 1.75rem;border-radius: var(--radius);font-family: var(--font-sans);font-size: .95rem;font-weight: 600;cursor: pointer;border: 2px solid;overflow: hidden;transition: color .3s;background: transparent;}:is(.demo-ghost-button .ghost-btn) span{position: relative;z-index: 1;}:is(.demo-ghost-button .ghost-btn)::before{content: '';position: absolute;inset: 0;transform: translateX(-101%);transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);}:is(.demo-ghost-button .ghost-btn):hover::before{transform: translateX(0);}.demo-ghost-button .ghost-btn-green{border-color: var(--accent);color: var(--accent);}:is(.demo-ghost-button .ghost-btn-green)::before{background: var(--accent);}:is(.demo-ghost-button .ghost-btn-green):hover{color: var(--bg);}.demo-ghost-button .ghost-btn-blue{border-color: var(--sky);color: var(--sky);}:is(.demo-ghost-button .ghost-btn-blue)::before{background: var(--sky);}:is(.demo-ghost-button .ghost-btn-blue):hover{color: var(--bg);}.demo-ghost-button .ghost-btn-pink{border-color: var(--rose);color: var(--rose);}:is(.demo-ghost-button .ghost-btn-pink)::before{background: var(--rose);transform: translateX(101%);}:is(.demo-ghost-button .ghost-btn-pink):hover::before{transform: translateX(0);}:is(.demo-ghost-button .ghost-btn-pink):hover{color: #fff;}@media (prefers-reduced-motion: reduce){:is(.demo-ghost-button .gb-grow)::before, :is(.demo-ghost-button .gb-diag)::before{transform: none;opacity: 0;transition: opacity .2s ease;}:is(.demo-ghost-button .gb-grow):hover::before, :is(.demo-ghost-button .gb-grow):focus-visible::before, :is(.demo-ghost-button .gb-diag):hover::before, :is(.demo-ghost-button .gb-diag):focus-visible::before{transform: none;opacity: 1;}}
.demo-pie-chart{flex-direction: column;gap: 1rem;}.demo-pie-chart .chart-wrap{display: flex;gap: 2rem;align-items: center;justify-content: center;flex-wrap: wrap;}.demo-pie-chart .pie{width: 160px;height: 160px;border-radius: 50%;flex-shrink: 0;}.demo-pie-chart .pie-simple{background: conic-gradient( var(--coral) 0% 35%, var(--sky) 35% 60%, var(--accent) 60% 80%, var(--violet) 80% 100% );}.demo-pie-chart .pie-donut{background: radial-gradient(circle at center, var(--bg) 50%, transparent 50%), conic-gradient( var(--accent) 0% 42%, var(--sky) 42% 65%, var(--coral) 65% 85%, var(--yellow) 85% 100% );}.demo-pie-chart .legend{display: flex;flex-direction: column;gap: .5rem;}.demo-pie-chart .legend-item{display: flex;align-items: center;gap: .5rem;font-size: .82rem;}.demo-pie-chart .legend-dot{width: 10px;height: 10px;border-radius: 2px;flex-shrink: 0;}.demo-pie-chart .legend-label{color: var(--text-muted);}.demo-pie-chart .legend-val{margin-left: auto;font-weight: 600;color: var(--text);min-width: 2.5rem;text-align: right;}.demo-pie-chart .chart-title{text-align: center;font-size: .8rem;color: var(--text-muted);margin-top: .5rem;font-weight: 500;}
.demo-bar-chart .chart-area{display: flex;flex-direction: column;gap: .75rem;}.demo-bar-chart .chart-title{font-size: .8rem;color: var(--text-muted);font-weight: 500;}.demo-bar-chart .bar-chart{display: flex;align-items: flex-end;gap: .5rem;height: 160px;padding: 0 .25rem;border-bottom: 1px solid var(--border);border-left: 1px solid var(--border);}.demo-bar-chart .bar-col{flex: 1;display: flex;flex-direction: column;align-items: center;gap: .4rem;height: 100%;justify-content: flex-end;}:is(.demo-bar-chart .bar-col):nth-child(1) .bar{background: var(--accent);--delay: 0s;}:is(.demo-bar-chart .bar-col):nth-child(2) .bar{background: var(--sky);--delay: .05s;}:is(.demo-bar-chart .bar-col):nth-child(3) .bar{background: var(--violet);--delay: .10s;}:is(.demo-bar-chart .bar-col):nth-child(4) .bar{background: var(--coral);--delay: .15s;}:is(.demo-bar-chart .bar-col):nth-child(5) .bar{background: var(--teal);--delay: .20s;}:is(.demo-bar-chart .bar-col):nth-child(6) .bar{background: var(--yellow);--delay: .25s;}:is(.demo-bar-chart .bar-col):nth-child(7) .bar{background: var(--orange);--delay: .30s;}.demo-bar-chart .bar{width: 100%;border-radius: 4px 4px 0 0;transform-origin: bottom;animation: bar-grow 4.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;animation-delay: var(--delay, 0s);height: var(--h);min-height: 4px;}.demo-bar-chart .bar-label{font-size: .7rem;color: var(--text-muted);font-weight: 500;}.demo-bar-chart .bar-val{font-size: .7rem;color: var(--text-muted);font-family: var(--font-mono);}@keyframes bar-grow{0%{transform: scaleY(0);}20%{transform: scaleY(1);}85%{transform: scaleY(1);}100%{transform: scaleY(0);}}@media (prefers-reduced-motion: reduce){.demo-bar-chart .bc-h-bar, .demo-bar-chart .bc-stack{animation: none;}}
.demo-donut-chart .donuts{display: flex;gap: 1.5rem;align-items: center;justify-content: center;flex-wrap: wrap;}.demo-donut-chart .donut-wrap{display: flex;flex-direction: column;align-items: center;gap: .5rem;}:is(.demo-donut-chart .donut-wrap) .donut-name{font-size: .8rem;color: var(--text-muted);font-weight: 500;}.demo-donut-chart .donut-svg{transform: rotate(-90deg);overflow: visible;}.demo-donut-chart .donut-track{fill: none;stroke: var(--surface-2);stroke-width: 10;}.demo-donut-chart .donut-fill{fill: none;stroke-width: 10;stroke-linecap: round;stroke-dasharray: 220;--arc: 220;stroke-dashoffset: var(--arc);animation: donut-draw 4.5s cubic-bezier(0.16, 1, 0.3, 1) .2s infinite;}.demo-donut-chart .donut-fill-green{stroke: var(--accent);--arc: 55;}.demo-donut-chart .donut-fill-sky{stroke: var(--sky);--arc: 88;}.demo-donut-chart .donut-fill-coral{stroke: var(--coral);--arc: 26.4;}.demo-donut-chart .donut-center{position: relative;}.demo-donut-chart .donut-label-wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.demo-donut-chart .donut-pct{display: block;font-size: 1.3rem;font-weight: 700;font-family: var(--font-mono);line-height: 1;}.demo-donut-chart .donut-title{font-size: .7rem;color: var(--text-muted);font-weight: 500;}@keyframes donut-draw{0%{stroke-dashoffset: 220;}30%{stroke-dashoffset: var(--arc);}85%{stroke-dashoffset: var(--arc);}100%{stroke-dashoffset: 220;}}@media (prefers-reduced-motion: reduce){.demo-donut-chart .dg-fill{animation: none;stroke-dashoffset: var(--arc);}}
.demo-expandable-card .exp-stack{display: flex;flex-direction: column;gap: .6rem;width: 100%;max-width: 420px;}.demo-expandable-card .exp-card{background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;}.demo-expandable-card .exp-toggle{display: none;}.demo-expandable-card .exp-header{padding: .9rem 1.1rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;cursor: pointer;user-select: none;transition: background .15s;}:is(.demo-expandable-card .exp-header):hover{background: var(--surface-2);}.demo-expandable-card .exp-title{font-size: .9rem;font-weight: 600;color: var(--text);}.demo-expandable-card .exp-icon{width: 22px;height: 22px;border: 1.5px solid var(--text-muted);border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;font-size: 1.1rem;line-height: 1;color: var(--text-muted);transition: transform .35s ease, border-color .2s, color .2s;}.demo-expandable-card .exp-body{display: grid;grid-template-rows: 0fr;transition: grid-template-rows .35s ease;}.demo-expandable-card .exp-inner{overflow: hidden;}.demo-expandable-card .exp-content{padding: .9rem 1.1rem;font-size: .85rem;color: var(--text-muted);line-height: 1.75;border-top: 1px solid var(--border);}.demo-expandable-card .exp-toggle:checked ~ .exp-header .exp-icon{transform: rotate(45deg);border-color: var(--accent);color: var(--accent);}.demo-expandable-card .exp-toggle:checked ~ .exp-body{grid-template-rows: 1fr;}.demo-expandable-card code{font-family: var(--font-mono);font-size: .8em;color: var(--text-muted);background: var(--surface-2);padding: .15em .4em;border-radius: 4px;border: 1px solid var(--border);}@media (prefers-reduced-motion: reduce){.demo-expandable-card .ec-body, .demo-expandable-card .ec-icon{transition: none;}}
.demo-text-ticker .ticker-stack{display: flex;flex-direction: column;align-items: center;gap: 2.5rem;}.demo-text-ticker .ticker-line{display: flex;align-items: center;gap: .45em;font-size: 1.6rem;font-weight: 700;color: var(--text);letter-spacing: -.02em;}.demo-text-ticker .ticker-static{color: var(--text-muted);font-weight: 400;}.demo-text-ticker .ticker-slot{height: 1.15em;overflow: hidden;position: relative;}.demo-text-ticker .ticker-inner{display: flex;flex-direction: column;animation: ticker-up 4s ease-in-out infinite;}.demo-text-ticker .ticker-word{height: 1.15em;display: flex;align-items: center;color: var(--accent);font-family: var(--font-serif);font-style: italic;font-weight: 400;white-space: nowrap;line-height: 1;}@keyframes ticker-up{0%{transform: translateY(0);}18%{transform: translateY(0);}25%{transform: translateY(-1.15em);}43%{transform: translateY(-1.15em);}50%{transform: translateY(-2.3em);}68%{transform: translateY(-2.3em);}75%{transform: translateY(-3.45em);}93%{transform: translateY(-3.45em);}100%{transform: translateY(-4.6em);}}@media (prefers-reduced-motion: reduce){.demo-text-ticker .tk-cut-inner, .demo-text-ticker .tk-roll-inner{animation: none;}}
.demo-redacted-text .redacted-block{max-width: 400px;font-size: .9rem;line-height: 1.85;color: var(--text);}.demo-redacted-text p{margin-bottom: 1rem;}:is(.demo-redacted-text p):last-child{margin-bottom: 0;}.demo-redacted-text .redacted{display: inline;filter: blur(5px);cursor: pointer;transition: filter .4s ease;user-select: none;color: var(--text);border-radius: 3px;padding: 0 .1em;}:is(.demo-redacted-text .redacted):hover{filter: blur(0);}.demo-redacted-text .hint{font-family: var(--font-mono);font-size: .7rem;color: var(--text-muted);display: block;margin-top: 1.25rem;letter-spacing: .04em;}@media (prefers-reduced-motion: reduce){.demo-redacted-text .redacted, .demo-redacted-text .redacted-bar{transition: none;}}
.demo-marquee-text .marquee-stack{width: 100%;display: flex;flex-direction: column;gap: 1rem;overflow: hidden;}.demo-marquee-text .marquee-track{overflow: hidden;border-top: 1px solid var(--border);border-bottom: 1px solid var(--border);padding: .7rem 0;}.demo-marquee-text .marquee-inner{display: inline-flex;white-space: nowrap;animation: marquee-scroll 16s linear infinite;}:is(.demo-marquee-text .marquee-inner):hover{animation-play-state: paused;}.demo-marquee-text .marquee-inner-rev{animation-direction: reverse;animation-duration: 12s;}.demo-marquee-text .marquee-item{padding: 0 2rem;font-family: var(--font-mono);font-size: .75rem;letter-spacing: .08em;color: var(--text-muted);text-transform: uppercase;display: inline-flex;align-items: center;gap: 2rem;}:is(.demo-marquee-text .marquee-item)::after{content: "✦";color: var(--accent);font-size: .6rem;}.demo-marquee-text .marquee-item-accent{color: var(--accent);}@keyframes marquee-scroll{from{transform: translateX(0);}to{transform: translateX(-50%);}}@media (prefers-reduced-motion: reduce){.demo-marquee-text .marquee-inner, .demo-marquee-text .marquee-vinner{animation: none;}.demo-marquee-text .marquee-track, .demo-marquee-text .marquee-vtrack{overflow: auto;}}
.demo-scroll-reveal .reveal-frame{width: 100%;height: 320px;overflow-y: auto;scroll-snap-type: y proximity;display: flex;flex-direction: column;gap: 0;}.demo-scroll-reveal .reveal-section{padding: 2.5rem 1.5rem;display: flex;flex-direction: column;align-items: flex-start;gap: 1rem;border-bottom: 1px solid var(--border);scroll-snap-align: start;}:is(.demo-scroll-reveal .reveal-section):last-child{border-bottom: none;}.demo-scroll-reveal .reveal-heading{font-size: 1.4rem;font-weight: 800;letter-spacing: -.03em;color: var(--text);animation: reveal-clip linear both;animation-timeline: view(block);animation-range: entry 0% entry 50%;}.demo-scroll-reveal .reveal-text{font-size: .875rem;color: var(--text-muted);line-height: 1.75;max-width: 52ch;animation: reveal-fade linear both;animation-timeline: view(block);animation-range: entry 5% entry 55%;}.demo-scroll-reveal .reveal-tag{display: inline-flex;font-family: var(--font-mono);font-size: .65rem;letter-spacing: .08em;text-transform: uppercase;color: var(--accent);border: 1px solid var(--accent-dim);background: var(--accent-dim);padding: .2rem .6rem;border-radius: 999px;animation: reveal-fade linear both;animation-timeline: view(block);animation-range: entry 0% entry 45%;}.demo-scroll-reveal .scroll-hint{text-align: center;font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);letter-spacing: .08em;padding: 1rem;animation: hint-bounce 1.5s ease-in-out infinite;}@keyframes reveal-clip{from{clip-path: inset(0 100% 0 0);opacity: 0;}to{clip-path: inset(0 0% 0 0);opacity: 1;}}@keyframes reveal-fade{from{opacity: 0;transform: translateY(16px);}to{opacity: 1;transform: translateY(0);}}@keyframes hint-bounce{0%, 100%{transform: translateY(0);}50%{transform: translateY(4px);}}@media (prefers-reduced-motion: reduce){.demo-scroll-reveal .reveal-heading, .demo-scroll-reveal .reveal-text, .demo-scroll-reveal .reveal-tag, .demo-scroll-reveal .reveal-card, .demo-scroll-reveal .scroll-hint{animation: none;}}
.demo-css-calendar .cal-center{display: flex;justify-content: center;}.demo-css-calendar .cal-wrap{background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;width: 100%;max-width: 380px;}.demo-css-calendar .cal-header{padding: 1rem 1.25rem;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid var(--border);}.demo-css-calendar .cal-month-label{font-weight: 700;font-size: .95rem;color: var(--text);}.demo-css-calendar .cal-nav{display: flex;gap: .4rem;}.demo-css-calendar .cal-nav-btn{background: none;border: 1px solid var(--border);color: var(--text-muted);width: 28px;height: 28px;border-radius: var(--radius);cursor: pointer;font-size: .8rem;display: flex;align-items: center;justify-content: center;transition: border-color .15s, color .15s;}:is(.demo-css-calendar .cal-nav-btn):hover{border-color: var(--accent);color: var(--accent);}.demo-css-calendar .cal-grid{display: grid;grid-template-columns: repeat(7, 1fr);padding: .25rem .5rem .75rem;}.demo-css-calendar .cal-day-name{font-family: var(--font-mono);font-size: .58rem;text-transform: uppercase;letter-spacing: .07em;color: var(--text-muted);text-align: center;padding: .6rem .25rem .4rem;}.demo-css-calendar .cal-day{aspect-ratio: 1;display: flex;align-items: center;justify-content: center;font-size: .8rem;color: var(--text);cursor: pointer;border-radius: 50%;transition: background .15s, color .15s;margin: .1rem;position: relative;}:is(.demo-css-calendar .cal-day):hover{background: var(--surface-2);}.cal-today:is(.demo-css-calendar .cal-day){background: var(--accent);color: var(--bg);font-weight: 700;}.cal-today:is(.demo-css-calendar .cal-day):hover{background: var(--accent);}.cal-muted:is(.demo-css-calendar .cal-day){color: var(--text-muted);opacity: .35;}.cal-has-event:is(.demo-css-calendar .cal-day)::after{content: "";position: absolute;bottom: 3px;left: 50%;transform: translateX(-50%);width: 3px;height: 3px;border-radius: 50%;background: var(--accent);}.cal-has-event.cal-today:is(.demo-css-calendar .cal-day)::after{background: #0c0c0d;}.demo-css-calendar .cal-footer{border-top: 1px solid var(--border);padding: .6rem 1rem;display: flex;gap: 1.25rem;}.demo-css-calendar .cal-legend{display: flex;align-items: center;gap: .4rem;font-family: var(--font-mono);font-size: .62rem;color: var(--text-muted);letter-spacing: .04em;}:is(.demo-css-calendar .cal-legend)::before{content: "";width: 8px;height: 8px;border-radius: 50%;background: var(--accent);}.cal-legend-today:is(.demo-css-calendar .cal-legend)::before{border-radius: 50%;}
.demo-qr-code .qr-stack{display: flex;flex-direction: column;align-items: center;gap: 1.5rem;}.demo-qr-code .qr-wrap{background: #ffffff;border-radius: var(--radius-lg);padding: 1.25rem;display: inline-flex;flex-direction: column;align-items: center;gap: 1rem;}.demo-qr-code .qr-pixel{width: 10px;height: 10px;margin: 0 80px 80px 0;background: #1a1a1a;border-radius: 0;box-shadow: 10px 0 0 0 #1a1a1a, 20px 0 0 0 #1a1a1a, 0 10px 0 0 #1a1a1a, 10px 10px 0 0 #1a1a1a, 20px 10px 0 0 #1a1a1a, 0 20px 0 0 #1a1a1a, 10px 20px 0 0 #1a1a1a, 20px 20px 0 0 #1a1a1a, 60px 0 0 0 #1a1a1a, 70px 0 0 0 #1a1a1a, 80px 0 0 0 #1a1a1a, 60px 10px 0 0 #1a1a1a, 70px 10px 0 0 #1a1a1a, 80px 10px 0 0 #1a1a1a, 60px 20px 0 0 #1a1a1a, 70px 20px 0 0 #1a1a1a, 80px 20px 0 0 #1a1a1a, 0 60px 0 0 #1a1a1a, 10px 60px 0 0 #1a1a1a, 20px 60px 0 0 #1a1a1a, 0 70px 0 0 #1a1a1a, 10px 70px 0 0 #1a1a1a, 20px 70px 0 0 #1a1a1a, 0 80px 0 0 #1a1a1a, 10px 80px 0 0 #1a1a1a, 20px 80px 0 0 #1a1a1a, 40px 10px 0 0 #1a1a1a, 40px 20px 0 0 #1a1a1a, 50px 20px 0 0 #1a1a1a, 20px 30px 0 0 #1a1a1a, 40px 30px 0 0 #1a1a1a, 60px 30px 0 0 #1a1a1a, 80px 30px 0 0 #1a1a1a, 10px 40px 0 0 #1a1a1a, 30px 40px 0 0 #1a1a1a, 50px 40px 0 0 #1a1a1a, 70px 40px 0 0 #1a1a1a, 0 50px 0 0 #1a1a1a, 20px 50px 0 0 #1a1a1a, 40px 50px 0 0 #1a1a1a, 60px 50px 0 0 #1a1a1a, 80px 50px 0 0 #1a1a1a, 40px 60px 0 0 #1a1a1a, 60px 60px 0 0 #1a1a1a, 80px 60px 0 0 #1a1a1a, 60px 70px 0 0 #1a1a1a, 40px 80px 0 0 #1a1a1a, 60px 80px 0 0 #1a1a1a, 80px 80px 0 0 #1a1a1a;}.demo-qr-code .qr-label{font-family: var(--font-mono);font-size: .65rem;letter-spacing: .1em;text-transform: uppercase;color: #666;}.demo-qr-code .qr-caption{font-family: var(--font-mono);font-size: .7rem;color: var(--text-muted);letter-spacing: .04em;text-align: center;}.demo-qr-code .qr-caption code{font-family: var(--font-mono);font-size: .95em;color: var(--accent);}
.demo-css-art .art-center{display: flex;align-items: center;justify-content: center;}.demo-css-art .solar-system{position: relative;width: 280px;height: 280px;}.demo-css-art .star{position: absolute;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 36px;height: 36px;background: radial-gradient(circle at 35% 35%, var(--yellow), #ff9040);box-shadow: 0 0 12px 4px rgba(255, 212, 68, 0.5), 0 0 40px 10px rgba(255, 212, 68, 0.15);animation: star-pulse 3s ease-in-out infinite;}.demo-css-art .orbit{position: absolute;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px dashed rgba(255, 255, 255, .1);animation: orbit-spin linear infinite;}:is(.demo-css-art .orbit) .planet{position: absolute;border-radius: 50%;top: 50%;left: 0;}.demo-css-art .orbit-1{width: 90px;height: 90px;animation-duration: 4s;}:is(.demo-css-art .orbit-1) .planet{width: 10px;height: 10px;background: radial-gradient(circle at 35% 35%, var(--sky), #0055aa);margin-top: -5px;margin-left: -5px;box-shadow: 0 0 6px rgba(56, 189, 248, .6);}.demo-css-art .orbit-2{width: 156px;height: 156px;animation-duration: 8s;}:is(.demo-css-art .orbit-2) .planet{width: 14px;height: 14px;background: radial-gradient(circle at 35% 35%, var(--coral), #991111);margin-top: -7px;margin-left: -7px;box-shadow: 0 0 8px rgba(255, 107, 107, .5);}.demo-css-art .orbit-3{width: 224px;height: 224px;animation-duration: 14s;}:is(.demo-css-art .orbit-3) .planet{width: 11px;height: 11px;background: radial-gradient(circle at 35% 35%, var(--violet), #550099);margin-top: -5.5px;margin-left: -5.5px;box-shadow: 0 0 7px rgba(192, 132, 252, .5);}.demo-css-art .orbit-4{width: 272px;height: 272px;animation-duration: 22s;}:is(.demo-css-art .orbit-4) .planet{width: 8px;height: 8px;background: radial-gradient(circle at 35% 35%, var(--teal), #006644);margin-top: -4px;margin-left: -4px;box-shadow: 0 0 6px rgba(87, 217, 163, .5);}.demo-css-art .star-field{position: absolute;inset: 0;border-radius: 50%;pointer-events: none;}:is(.demo-css-art .star-field)::before,:is(.demo-css-art .star-field)::after{content: "";position: absolute;border-radius: 50%;background: white;}:is(.demo-css-art .star-field)::before{width: 2px;height: 2px;top: 20%;left: 15%;box-shadow: 40px -10px 0 0 rgba(255,255,255,.4), 80px 30px 0 0 rgba(255,255,255,.3), -20px 60px 0 0 rgba(255,255,255,.5), 110px -20px 0 0 rgba(255,255,255,.3), -30px -10px 0 0 rgba(255,255,255,.4), 120px 70px 0 0 rgba(255,255,255,.2);}:is(.demo-css-art .star-field)::after{width: 1px;height: 1px;top: 60%;left: 70%;box-shadow: -40px 20px 0 0 rgba(255,255,255,.4), 20px -30px 0 0 rgba(255,255,255,.3), -80px -10px 0 0 rgba(255,255,255,.5), 30px 40px 0 0 rgba(255,255,255,.2);}@keyframes orbit-spin{to{transform: translate(-50%, -50%) rotate(360deg);}}@keyframes star-pulse{0%, 100%{box-shadow: 0 0 12px 4px rgba(255, 212, 68, 0.5), 0 0 40px 10px rgba(255, 212, 68, 0.15);}50%{box-shadow: 0 0 18px 8px rgba(255, 212, 68, 0.7), 0 0 60px 20px rgba(255, 212, 68, 0.25);}}@media (prefers-reduced-motion: reduce){.demo-css-art .orbit, .demo-css-art .star{animation: none;}}
.demo-split-panel .split-frame{width: 100%;display: flex;border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;height: 260px;}.demo-split-panel .split-left{resize: horizontal;overflow: auto;min-width: 80px;max-width: 70%;width: 45%;border-right: 1px solid var(--border);background: var(--surface);padding: 1.25rem;display: flex;flex-direction: column;gap: .75rem;flex-shrink: 0;position: relative;}:is(.demo-split-panel .split-left)::after{content: "⠿";position: absolute;bottom: .4rem;right: .35rem;font-size: .7rem;color: var(--text-muted);opacity: .5;pointer-events: none;}.demo-split-panel .split-right{flex: 1;background: var(--surface-2);padding: 1.25rem;display: flex;flex-direction: column;gap: .75rem;overflow: auto;}.demo-split-panel .split-label{font-family: var(--font-mono);font-size: .6rem;letter-spacing: .1em;text-transform: uppercase;color: var(--text-muted);margin-bottom: .25rem;}.demo-split-panel .split-item{background: var(--surface-2);border: 1px solid var(--border);border-radius: var(--radius);padding: .5rem .75rem;font-size: .8rem;color: var(--text);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex-shrink: 0;}.demo-split-panel .split-right .split-item{background: var(--surface);}.demo-split-panel .split-hint{font-family: var(--font-mono);font-size: .65rem;color: var(--accent);margin-top: auto;letter-spacing: .04em;}
.demo-scroll-triggered-reveal .streveal-frame{width: 100%;height: 320px;overflow-y: auto;display: flex;flex-direction: column;gap: 0;}.demo-scroll-triggered-reveal .reveal-item{padding: 1.5rem;border-bottom: 1px solid var(--border);display: flex;gap: 1rem;align-items: flex-start;animation: streveal-up linear both;animation-timeline: view(block);animation-range: entry 0% entry 45%;}:is(.demo-scroll-triggered-reveal .reveal-item):last-child{border-bottom: none;}.demo-scroll-triggered-reveal .reveal-icon{width: 36px;height: 36px;border-radius: var(--radius);display: flex;align-items: center;justify-content: center;font-size: 1rem;flex-shrink: 0;}.demo-scroll-triggered-reveal .reveal-icon-teal{background: var(--teal-dim);color: var(--teal);}.demo-scroll-triggered-reveal .reveal-icon-coral{background: var(--coral-dim);color: var(--coral);}.demo-scroll-triggered-reveal .reveal-icon-violet{background: var(--violet-dim);color: var(--violet);}.demo-scroll-triggered-reveal .reveal-icon-sky{background: var(--sky-dim);color: var(--sky);}.demo-scroll-triggered-reveal .reveal-icon-orange{background: var(--orange-dim);color: var(--orange);}.demo-scroll-triggered-reveal .reveal-icon-yellow{background: var(--yellow-dim);color: var(--yellow);}.demo-scroll-triggered-reveal .reveal-body{flex: 1;}.demo-scroll-triggered-reveal .reveal-title{font-size: .875rem;font-weight: 600;color: var(--text);margin-bottom: .25rem;}.demo-scroll-triggered-reveal .reveal-desc{font-size: .8rem;color: var(--text-muted);line-height: 1.6;}.demo-scroll-triggered-reveal .scroll-hint{text-align: center;font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);letter-spacing: .08em;padding: 1rem;animation: hint-bounce 1.5s ease-in-out infinite;flex-shrink: 0;}@keyframes streveal-up{from{opacity: 0;transform: translateY(32px);}to{opacity: 1;transform: translateY(0);}}@keyframes hint-bounce{0%, 100%{transform: translateY(0);}50%{transform: translateY(4px);}}@media (prefers-reduced-motion: reduce){.demo-scroll-triggered-reveal .reveal-item, .demo-scroll-triggered-reveal .streveal-alt, .demo-scroll-triggered-reveal .streveal-cardx, .demo-scroll-triggered-reveal .scroll-hint{animation: none;}}
.demo-blend-difference{flex-direction: column;gap: 1.5rem;width: 100%;}.demo-blend-difference .blend-panel{display: flex;flex-direction: column;gap: .6rem;width: 100%;}.demo-blend-difference .blend-stage{position: relative;width: 100%;height: 150px;overflow: hidden;border-radius: var(--radius-lg);background: #0c0c0d;display: flex;align-items: center;justify-content: center;isolation: isolate;}.demo-blend-difference .blend-word{margin: 0;font-size: 2.6rem;font-weight: 800;letter-spacing: -.02em;color: #f0f0f0;user-select: none;}.demo-blend-difference .blend-bar{position: absolute;top: 0;bottom: 0;width: 22%;background: #ffffff;mix-blend-mode: difference;animation: blend-sweep 4s ease-in-out infinite;}.demo-blend-difference .blend-orbit{position: relative;width: 100%;height: 150px;overflow: hidden;border-radius: var(--radius-lg);background: #0c0c0d;isolation: isolate;}.demo-blend-difference .orb{position: absolute;top: 50%;left: 50%;width: 104px;height: 104px;margin: -52px 0 0 -52px;border-radius: 50%;mix-blend-mode: difference;animation: blend-orbit 7s linear infinite;}.demo-blend-difference .orb-red{background: #ff3b30;}.demo-blend-difference .orb-green{background: #34ff7a;animation-delay: -2.33s;}.demo-blend-difference .orb-blue{background: #3b6bff;animation-delay: -4.66s;}.demo-blend-difference .blend-caption{font-family: var(--font-mono);font-size: .68rem;color: var(--text-muted);letter-spacing: .03em;}@keyframes blend-sweep{0%{left: -25%;}50%{left: 100%;}100%{left: -25%;}}@keyframes blend-orbit{from{transform: rotate(0deg) translateX(30px);}to{transform: rotate(360deg) translateX(30px);}}@media (prefers-reduced-motion: reduce){.demo-blend-difference .blend-bar, .demo-blend-difference .orb{animation: none;}.demo-blend-difference .blend-bar{left: 26%;}}
.demo-before-after{--ba-w: 480px;--ba-h: 300px;flex-direction: column;align-items: center;gap: 1rem;}.demo-before-after .ba-frame{position: relative;width: var(--ba-w);height: var(--ba-h);max-width: 100%;overflow: hidden;border-radius: var(--radius-lg);border: 1px solid var(--border);}.demo-before-after .ba-img{display: block;width: var(--ba-w);height: var(--ba-h);object-fit: cover;}.demo-before-after .ba-before{position: absolute;top: 0;left: 0;height: 100%;width: 55%;min-width: 28px;max-width: 100%;overflow: hidden;resize: horizontal;}.demo-before-after .ba-before .ba-img{filter: grayscale(1) contrast(.88) brightness(1.04);}:is(.demo-before-after .ba-before)::after{content: "";position: absolute;top: 0;right: 0;bottom: 0;width: 3px;background: var(--accent);pointer-events: none;}:is(.demo-before-after .ba-before)::before{content: "";position: absolute;right: 3px;bottom: 3px;width: 16px;height: 16px;border-radius: 4px;background: var(--accent);pointer-events: none;z-index: 1;}.demo-before-after .ba-tag{position: absolute;top: 10px;font-family: var(--font-mono);font-size: .6rem;letter-spacing: .08em;text-transform: uppercase;padding: .2rem .5rem;border-radius: 999px;background: rgba(12, 12, 13, .72);color: #f0f0f0;pointer-events: none;}.demo-before-after .ba-tag-before{left: 10px;}.demo-before-after .ba-tag-after{right: 10px;}.demo-before-after .ba-hint{font-family: var(--font-mono);font-size: .7rem;color: var(--text-muted);}@media (hover: none){.demo-before-after .ba-wipe-frame .ba-wipe-pane{width: 55%;transition: none;}}@media (max-width: 560px){.demo-before-after{--ba-w: 300px;--ba-h: 200px;}}@media (prefers-reduced-motion: reduce){.demo-before-after .ba-swap-frame .ba-layer, .demo-before-after .ba-wipe-frame .ba-wipe-pane{transition-duration: .01ms;}}
.demo-starburst{flex-direction: column;align-items: center;gap: 1rem;}.demo-starburst .sb-burst{position: relative;width: 230px;height: 230px;display: flex;align-items: center;justify-content: center;}.demo-starburst .sb-rays{position: absolute;inset: 0;border-radius: 50%;background: repeating-conic-gradient(from 0deg, var(--accent) 0deg 5deg, transparent 5deg 15deg);-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 27%, #000 36%, #000 60%, transparent 80%);mask-image: radial-gradient(circle at 50% 50%, transparent 27%, #000 36%, #000 60%, transparent 80%);animation: sb-turn 48s linear infinite;}.demo-starburst .sb-rays-fine{background: repeating-conic-gradient(from 0deg, var(--sky) 0deg 1.6deg, transparent 1.6deg 9deg);opacity: .5;animation: sb-turn-back 72s linear infinite;}@keyframes sb-turn{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}@keyframes sb-turn-back{from{transform: rotate(0deg);}to{transform: rotate(-360deg);}}.demo-starburst .sb-core{position: relative;z-index: 1;width: 108px;height: 108px;border-radius: 50%;background: var(--surface);border: 1px solid var(--border);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: .1rem;}.demo-starburst .sb-core b{font-size: 1.5rem;font-weight: 800;letter-spacing: -.03em;color: var(--accent);line-height: 1;}.demo-starburst .sb-core span{font-family: var(--font-mono);font-size: .55rem;letter-spacing: .12em;text-transform: uppercase;color: var(--text-muted);}.demo-starburst .sb-hint{font-family: var(--font-mono);font-size: .7rem;color: var(--text-muted);}@media (prefers-reduced-motion: reduce){.demo-starburst .sb-rays, .demo-starburst .sb-badge, .demo-starburst .sb-badge-text, .demo-starburst .sb-banner-rays{animation: none;}}