.demo-toggle-switch .toggle-label{display: inline-flex;align-items: center;gap: 1rem;cursor: pointer;font-family: system-ui, sans-serif;font-size: 1rem;user-select: none;}.demo-toggle-switch .toggle-input{display: none;}.demo-toggle-switch .toggle-track{width: 52px;height: 28px;background: var(--border);border-radius: 999px;position: relative;transition: background .25s;}:is(.demo-toggle-switch .toggle-track)::after{content: "";position: absolute;top: 3px;left: 3px;width: 22px;height: 22px;background: var(--surface);border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.2);transition: transform .25s;}.demo-toggle-switch .toggle-input:checked + .toggle-track{background: var(--accent);}.demo-toggle-switch .toggle-input:checked + .toggle-track::after{transform: translateX(24px);}@media (prefers-reduced-motion: reduce){.demo-toggle-switch .toggle-track, .demo-toggle-switch .toggle-track::after, .demo-toggle-switch .toggle-solo{transition: none;}}
.demo-floating-labels{flex-direction: column;align-items: center;}.demo-floating-labels .field{position: relative;margin: .5rem 0;}.demo-floating-labels input{width: 240px;padding: 1.25rem 1rem .5rem;border: 2px solid var(--border);border-radius: 8px;font-size: 1rem;font-family: inherit;background: var(--surface);color: var(--text);outline: none;transition: border-color .2s;}:is(.demo-floating-labels input):focus{border-color: var(--accent);}:is(.demo-floating-labels input):focus + label,:is(.demo-floating-labels input):not(:placeholder-shown) + label{top: .5rem;font-size: .75rem;color: var(--accent);transform: none;}.demo-floating-labels label{position: absolute;top: 50%;left: 1rem;transform: translateY(-50%);font-size: 1rem;color: var(--text-muted);pointer-events: none;transition: top .2s, font-size .2s, color .2s;}@media (prefers-reduced-motion: reduce){.demo-floating-labels label{transition: none;}}
.demo-star-rating .stars{display: inline-flex;flex-direction: row-reverse;gap: .25rem;}:is(.demo-star-rating .stars) input{display: none;}:is(.demo-star-rating .stars) label{font-size: 2rem;color: var(--text-muted);cursor: pointer;transition: color .15s;}:is(.demo-star-rating .stars) input:checked ~ label,:is(.demo-star-rating .stars) label:hover,:is(.demo-star-rating .stars) label:hover ~ label{color: var(--yellow);}@media (prefers-reduced-motion: reduce){.demo-star-rating .star-forward label{transition: none;}}
.demo-expandable-search .search-wrap{display: inline-flex;align-items: center;background: var(--surface-2);border: 2px solid var(--border);border-radius: 999px;padding: .5rem .75rem;transition: border-color .25s, background .25s;}:is(.demo-expandable-search .search-wrap):focus-within{background: var(--surface);border-color: var(--accent);}.demo-expandable-search .search-icon{display: flex;color: var(--text-muted);flex-shrink: 0;}.demo-expandable-search .search-input{border: none;background: transparent;outline: none;font-size: .95rem;font-family: inherit;width: 120px;padding: 0 .5rem;transition: width .35s;color: var(--text);}:is(.demo-expandable-search .search-input):focus{width: 240px;}@media (prefers-reduced-motion: reduce){.demo-expandable-search .mini-input, .demo-expandable-search .sg-panel, .demo-expandable-search .search-input{transition: none;}}
.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-dark-light-mode{flex-direction: column;align-items: center;gap: 1.25rem;}.demo-dark-light-mode .theme-check{display: none;}.demo-dark-light-mode .theme-toggle{display: inline-flex;align-items: center;gap: .75rem;cursor: pointer;user-select: none;font-size: .95rem;}.demo-dark-light-mode .theme-track{width: 52px;height: 28px;background: var(--orange);border-radius: 999px;position: relative;transition: background .3s;}:is(.demo-dark-light-mode .theme-track)::before{content: "☀️";position: absolute;top: 50%;left: 5px;transform: translateY(-50%);font-size: .9rem;transition: opacity .3s;}:is(.demo-dark-light-mode .theme-track)::after{content: "";position: absolute;top: 3px;left: 3px;width: 22px;height: 22px;background: var(--surface);border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.2);transition: transform .3s;}.demo-dark-light-mode .theme-check:checked + .theme-toggle .theme-track{background: var(--surface-2);}.demo-dark-light-mode .theme-check:checked + .theme-toggle .theme-track::before{content: "🌙";}.demo-dark-light-mode .theme-check:checked + .theme-toggle .theme-track::after{transform: translateX(24px);}.demo-dark-light-mode .theme-preview{margin-top: 1.25rem;padding: 1.25rem;border-radius: 10px;background: var(--orange-dim);color: var(--text);border: 2px solid var(--orange);font-size: .9rem;transition: background .3s, color .3s, border-color .3s;}.demo-dark-light-mode .theme-check:checked ~ .theme-preview{background: var(--surface);color: var(--text);border-color: var(--accent);}@media (prefers-color-scheme: dark){.demo-dark-light-mode .dlm-r-sys:checked ~ .dlm-panel{--dlm-bg: #141415;--dlm-fg: #f0f0f0;--dlm-muted: #88888f;--dlm-line: #2a2a2d;--dlm-accent: #b8ff57;--dlm-scheme: dark;}}
.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-tab-navigation .tabs{display: flex;flex-direction: column;width: 320px;}.demo-tab-navigation .tab-inputs{display: none;}.demo-tab-navigation .tab-labels{display: flex;border-bottom: 2px solid var(--border);}.demo-tab-navigation .tab-label{padding: .6rem 1.1rem;cursor: pointer;font-size: .9rem;font-weight: 500;color: var(--text-muted);border-bottom: 2px solid transparent;margin-bottom: -2px;user-select: none;transition: color .2s;}:is(.demo-tab-navigation .tab-label):hover{color: var(--accent);}.demo-tab-navigation .tab-panel{display: none;padding: 1.25rem 0;font-size: .9rem;color: var(--text);}#demo-tab-navigation-t1:checked ~ .tab-labels label[for="demo-tab-navigation-t1"], #demo-tab-navigation-t2:checked ~ .tab-labels label[for="demo-tab-navigation-t2"], #demo-tab-navigation-t3:checked ~ .tab-labels label[for="demo-tab-navigation-t3"]{color: var(--accent);border-bottom-color: var(--accent);}#demo-tab-navigation-t1:checked ~ .tab-panels #demo-tab-navigation-p1, #demo-tab-navigation-t2:checked ~ .tab-panels #demo-tab-navigation-p2, #demo-tab-navigation-t3:checked ~ .tab-panels #demo-tab-navigation-p3{display: block;}@media (prefers-reduced-motion: reduce){.demo-tab-navigation .stab-slider{transition: none;}}
.demo-hover-tooltip .tip{position: relative;display: inline-block;cursor: default;border-bottom: 2px dashed var(--accent);color: var(--accent);font-weight: 500;}:is(.demo-hover-tooltip .tip)::before{content: attr(data-tip);position: absolute;bottom: calc(100% + 8px);left: 50%;transform: translateX(-50%);background: var(--text);color: var(--bg);font-size: .8rem;font-weight: 400;white-space: nowrap;padding: .4rem .7rem;border-radius: 6px;pointer-events: none;opacity: 0;z-index: 1;transition: opacity .2s;}:is(.demo-hover-tooltip .tip)::after{content: "";position: absolute;bottom: calc(100% + 2px);left: 50%;transform: translateX(-50%);border: 6px solid transparent;border-top-color: var(--text);pointer-events: none;opacity: 0;transition: opacity .2s;}:is(.demo-hover-tooltip .tip):hover::before,:is(.demo-hover-tooltip .tip):hover::after{opacity: 1;}.card-preview .demo-hover-tooltip{pointer-events: auto;}
.demo-custom-checkboxes .check-group{display: flex;flex-direction: column;gap: .5rem;}.demo-custom-checkboxes .check-label{display: inline-flex;align-items: center;gap: .65rem;cursor: pointer;font-size: .95rem;user-select: none;margin: .25rem 0;}.demo-custom-checkboxes input[type="checkbox"]{appearance: none;-webkit-appearance: none;width: 20px;height: 20px;border: 2px solid var(--border);border-radius: 5px;flex-shrink: 0;position: relative;transition: border-color .2s, background .2s;cursor: pointer;}:is(.demo-custom-checkboxes input[type="checkbox"]):checked{background: var(--accent);border-color: var(--accent);}:is(.demo-custom-checkboxes input[type="checkbox"]):checked::after{content: "";position: absolute;top: 2px;left: 5px;width: 6px;height: 10px;border: 2px solid var(--bg);border-top: none;border-left: none;transform: rotate(45deg);}.demo-custom-checkboxes input[type="checkbox"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 2px;}@media (prefers-reduced-motion: reduce){.demo-custom-checkboxes input[type="checkbox"], .demo-custom-checkboxes .todo-text, .demo-custom-checkboxes .check-card{transition: none;}}
.demo-custom-radio .radio-group{display: flex;flex-direction: column;gap: .5rem;}.demo-custom-radio .radio-label{display: inline-flex;align-items: center;gap: .65rem;cursor: pointer;font-size: .95rem;user-select: none;margin: .25rem 0;}.demo-custom-radio input[type="radio"]{appearance: none;-webkit-appearance: none;width: 20px;height: 20px;border: 2px solid var(--border);border-radius: 50%;flex-shrink: 0;position: relative;transition: border-color .2s;cursor: pointer;}:is(.demo-custom-radio input[type="radio"]):checked{border-color: var(--accent);}:is(.demo-custom-radio input[type="radio"]):checked::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background: var(--accent);border-radius: 50%;}.demo-custom-radio input[type="radio"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-custom-radio input[type="radio"], .demo-custom-radio .seg span, .demo-custom-radio .radio-anim input[type="radio"]::after{transition: none;}}
.demo-range-slider input[type="range"]{-webkit-appearance: none;appearance: none;width: 220px;height: 6px;background: var(--border);border-radius: 999px;outline: none;cursor: pointer;}:is(.demo-range-slider input[type="range"])::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 22px;height: 22px;background: var(--accent);border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.35);transition: box-shadow .2s;}:is(.demo-range-slider input[type="range"]):hover::-webkit-slider-thumb{box-shadow: 0 1px 10px rgba(0,0,0,.5);}:is(.demo-range-slider input[type="range"])::-moz-range-thumb{width: 22px;height: 22px;background: var(--accent);border: none;border-radius: 50%;box-shadow: 0 1px 4px rgba(0,0,0,.35);}:is(.demo-range-slider input[type="range"])::-moz-range-track{background: var(--border);height: 6px;border-radius: 999px;}.demo-range-slider input[type="range"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 4px;}@media (prefers-reduced-motion: reduce){.demo-range-slider input[type="range"]::-webkit-slider-thumb{transition: none;}}
.demo-progress-bar .progress-row{display: flex;align-items: center;gap: 1rem;margin: .5rem 0;}.demo-progress-bar .progress-label{font-size: .85rem;color: var(--text-muted);width: 60px;flex-shrink: 0;}.demo-progress-bar progress{-webkit-appearance: none;appearance: none;flex: 1;height: 10px;border: none;border-radius: 999px;overflow: hidden;}:is(.demo-progress-bar progress)::-webkit-progress-bar{background: var(--surface-2);border-radius: 999px;}:is(.demo-progress-bar progress)::-webkit-progress-value{background: var(--accent);border-radius: 999px;transition: width .3s;}:is(.demo-progress-bar progress)::-moz-progress-bar{background: var(--accent);border-radius: 999px;}.success:is(.demo-progress-bar progress)::-webkit-progress-value{background: var(--teal);}.warning:is(.demo-progress-bar progress)::-webkit-progress-value{background: var(--orange);}.danger:is(.demo-progress-bar progress)::-webkit-progress-value{background: var(--coral);}.success:is(.demo-progress-bar progress)::-moz-progress-bar{background: var(--teal);}.warning:is(.demo-progress-bar progress)::-moz-progress-bar{background: var(--orange);}.danger:is(.demo-progress-bar progress)::-moz-progress-bar{background: var(--coral);}.shimmer:is(.demo-progress-bar progress)::-webkit-progress-value{background: linear-gradient(90deg, var(--accent) 30%, rgba(255,255,255,.3) 50%, var(--accent) 70% );background-size: 200% 100%;animation: progress-shimmer 1.4s linear infinite;}.shimmer:is(.demo-progress-bar progress)::-moz-progress-bar{background: linear-gradient(90deg, var(--accent) 30%, rgba(255,255,255,.3) 50%, var(--accent) 70% );background-size: 200% 100%;animation: progress-shimmer 1.4s linear infinite;}@keyframes progress-shimmer{0%{background-position: 200% 0;}100%{background-position: -200% 0;}}.demo-progress-bar .pb-list{width: 100%;max-width: 380px;display: flex;flex-direction: column;gap: 1rem;}@media (prefers-reduced-motion: reduce){.demo-progress-bar .pb-indet:indeterminate{animation: none;}.demo-progress-bar .shimmer::-webkit-progress-value{animation: none;}.demo-progress-bar .shimmer::-moz-progress-bar{animation: none;}.demo-progress-bar .pb-fill{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-skeleton-loader .skeleton-card{background: var(--surface-2);border: 1px solid var(--border);border-radius: 10px;padding: 1rem;width: 240px;box-shadow: 0 4px 20px rgba(0,0,0,.35);}.demo-skeleton-loader .skel{background-color: var(--border);background-image: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 80% );background-size: 200% 100%;background-repeat: no-repeat;border-radius: 6px;animation: shimmer 1.5s linear infinite;}body:has(#theme-toggle:checked) .demo-skeleton-loader .skel{background-image: linear-gradient(90deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0) 80% );}.demo-skeleton-loader .skel-avatar{width: 44px;height: 44px;border-radius: 50%;margin-bottom: .75rem;}.demo-skeleton-loader .skel-line{height: 12px;margin-bottom: .5rem;}.w-full:is(.demo-skeleton-loader .skel-line){width: 100%;}.w-3q:is(.demo-skeleton-loader .skel-line){width: 75%;}.w-half:is(.demo-skeleton-loader .skel-line){width: 50%;}body:has(#theme-toggle:checked) .demo-skeleton-loader .skeleton-card{background: var(--surface);}@keyframes shimmer{0%{background-position: 200% 0;}100%{background-position: -200% 0;}}@media (prefers-reduced-motion: reduce){.demo-skeleton-loader .skel, .demo-skeleton-loader .skel-p{animation: none;}}
.demo-hover-dropdown .dropdown{position: relative;display: inline-block;}:is(.demo-hover-dropdown .dropdown):hover .dropdown-arrow{transform: rotate(180deg);}:is(.demo-hover-dropdown .dropdown):hover .dropdown-menu{opacity: 1;visibility: visible;transform: translateY(0);}.demo-hover-dropdown .dropdown-trigger{display: inline-flex;align-items: center;gap: .4rem;padding: .55rem 1rem;background: var(--accent);color: var(--bg);border-radius: 8px;font-size: .9rem;font-weight: 500;cursor: default;user-select: none;}.demo-hover-dropdown .dropdown-arrow{transition: transform .2s;flex-shrink: 0;}.demo-hover-dropdown .dropdown-menu{position: absolute;top: calc(100% + 6px);left: 0;background: var(--surface);border: 1px solid var(--border);border-radius: 8px;box-shadow: 0 4px 16px rgba(0,0,0,.1);min-width: 160px;opacity: 0;visibility: hidden;transform: translateY(-6px);transition: opacity .2s, transform .2s, visibility .2s;}:is(.demo-hover-dropdown .dropdown-menu) a{display: block;padding: .6rem 1rem;font-size: .875rem;color: var(--text);text-decoration: none;transition: background .15s;}:is(:is(.demo-hover-dropdown .dropdown-menu) a):first-child{border-radius: 8px 8px 0 0;}:is(:is(.demo-hover-dropdown .dropdown-menu) a):last-child{border-radius: 0 0 8px 8px;}:is(:is(.demo-hover-dropdown .dropdown-menu) a):hover{background: var(--accent-dim);color: var(--accent);}.card-preview .demo-hover-dropdown{pointer-events: auto;}@media (prefers-reduced-motion: reduce){.demo-hover-dropdown .cdrop-menu, .demo-hover-dropdown .sdrop-menu, .demo-hover-dropdown .cdrop-arrow{transition: none;}}
.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-offcanvas-nav{position: relative;overflow: hidden;min-height: 260px;}.demo-offcanvas-nav .offcanvas-check{display: none;}.demo-offcanvas-nav .offcanvas-open{display: inline-flex;align-items: center;gap: .5rem;padding: .55rem 1rem;background: var(--accent);color: var(--bg);border-radius: 8px;cursor: pointer;font-size: .9rem;user-select: none;position: relative;z-index: 2;}.demo-offcanvas-nav .offcanvas-panel{position: absolute;top: 0;left: 0;width: 220px;height: 100%;background: var(--surface);transform: translateX(-100%);transition: transform .3s ease;z-index: 10;padding: 1.5rem 0;}:is(.demo-offcanvas-nav .offcanvas-panel) nav a{display: block;padding: .65rem 1.25rem;color: var(--text);font-size: .9rem;text-decoration: none;transition: background .15s;}:is(:is(.demo-offcanvas-nav .offcanvas-panel) nav a):hover{background: rgba(255,255,255,.08);}.demo-offcanvas-nav .offcanvas-check:checked ~ .offcanvas-panel{transform: translateX(0);}.demo-offcanvas-nav .offcanvas-close{display: block;padding: .65rem 1.25rem;color: var(--text-muted);font-size: .85rem;cursor: pointer;margin-bottom: .5rem;border-bottom: 1px solid rgba(255,255,255,.1);}.demo-offcanvas-nav .offcanvas-overlay{position: absolute;inset: 0;background: rgba(0,0,0,.45);opacity: 0;pointer-events: none;transition: opacity .3s;z-index: 9;}.demo-offcanvas-nav .offcanvas-check:checked ~ .offcanvas-overlay{opacity: 1;pointer-events: auto;}@media (prefers-reduced-motion: reduce){.demo-offcanvas-nav .ocp-panel, .demo-offcanvas-nav .ocp-shift, .demo-offcanvas-nav .ocb-panel, .demo-offcanvas-nav .ocb-burger span, .demo-offcanvas-nav .offcanvas-panel, .demo-offcanvas-nav .offcanvas-overlay{transition: none;}}
.demo-input-validation .field{position: relative;margin: .75rem 0;}.demo-input-validation input{display: block;width: 260px;padding: .65rem 2.5rem .65rem .9rem;border: 2px solid var(--border);border-radius: 8px;font-size: .95rem;font-family: inherit;background: var(--surface);color: var(--text);outline: none;transition: border-color .2s;}:is(.demo-input-validation input):focus{border-color: var(--accent);}:is(.demo-input-validation input):user-invalid{border-color: var(--coral);}:is(.demo-input-validation input):user-valid{border-color: var(--teal);}.demo-input-validation input:user-invalid ~ .field-icon::after,.demo-input-validation input:user-valid ~ .field-icon::after{content: "";display: block;width: 16px;height: 16px;-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center;}.demo-input-validation input:user-invalid ~ .field-icon::after{background: var(--coral);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");}.demo-input-validation input:user-valid ~ .field-icon::after{background: var(--teal);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");}.demo-input-validation .field-icon{position: absolute;right: .75rem;top: 50%;transform: translateY(-50%);font-size: 1rem;pointer-events: none;}.demo-input-validation input:user-invalid ~ .field-icon{color: var(--coral);}.demo-input-validation input:user-valid ~ .field-icon{color: var(--teal);}.demo-input-validation .hint{font-size: .75rem;color: var(--text-muted);margin-top: .25rem;}.demo-input-validation input:user-invalid ~ .hint{color: var(--coral);}.demo-input-validation input:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-input-validation input, .demo-input-validation .gate-submit{transition: none;}}
@property --target{syntax: "<integer>";initial-value: 0;inherits: false;}@property --decimal{syntax: "<integer>";initial-value: 0;inherits: false;}@keyframes count-up{from{--target: 0;}}@keyframes count-frac{from{--decimal: 0;}}.demo-number-counter .counter-grid{display: flex;gap: 2rem;flex-wrap: wrap;justify-content: center;}.demo-number-counter .counter-item{text-align: center;}.demo-number-counter .counter-value{font-size: 2.5rem;font-weight: 800;color: var(--accent);counter-reset: num var(--target);animation: count-up var(--count-dur, 2s) ease-out forwards;}:is(.demo-number-counter .counter-value)::after{content: counter(num);}[data-suffix]:is(.demo-number-counter .counter-value)::after{content: counter(num) attr(data-suffix);}.counter-decimal:is(.demo-number-counter .counter-value){counter-reset: num var(--target) frac var(--decimal);animation: count-up var(--count-dur, 2s) ease-out forwards, count-frac var(--count-dur, 2s) ease-out forwards;}.counter-decimal:is(.demo-number-counter .counter-value)::after{content: counter(num) "." counter(frac);}.demo-number-counter .counter-label{font-size: .85rem;color: var(--text-muted);margin-top: .25rem;}.demo-number-counter .counter-preview-wrap{display: flex;flex-direction: column;align-items: center;gap: 1.75rem;}.demo-number-counter .counter-controls{display: flex;gap: .35rem;justify-content: center;align-items: center;}.demo-number-counter .counter-speed-btn,.demo-number-counter .counter-restart-mini{display: inline-flex;align-items: center;justify-content: center;background: var(--surface-2);border: 1px solid var(--border);border-radius: 999px;color: var(--text-muted);font-size: .7rem;font-family: var(--font-mono);padding: .2rem .55rem;cursor: pointer;transition: color .15s, border-color .15s, background .15s;line-height: 1;}.demo-number-counter .counter-restart-mini{font-size: .8rem;padding: .2rem .45rem;}.demo-number-counter .counter-speed-btn.active,.demo-number-counter .counter-speed-btn:hover,.demo-number-counter .counter-restart-mini:hover{color: var(--text);border-color: var(--accent);background: var(--accent-dim);}.demo-number-counter .counter-restart{position: absolute;bottom: .75rem;right: .75rem;display: inline-flex;align-items: center;gap: .35rem;background: var(--surface-2);border: 1px solid var(--border);border-radius: 999px;color: var(--text-muted);font-size: .75rem;font-family: var(--font-mono);padding: .3rem .7rem;cursor: pointer;transition: color .15s, border-color .15s;}:is(.demo-number-counter .counter-restart):hover{color: var(--text);border-color: var(--text-muted);}@media (prefers-reduced-motion: reduce){.demo-number-counter .nc-meter{animation: none;--nc-pct: 100;}.demo-number-counter .nc-manual-value{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-scroll-spy .scroll-area{timeline-scope: --spy;border: 1px solid var(--border);border-radius: 10px;overflow: hidden;display: flex;flex-direction: column;}.demo-scroll-spy .scroll-header{position: sticky;top: 0;background: var(--surface);border-bottom: 1px solid var(--border);padding: .6rem 1rem .5rem;display: flex;flex-direction: column;gap: .45rem;z-index: 2;}.demo-scroll-spy .scroll-label{font-size: .7rem;font-family: var(--font-mono);color: var(--text-muted);text-transform: uppercase;letter-spacing: .08em;}.demo-scroll-spy .bar-track{height: 6px;background: var(--surface-2);border-radius: 999px;overflow: hidden;}.demo-scroll-spy .bar-local{height: 100%;width: 0%;background: linear-gradient(90deg, var(--accent), var(--teal));border-radius: 999px;animation: reading-progress linear;animation-timeline: --spy;animation-fill-mode: both;}.demo-scroll-spy .scroll-content{scroll-timeline-name: --spy;padding: 1.25rem 1.25rem 2rem;height: 280px;overflow-y: auto;}:is(.demo-scroll-spy .scroll-content) h3{font-size: .9rem;font-weight: 700;margin: 1.25rem 0 .5rem;color: var(--text);}:is(:is(.demo-scroll-spy .scroll-content) h3):first-child{margin-top: 0;}:is(.demo-scroll-spy .scroll-content) p{margin-bottom: .85rem;font-size: .875rem;color: var(--text-muted);line-height: 1.7;}:is(.demo-scroll-spy .scroll-content) code{font-family: var(--font-mono);font-size: .8em;color: var(--accent);}@keyframes reading-progress{from{width: 0%;}to{width: 100%;}}@supports (animation-timeline: scroll()){.demo-scroll-spy .inbar-bar{animation: inbar-fill linear both;animation-timeline: scroll();}}@supports (animation-timeline: scroll()){.demo-scroll-spy .spy-item{animation: spy-on linear;animation-timeline: --spy-rail;}.demo-scroll-spy .spy-i1{animation-range: 0% 25%;}.demo-scroll-spy .spy-i2{animation-range: 25% 50%;}.demo-scroll-spy .spy-i3{animation-range: 50% 75%;}.demo-scroll-spy .spy-i4{animation-range: 75% 100%;animation-fill-mode: forwards;}}
.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-multi-step-form .msf-radio{display: none;}.demo-multi-step-form .msf-wrap{max-width: 400px;margin: 0 auto;background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;}.demo-multi-step-form .msf-progress{display: flex;background: var(--surface-2);border-bottom: 1px solid var(--border);}.demo-multi-step-form .msf-step-label{flex: 1;padding: .6rem;text-align: center;font-size: .75rem;color: var(--text-muted);font-weight: 500;position: relative;}.demo-multi-step-form .msf-body{padding: 1.5rem;}.demo-multi-step-form .msf-panel{display: none;flex-direction: column;gap: .75rem;}:is(.demo-multi-step-form .msf-panel) h3{font-size: 1.1rem;margin-bottom: .25rem;}:is(.demo-multi-step-form .msf-panel) input[type="text"],:is(.demo-multi-step-form .msf-panel) input[type="email"],:is(.demo-multi-step-form .msf-panel) input[type="tel"]{width: 100%;padding: .65rem .9rem;background: var(--surface-2);border: 1px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;outline: none;transition: border-color .2s;}:is(.demo-multi-step-form .msf-panel) input:focus{border-color: var(--accent);}.demo-multi-step-form .msf-actions{display: flex;gap: .5rem;margin-top: .5rem;}.demo-multi-step-form .msf-btn{display: inline-block;padding: .6rem 1.2rem;background: var(--accent);color: var(--bg);border-radius: var(--radius);font-weight: 600;font-size: .9rem;cursor: pointer;text-align: center;user-select: none;transition: opacity .15s;}:is(.demo-multi-step-form .msf-btn):hover{opacity: .85;}.demo-multi-step-form .msf-btn-back{background: var(--surface-2);color: var(--text);border: 1px solid var(--border);}.demo-multi-step-form .msf-success{text-align: center;padding: 1rem 0;color: var(--teal);font-size: 1rem;}#msf-step1:checked ~ .msf-wrap .msf-panel-1{display: flex;}#msf-step2:checked ~ .msf-wrap .msf-panel-2{display: flex;}#msf-step3:checked ~ .msf-wrap .msf-panel-3{display: flex;}#msf-step1:checked ~ .msf-wrap .msf-step-label:nth-child(1), #msf-step2:checked ~ .msf-wrap .msf-step-label:nth-child(2), #msf-step3:checked ~ .msf-wrap .msf-step-label:nth-child(3){color: var(--accent);border-bottom: 2px solid var(--accent);margin-bottom: -1px;}@media (prefers-reduced-motion: reduce){.demo-multi-step-form .msf2-track{transition: none;}}
.demo-styled-select .select-wrap{display: flex;flex-direction: column;gap: 1rem;max-width: 320px;margin: 0 auto;}.demo-styled-select label{display: block;font-size: .82rem;color: var(--text-muted);margin-bottom: .25rem;font-weight: 500;}.demo-styled-select select{appearance: none;-webkit-appearance: none;width: 100%;padding: .7rem 2.75rem .7rem 1rem;background-color: var(--surface-2);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2388888f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 1rem center;border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;cursor: pointer;outline: none;transition: border-color .2s;}:is(.demo-styled-select select):focus{border-color: var(--accent);}:is(.demo-styled-select select):hover{border-color: var(--text-muted);}.select-accent:is(.demo-styled-select select){border-color: var(--accent);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8ff57' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}.demo-styled-select select:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-styled-select select, .demo-styled-select .select-shell::after{transition: none;}}
.demo-date-input .date-wrap{display: flex;flex-direction: column;gap: 1rem;max-width: 320px;margin: 0 auto;}.demo-date-input .date-field{display: flex;flex-direction: column;gap: .3rem;}.demo-date-input label{font-size: .82rem;color: var(--text-muted);font-weight: 500;}.demo-date-input input[type="date"]{appearance: none;-webkit-appearance: none;width: 100%;padding: .7rem 1rem;background: var(--surface-2);border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;outline: none;cursor: pointer;transition: border-color .2s;}:is(.demo-date-input input[type="date"]):focus{border-color: var(--accent);}:is(.demo-date-input input[type="date"]):hover{border-color: var(--text-muted);}:is(.demo-date-input input[type="date"])::-webkit-calendar-picker-indicator{filter: invert(1) opacity(.5);cursor: pointer;}:is(.demo-date-input input[type="date"])::-webkit-calendar-picker-indicator:hover{filter: invert(1) opacity(1);}:is(.demo-date-input input[type="date"])::-webkit-datetime-edit{color: var(--text);}:is(.demo-date-input input[type="date"])::-webkit-datetime-edit-fields-wrapper{padding: 0;}:is(.demo-date-input input[type="date"])::-webkit-inner-spin-button{display: none;}.date-accent:is(.demo-date-input input[type="date"]){border-color: var(--accent);}.demo-date-input input[type="date"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-date-input input[type="date"]{transition: none;}}
.demo-numeric-stepper .stepper-group{display: flex;flex-direction: column;gap: 1.25rem;max-width: 280px;margin: 0 auto;}.demo-numeric-stepper .stepper-field{display: flex;flex-direction: column;gap: .3rem;}.demo-numeric-stepper label{font-size: .82rem;color: var(--text-muted);font-weight: 500;}.demo-numeric-stepper input[type="number"]{appearance: textfield;-moz-appearance: textfield;width: 100%;padding: .7rem 1rem;background: var(--surface-2);border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-mono);font-size: 1.1rem;font-weight: 500;text-align: center;outline: none;transition: border-color .2s;}:is(.demo-numeric-stepper input[type="number"]):focus{border-color: var(--accent);}:is(.demo-numeric-stepper input[type="number"])::-webkit-inner-spin-button,:is(.demo-numeric-stepper input[type="number"])::-webkit-outer-spin-button{-webkit-appearance: none;appearance: none;}.demo-numeric-stepper .stepper-row{display: flex;align-items: center;gap: 0;border: 2px solid var(--border);border-radius: var(--radius);overflow: hidden;background: var(--surface-2);transition: border-color .2s;}:is(.demo-numeric-stepper .stepper-row):focus-within{border-color: var(--accent);}:is(.demo-numeric-stepper .stepper-row) input[type="number"]{border: none;border-radius: 0;flex: 1;background: transparent;padding: .7rem .5rem;}:is(:is(.demo-numeric-stepper .stepper-row) input[type="number"]):focus{border-color: transparent;}.demo-numeric-stepper .step-btn{width: 40px;background: var(--surface);border: none;border-left: 1px solid var(--border);color: var(--text);font-size: 1.2rem;font-weight: 300;cursor: pointer;padding: .6rem 0;line-height: 1;transition: background .15s, color .15s;font-family: var(--font-sans);}:is(.demo-numeric-stepper .step-btn):first-child{border-left: none;border-right: 1px solid var(--border);}:is(.demo-numeric-stepper .step-btn):hover{background: var(--accent-dim);color: var(--accent);}.demo-numeric-stepper input[type="number"]:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}.demo-numeric-stepper .step-btn:focus-visible{outline: 2px solid var(--accent);outline-offset: -2px;}@media (prefers-reduced-motion: reduce){.demo-numeric-stepper input[type="number"], .demo-numeric-stepper .stepper-row, .demo-numeric-stepper .step-btn, .demo-numeric-stepper .qty-opt span{transition: none;}}
.demo-color-swatch .swatch-section{display: flex;flex-direction: column;gap: 1.5rem;max-width: 340px;margin: 0 auto;}.demo-color-swatch .swatch-label{font-size: .82rem;color: var(--text-muted);font-weight: 500;margin-bottom: .4rem;}.demo-color-swatch .swatch-group{display: flex;gap: .6rem;flex-wrap: wrap;}:is(.demo-color-swatch .swatch-group) input[type="radio"]{display: none;}:is(.demo-color-swatch .swatch-group) label{display: block;width: 32px;height: 32px;border-radius: 50%;cursor: pointer;border: 3px solid transparent;outline: 2px solid transparent;outline-offset: 2px;transition: outline-color .15s, transform .15s;}:is(:is(.demo-color-swatch .swatch-group) label):hover{transform: scale(1.1);}:is(.demo-color-swatch .swatch-group) input[type="radio"]:checked + label{outline-color: var(--text);}.demo-color-swatch .swatch-group--large label{width: 42px;height: 42px;}.demo-color-swatch .selected-label{font-size: .85rem;color: var(--text-muted);margin-top: .5rem;}@media (prefers-reduced-motion: reduce){.demo-color-swatch .swatch-group label{transition: none;}}
.demo-sticky-sidebar .sticky-layout{display: grid;grid-template-columns: 180px 1fr;gap: 1.5rem;height: 260px;overflow-y: auto;}.demo-sticky-sidebar .sticky-nav{position: sticky;top: 0;align-self: start;background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius);padding: .75rem;height: fit-content;}:is(.demo-sticky-sidebar .sticky-nav) h3{font-size: .75rem;text-transform: uppercase;letter-spacing: .08em;color: var(--text-muted);margin-bottom: .5rem;}:is(.demo-sticky-sidebar .sticky-nav) ul{list-style: none;display: flex;flex-direction: column;gap: .1rem;}:is(.demo-sticky-sidebar .sticky-nav) li a{display: block;padding: .4rem .6rem;border-radius: 6px;color: var(--text);text-decoration: none;font-size: .875rem;transition: background .15s, color .15s;}:is(:is(.demo-sticky-sidebar .sticky-nav) li a):hover{background: var(--accent-dim);color: var(--accent);}.active:is(:is(.demo-sticky-sidebar .sticky-nav) li a){background: var(--accent-dim);color: var(--accent);font-weight: 600;}.demo-sticky-sidebar .sticky-content{display: flex;flex-direction: column;gap: 1rem;}.demo-sticky-sidebar .content-block{background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius);padding: 1rem;}:is(.demo-sticky-sidebar .content-block) h4{font-size: .9rem;margin-bottom: .4rem;color: var(--accent);}:is(.demo-sticky-sidebar .content-block) p{font-size: .82rem;color: var(--text-muted);line-height: 1.5;}
.demo-breadcrumb .breadcrumb-variants{display: flex;flex-direction: column;gap: 1.5rem;align-items: flex-start;}.demo-breadcrumb nav ol{list-style: none;display: flex;align-items: center;flex-wrap: wrap;gap: 0;}.demo-breadcrumb nav li{display: flex;align-items: center;font-size: .9rem;}:is(.demo-breadcrumb nav li) + li::before{content: "/";color: var(--text-muted);margin: 0 .5rem;}:is(.demo-breadcrumb nav li):last-child{color: var(--text);font-weight: 500;}.demo-breadcrumb nav a{color: var(--text-muted);text-decoration: none;transition: color .15s;}:is(.demo-breadcrumb nav a):hover{color: var(--accent);}.demo-breadcrumb .bc-arrow li + li::before{content: "›";font-size: 1.1rem;line-height: 1;}.demo-breadcrumb .bc-chevron li + li::before{content: "";display: inline-block;width: 6px;height: 6px;border-top: 1.5px solid var(--text-muted);border-right: 1.5px solid var(--text-muted);transform: rotate(45deg);margin: 0 .6rem;}.demo-breadcrumb .bc-pill li{background: var(--surface-2);padding: .25rem .75rem;border-radius: 99px;font-size: .8rem;}:is(.demo-breadcrumb .bc-pill li) + li::before{display: none;}:is(.demo-breadcrumb .bc-pill li) + li{margin-left: .35rem;}:is(.demo-breadcrumb .bc-pill li):last-child{background: var(--accent-dim);color: var(--accent);}
.demo-pagination .pg-radio{display: none;}.demo-pagination .pg-wrap{display: flex;flex-direction: column;gap: 1.25rem;align-items: center;}.demo-pagination .pg-bar{display: flex;align-items: center;gap: .3rem;}:is(.demo-pagination .pg-bar) label{display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: var(--radius);border: 1px solid var(--border);color: var(--text-muted);font-size: .9rem;font-weight: 500;cursor: pointer;transition: background .15s, color .15s, border-color .15s;user-select: none;}:is(:is(.demo-pagination .pg-bar) label):hover{background: var(--surface-2);color: var(--text);border-color: var(--text-muted);}.demo-pagination .pg-bar .pg-prev,.demo-pagination .pg-bar .pg-next{width: auto;padding: 0 .75rem;gap: .3rem;font-size: .85rem;cursor: default;opacity: .45;}.demo-pagination .pg-bar .pg-prev:hover,.demo-pagination .pg-bar .pg-next:hover{background: none;color: var(--text-muted);border-color: var(--border);}.demo-pagination .pg-content{background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius);padding: .75rem 1.25rem;font-size: .85rem;color: var(--text-muted);min-height: 44px;display: flex;align-items: center;width: 100%;max-width: 320px;justify-content: center;}.demo-pagination .pg-page{display: none;}#pg1:checked ~ .pg-wrap .pg-bar label[for="pg1"], #pg2:checked ~ .pg-wrap .pg-bar label[for="pg2"], #pg3:checked ~ .pg-wrap .pg-bar label[for="pg3"], #pg4:checked ~ .pg-wrap .pg-bar label[for="pg4"], #pg5:checked ~ .pg-wrap .pg-bar label[for="pg5"]{background: var(--accent);color: var(--bg);border-color: var(--accent);}#pg1:checked ~ .pg-wrap .pg-content .pg-page-1, #pg2:checked ~ .pg-wrap .pg-content .pg-page-2, #pg3:checked ~ .pg-wrap .pg-content .pg-page-3, #pg4:checked ~ .pg-wrap .pg-content .pg-page-4, #pg5:checked ~ .pg-wrap .pg-content .pg-page-5{display: block;color: var(--text);}@media (prefers-reduced-motion: reduce){.demo-pagination .pgd-dots label, .demo-pagination .pgn-bar label{transition: none;}}
.demo-vertical-tabs .vtab-radio{display: none;}.demo-vertical-tabs .vtab-layout{display: grid;grid-template-columns: 160px 1fr;gap: 0;border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;min-height: 220px;}.demo-vertical-tabs .vtab-nav{background: var(--surface);border-right: 1px solid var(--border);padding: .5rem;display: flex;flex-direction: column;gap: .2rem;}:is(.demo-vertical-tabs .vtab-nav) label{display: block;padding: .55rem .8rem;border-radius: var(--radius);color: var(--text-muted);font-size: .875rem;cursor: pointer;transition: background .15s, color .15s;font-weight: 500;user-select: none;}:is(:is(.demo-vertical-tabs .vtab-nav) label):hover{background: var(--accent-dim);color: var(--text);}.demo-vertical-tabs .vtab-panels{background: var(--surface-2);padding: 1.25rem;}.demo-vertical-tabs .vtab-panel{display: none;}:is(.demo-vertical-tabs .vtab-panel) h3{font-size: 1rem;margin-bottom: .5rem;}:is(.demo-vertical-tabs .vtab-panel) p{font-size: .875rem;color: var(--text-muted);line-height: 1.6;}#vtab1:checked ~ .vtab-layout .vtab-nav label[for="vtab1"], #vtab2:checked ~ .vtab-layout .vtab-nav label[for="vtab2"], #vtab3:checked ~ .vtab-layout .vtab-nav label[for="vtab3"], #vtab4:checked ~ .vtab-layout .vtab-nav label[for="vtab4"]{background: var(--accent-dim);color: var(--accent);}#vtab1:checked ~ .vtab-layout .vtab-panel-1, #vtab2:checked ~ .vtab-layout .vtab-panel-2, #vtab3:checked ~ .vtab-layout .vtab-panel-3, #vtab4:checked ~ .vtab-layout .vtab-panel-4{display: block;}@media (prefers-reduced-motion: reduce){.demo-vertical-tabs .vslide-bar{transition: none;}}
.demo-character-count .cc-wrap{display: flex;flex-direction: column;gap: 1.5rem;max-width: 400px;margin: 0 auto;}.demo-character-count .cc-field{display: flex;flex-direction: column;gap: .4rem;}.demo-character-count label{font-size: .85rem;color: var(--text-muted);font-weight: 500;}.demo-character-count input,.demo-character-count textarea{width: 100%;padding: .75rem 1rem;background: var(--surface-2);border: 2px solid var(--border);border-radius: var(--radius);color: var(--text);font-family: var(--font-sans);font-size: .95rem;transition: border-color .2s;outline: none;}:is(.demo-character-count input,.demo-character-count textarea):focus{border-color: var(--accent);}:is(.demo-character-count input,.demo-character-count textarea):user-valid{border-color: var(--teal);}:is(.demo-character-count input,.demo-character-count textarea):user-invalid{border-color: var(--coral);}.demo-character-count textarea{resize: vertical;min-height: 80px;}.demo-character-count .cc-meta{display: flex;justify-content: space-between;font-size: .75rem;color: var(--text-muted);}.demo-character-count input:user-valid ~ .cc-meta,.demo-character-count textarea:user-valid ~ .cc-meta{color: var(--teal);}.demo-character-count input:user-invalid ~ .cc-meta,.demo-character-count textarea:user-invalid ~ .cc-meta{color: var(--coral);}.demo-character-count input:focus-visible,.demo-character-count textarea:focus-visible{outline: 2px solid var(--accent);outline-offset: 3px;}@media (prefers-reduced-motion: reduce){.demo-character-count input, .demo-character-count textarea{transition: none;}}
.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-loading-spinner .spinner-grid{display: flex;gap: 2.5rem;align-items: center;justify-content: center;flex-wrap: wrap;padding: .5rem;}.demo-loading-spinner .spinner-item{display: flex;flex-direction: column;align-items: center;gap: .75rem;}.demo-loading-spinner .spinner-label{font-size: .75rem;color: var(--text-muted);font-weight: 500;}.demo-loading-spinner .spinner-ring{width: 40px;height: 40px;border: 3px solid var(--surface-2);border-top-color: var(--accent);border-radius: 50%;animation: spin-ring 0.8s linear infinite;}.demo-loading-spinner .spinner-dots{display: flex;gap: 6px;align-items: center;}:is(.demo-loading-spinner .spinner-dots) span{width: 10px;height: 10px;background: var(--accent);border-radius: 50%;animation: spin-dots 1.2s ease-in-out infinite;}:is(:is(.demo-loading-spinner .spinner-dots) span):nth-child(2){animation-delay: .2s;}:is(:is(.demo-loading-spinner .spinner-dots) span):nth-child(3){animation-delay: .4s;}.demo-loading-spinner .spinner-bars{display: flex;gap: 4px;align-items: flex-end;height: 36px;}:is(.demo-loading-spinner .spinner-bars) span{width: 6px;background: var(--accent);border-radius: 3px;animation: spin-bars 1s ease-in-out infinite;}:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(1){animation-delay: 0s;}:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(2){animation-delay: .15s;}:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(3){animation-delay: .3s;}:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(4){animation-delay: .45s;}.demo-loading-spinner .spinner-orbit{position: relative;width: 40px;height: 40px;animation: spin-ring .8s linear infinite;}:is(.demo-loading-spinner .spinner-orbit)::before{content: '';position: absolute;inset: 0;border: 3px solid transparent;border-top-color: var(--sky);border-right-color: var(--violet);border-radius: 50%;}:is(.demo-loading-spinner .spinner-orbit)::after{content: '';position: absolute;inset: 6px;border: 3px solid transparent;border-bottom-color: var(--rose);border-radius: 50%;animation: spin-ring .5s linear infinite reverse;}@keyframes spin-ring{to{transform: rotate(360deg);}}@keyframes spin-dots{0%, 80%, 100%{transform: scale(.6);opacity: .4;}40%{transform: scale(1);opacity: 1;}}@keyframes spin-bars{0%, 100%{height: 10px;opacity: .4;}50%{height: 36px;opacity: 1;}}@media (prefers-reduced-motion: reduce){.demo-loading-spinner .ls-conic, .demo-loading-spinner .ls-stepped{animation-duration: 4s;}}
.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;}}
@property --countdown{syntax: "<integer>";initial-value: 10;inherits: false;}.demo-countdown-timer .timer-wrap{display: flex;flex-direction: column;align-items: center;gap: 1.5rem;}.demo-countdown-timer .timer-display{position: relative;width: 140px;height: 140px;display: flex;align-items: center;justify-content: center;}.demo-countdown-timer .timer-ring{position: absolute;inset: 0;border-radius: 50%;background: conic-gradient(var(--accent) calc(var(--countdown) * 36deg), var(--surface-2) 0);animation: countdown-ring 10s steps(10) infinite;}.demo-countdown-timer .timer-inner{position: absolute;inset: 8px;background: var(--bg);border-radius: 50%;display: flex;align-items: center;justify-content: center;}.demo-countdown-timer .timer-num{--countdown: 10;counter-reset: num var(--countdown);font-size: 3rem;font-weight: 800;font-family: var(--font-mono);color: var(--accent);animation: countdown-num 10s steps(10) infinite;line-height: 1;}:is(.demo-countdown-timer .timer-num)::after{content: counter(num);}.demo-countdown-timer .timer-label{font-size: .8rem;color: var(--text-muted);letter-spacing: .1em;text-transform: uppercase;}@keyframes countdown-ring{from{--countdown: 10;}to{--countdown: 0;}}@keyframes countdown-num{from{--countdown: 10;}to{--countdown: 0;}}@media (prefers-reduced-motion: reduce){.demo-countdown-timer .ct-precise-ring{background: var(--surface-2);}}
.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-confirm-button .confirm-wrap{display: flex;flex-direction: column;align-items: center;gap: 1.25rem;}.demo-confirm-button .confirm-input{display: none;}.demo-confirm-button .btn-trigger{display: inline-flex;align-items: center;gap: .5rem;padding: .7rem 1.5rem;border-radius: var(--radius);font-family: var(--font-sans);font-size: .95rem;font-weight: 600;cursor: pointer;transition: background .2s, transform .2s;user-select: none;}.demo-confirm-button .btn-danger{background: var(--coral-dim);color: var(--coral);border: 2px solid var(--coral);}:is(.demo-confirm-button .btn-danger):hover{background: var(--coral);color: #fff;}.demo-confirm-button .confirm-panel{display: none;align-items: center;gap: .75rem;background: var(--surface);border: 1px solid var(--border);border-radius: var(--radius-lg);padding: .75rem 1.25rem;animation: confirm-slide-in .2s ease;}:is(.demo-confirm-button .confirm-panel) p{font-size: .9rem;color: var(--text-muted);white-space: nowrap;}.demo-confirm-button .btn-yes{padding: .45rem 1rem;background: var(--coral);color: #fff;border: none;border-radius: var(--radius);font-family: var(--font-sans);font-size: .875rem;font-weight: 600;cursor: pointer;transition: opacity .15s;}:is(.demo-confirm-button .btn-yes):hover{opacity: .85;}.demo-confirm-button .btn-cancel{padding: .45rem 1rem;background: var(--surface-2);color: var(--text-muted);border-radius: var(--radius);font-size: .875rem;font-weight: 500;cursor: pointer;user-select: none;display: inline-block;transition: color .15s;}:is(.demo-confirm-button .btn-cancel):hover{color: var(--text);}.demo-confirm-button .confirm-input:checked ~ .confirm-panel{display: flex;}.demo-confirm-button .confirm-input:checked ~ .btn-trigger{opacity: .4;pointer-events: none;}@keyframes confirm-slide-in{from{opacity: 0;transform: translateY(-8px);}to{opacity: 1;transform: translateY(0);}}@media (prefers-reduced-motion: reduce){.demo-confirm-button .cb-a11y-panel{animation: none;}.demo-confirm-button .cb-swap-trigger, .demo-confirm-button .cb-swap-panel{transition: none;}}
.demo-toast-notification .toast-triggers{display: flex;gap: .75rem;flex-wrap: wrap;justify-content: center;margin-bottom: .5rem;}.demo-toast-notification .toast-btn{display: inline-flex;align-items: center;gap: .4rem;padding: .55rem 1.1rem;border-radius: var(--radius);font-family: var(--font-sans);font-size: .875rem;font-weight: 600;text-decoration: none;cursor: pointer;transition: opacity .15s;border: none;}:is(.demo-toast-notification .toast-btn):hover{opacity: .85;}.demo-toast-notification .toast-btn-success{background: rgba(87,217,163,.15);color: var(--teal);}.demo-toast-notification .toast-btn-error{background: var(--coral-dim);color: var(--coral);}.demo-toast-notification .toast-btn-info{background: var(--sky-dim);color: var(--sky);}.demo-toast-notification .toast{display: none;position: fixed;bottom: 1.5rem;right: 1.5rem;min-width: 260px;max-width: 340px;padding: .85rem 1.1rem;border-radius: var(--radius-lg);background: var(--surface);border: 1px solid var(--border);box-shadow: 0 8px 32px rgba(0,0,0,.3);z-index: 9999;align-items: center;gap: .75rem;font-size: .9rem;font-weight: 500;}:is(.demo-toast-notification .toast):target{display: flex;animation: toast-in .3s ease forwards, toast-out .3s ease 3s forwards;}.demo-toast-notification .toast-icon{font-size: 1.1rem;flex-shrink: 0;}.demo-toast-notification .toast-msg{flex: 1;}.demo-toast-notification .toast-close{color: var(--text-muted);text-decoration: none;font-size: 1.1rem;line-height: 1;flex-shrink: 0;transition: color .15s;}:is(.demo-toast-notification .toast-close):hover{color: var(--text);}.demo-toast-notification #toast-success{border-left: 3px solid var(--teal);}.demo-toast-notification #toast-error{border-left: 3px solid var(--coral);}.demo-toast-notification #toast-info{border-left: 3px solid var(--sky);}@keyframes toast-in{from{transform: translateX(120%);opacity: 0;}to{transform: translateX(0);opacity: 1;}}@keyframes toast-out{from{transform: translateX(0);opacity: 1;}to{transform: translateX(120%);opacity: 0;}}@media (prefers-reduced-motion: reduce){:is(.demo-toast-notification .tn-hidden-input):checked ~ .tn-local-toast{animation: tn-fade-in .3s ease forwards;}:is(.demo-toast-notification .tn-timed-toast):target{animation: tn-fade-in .3s ease forwards, tn-fade-out .3s ease 3s forwards;}}
.demo-alert-banner .alerts{display: flex;flex-direction: column;gap: .65rem;}.demo-alert-banner .alert{display: flex;align-items: flex-start;gap: .75rem;padding: .85rem 1rem;border-radius: var(--radius);border-left: 3px solid;font-size: .9rem;line-height: 1.5;}.demo-alert-banner .alert-icon{font-size: 1rem;flex-shrink: 0;margin-top: .05rem;}.demo-alert-banner .alert-body{flex: 1;}:is(.demo-alert-banner .alert-body) strong{display: block;font-size: .875rem;font-weight: 600;margin-bottom: .1rem;}.demo-alert-banner .alert-info{background: var(--sky-dim);border-color: var(--sky);color: var(--sky);}.demo-alert-banner .alert-success{background: rgba(87,217,163,.1);border-color: var(--teal);color: var(--teal);}.demo-alert-banner .alert-warning{background: var(--yellow-dim);border-color: var(--yellow);color: var(--yellow);}.demo-alert-banner .alert-error{background: var(--coral-dim);border-color: var(--coral);color: var(--coral);}.demo-alert-banner .alert-dismiss-input{display: none;}.demo-alert-banner .alert-dismissible{position: relative;transition: opacity .2s, max-height .3s;}.demo-alert-banner .alert-close{margin-left: auto;cursor: pointer;opacity: .6;font-size: 1rem;line-height: 1;flex-shrink: 0;user-select: none;}:is(.demo-alert-banner .alert-close):hover{opacity: 1;}.demo-alert-banner .alert-dismiss-input:checked ~ .alert-dismissible{display: none;}@media (prefers-reduced-motion: reduce){.demo-alert-banner .ab-collapse{transition: none;}}
.demo-tooltip-directions .td-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;max-width: 360px;margin: 0 auto;}.demo-tooltip-directions .td-tip{position: relative;display: inline-flex;align-items: center;justify-content: center;padding: .6rem 1rem;background: var(--surface-2);border: 1px solid var(--border);border-radius: var(--radius);font-size: .875rem;font-weight: 500;cursor: default;color: var(--text);}:is(.demo-tooltip-directions .td-tip)::before{content: attr(data-tip);position: absolute;background: var(--text);color: var(--bg);font-size: .78rem;font-weight: 400;white-space: nowrap;padding: .35rem .65rem;border-radius: 6px;pointer-events: none;opacity: 0;transition: opacity .2s, transform .2s;z-index: 10;}:is(.demo-tooltip-directions .td-tip)::after{content: '';position: absolute;border: 5px solid transparent;pointer-events: none;opacity: 0;transition: opacity .2s;z-index: 10;}:is(.demo-tooltip-directions .td-tip):hover::before,:is(.demo-tooltip-directions .td-tip):hover::after{opacity: 1;}:is(.demo-tooltip-directions [data-pos="top"])::before{bottom: calc(100% + 8px);left: 50%;transform: translateX(-50%) translateY(4px);}:is(.demo-tooltip-directions [data-pos="top"]):hover::before{transform: translateX(-50%) translateY(0);}:is(.demo-tooltip-directions [data-pos="top"])::after{bottom: calc(100% + 0px);left: 50%;transform: translateX(-50%);border-top-color: var(--text);}:is(.demo-tooltip-directions [data-pos="bottom"])::before{top: calc(100% + 8px);left: 50%;transform: translateX(-50%) translateY(-4px);}:is(.demo-tooltip-directions [data-pos="bottom"]):hover::before{transform: translateX(-50%) translateY(0);}:is(.demo-tooltip-directions [data-pos="bottom"])::after{top: calc(100% + 0px);left: 50%;transform: translateX(-50%);border-bottom-color: var(--text);}:is(.demo-tooltip-directions [data-pos="right"])::before{left: calc(100% + 8px);top: 50%;transform: translateY(-50%) translateX(-4px);}:is(.demo-tooltip-directions [data-pos="right"]):hover::before{transform: translateY(-50%) translateX(0);}:is(.demo-tooltip-directions [data-pos="right"])::after{left: calc(100% + 0px);top: 50%;transform: translateY(-50%);border-right-color: var(--text);}:is(.demo-tooltip-directions [data-pos="left"])::before{right: calc(100% + 8px);top: 50%;transform: translateY(-50%) translateX(4px);}:is(.demo-tooltip-directions [data-pos="left"]):hover::before{transform: translateY(-50%) translateX(0);}:is(.demo-tooltip-directions [data-pos="left"])::after{right: calc(100% + 0px);top: 50%;transform: translateY(-50%);border-left-color: var(--text);}@media (prefers-reduced-motion: reduce){.demo-tooltip-directions .td-real-bubble{transition: opacity .2s, visibility 0s .2s;transform: translateX(-50%);}:is(.demo-tooltip-directions .td-real):hover .td-real-bubble, :is(.demo-tooltip-directions .td-real-trigger):focus-visible + .td-real-bubble{transition: opacity .2s, visibility 0s;transform: translateX(-50%);}:is(.demo-tooltip-directions .td-slow)::before{transition: opacity .15s;transform: translateX(-50%);}:is(.demo-tooltip-directions .td-slow):hover::before{transform: translateX(-50%);}}
.demo-text-shimmer .shimmer-stage{display: flex;flex-direction: column;gap: 1.25rem;align-items: center;}.demo-text-shimmer .shimmer{background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% auto;animation: shimmer-sweep 2s linear infinite;display: inline-block;}.demo-text-shimmer .shimmer-green{font-size: 2rem;font-weight: 800;background-image: linear-gradient(90deg, var(--text) 0%, var(--accent) 30%, var(--teal) 50%, var(--accent) 70%, var(--text) 100% );}.demo-text-shimmer .shimmer-gold{font-size: 1.4rem;font-weight: 700;background-image: linear-gradient(90deg, var(--text-muted) 0%, var(--yellow) 30%, var(--orange) 50%, var(--yellow) 70%, var(--text-muted) 100% );animation-duration: 2.5s;}.demo-text-shimmer .shimmer-rainbow{font-size: 1.1rem;font-weight: 600;background-image: linear-gradient(90deg, var(--coral) 0%, var(--yellow) 20%, var(--accent) 40%, var(--sky) 60%, var(--violet) 80%, var(--coral) 100% );background-size: 300% auto;animation-duration: 3s;}.demo-text-shimmer .shimmer-mono{font-family: var(--font-mono);font-size: .95rem;font-weight: 500;background-image: linear-gradient(90deg, var(--text-muted) 0%, var(--text) 50%, var(--text-muted) 100% );animation-duration: 1.5s;}@keyframes shimmer-sweep{from{background-position: 200% center;}to{background-position: -200% center;}}@supports (background-clip: text) or (-webkit-background-clip: text){.demo-text-shimmer .ts-metal{background-image: linear-gradient(115deg, var(--text-muted) 0%, var(--text) 35%, #ffffff 50%, var(--text) 65%, var(--text-muted) 100% );background-size: 220% auto;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: shimmer-sweep 3.5s linear infinite;}:is(.demo-text-shimmer .ts-metal)::selection{-webkit-text-fill-color: var(--bg);background: var(--accent);}@media (prefers-reduced-motion: reduce){.demo-text-shimmer .ts-metal{animation: none;-webkit-text-fill-color: var(--text);}:is(.demo-text-shimmer .ts-once):hover, :is(.demo-text-shimmer .ts-once):focus-visible{animation: none;}}}
.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-progress-button .prog-stack{display: flex;flex-wrap: wrap;gap: 1.5rem;align-items: center;justify-content: center;}.demo-progress-button .prog-group{display: flex;flex-direction: column;align-items: center;gap: .5rem;}.demo-progress-button .prog-input{display: none;}.demo-progress-button .prog-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;padding: .75rem 2.25rem;border-radius: 999px;border: 1.5px solid var(--accent);background: var(--accent-dim);color: var(--accent);font-family: var(--font-mono);font-size: .8rem;font-weight: 500;letter-spacing: .05em;cursor: pointer;overflow: hidden;user-select: none;min-width: 160px;transition: color .3s;}:is(.demo-progress-button .prog-btn)::before{content: "";position: absolute;inset: 0;background: var(--accent);transform: scaleX(0);transform-origin: left;}.demo-progress-button .prog-idle{position: relative;z-index: 1;white-space: nowrap;transition: opacity .2s;}.demo-progress-button .prog-loading,.demo-progress-button .prog-done{position: absolute;z-index: 1;left: 50%;transform: translateX(-50%);white-space: nowrap;transition: opacity .2s;}.demo-progress-button .prog-idle{opacity: 1;}.demo-progress-button .prog-loading{opacity: 0;}.demo-progress-button .prog-done{opacity: 0;}.demo-progress-button .prog-hint{font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);letter-spacing: .05em;}.demo-progress-button .prog-input:checked ~ .prog-btn{color: var(--bg);}:is(.demo-progress-button .prog-input:checked ~ .prog-btn)::before{animation: prog-fill 2s ease-in-out forwards;}:is(.demo-progress-button .prog-input:checked ~ .prog-btn) .prog-idle{animation: prog-fade-out .2s forwards;}:is(.demo-progress-button .prog-input:checked ~ .prog-btn) .prog-loading{animation: prog-fade-in .2s forwards, prog-fade-out .2s 1.8s forwards;}:is(.demo-progress-button .prog-input:checked ~ .prog-btn) .prog-done{animation: prog-fade-in .2s 2s forwards;}@keyframes prog-fill{0%{transform: scaleX(0);}80%{transform: scaleX(1);}100%{transform: scaleX(1);}}@keyframes prog-fade-out{to{opacity: 0;}}@keyframes prog-fade-in{to{opacity: 1;}}.demo-progress-button .pb-hidden-input{position: absolute;opacity: 0;width: 1px;height: 1px;pointer-events: none;}@media (prefers-reduced-motion: reduce){:is(.demo-progress-button .pb-hidden-input):checked ~ .pb-indet-btn .pb-indet-track::before{animation-duration: 3s;}}
.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-shrinking-header .shrink-frame{width: 100%;height: 320px;overflow-y: auto;border-radius: var(--radius-lg);border: 1px solid var(--border);}.demo-shrinking-header .shrink-header{position: sticky;top: 0;z-index: 10;display: flex;align-items: center;justify-content: space-between;padding: 0 1.25rem;background: var(--surface);border-bottom: 1px solid var(--border);animation: sh-shrink linear both;animation-timeline: scroll();animation-range: 0px 80px;}@keyframes sh-shrink{from{height: 60px;}to{height: 38px;}}.demo-shrinking-header .shrink-logo{font-family: var(--font-mono);font-weight: 700;color: var(--accent);animation: sh-logo linear both;animation-timeline: scroll();animation-range: 0px 80px;}@keyframes sh-logo{from{font-size: 1rem;}to{font-size: .72rem;}}.demo-shrinking-header .shrink-nav{display: flex;gap: 1.25rem;}.demo-shrinking-header .shrink-nav a{font-family: var(--font-mono);color: var(--text-muted);text-decoration: none;animation: sh-nav linear both;animation-timeline: scroll();animation-range: 0px 80px;}@keyframes sh-nav{from{font-size: .72rem;}to{font-size: .58rem;}}.demo-shrinking-header .shrink-content{padding: 1rem 1.25rem 1.25rem;display: flex;flex-direction: column;gap: .75rem;}.demo-shrinking-header .shrink-hint{font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);letter-spacing: .08em;text-align: center;padding: .25rem 0;}.demo-shrinking-header .shrink-block{height: 52px;background: var(--surface-2);border-radius: var(--radius);border: 1px solid var(--border);}.demo-shrinking-header .shrink-block-tall{height: 76px;background: var(--surface-2);border-radius: var(--radius);border: 1px solid var(--border);}.card-preview .demo-shrinking-header{pointer-events: auto;}@supports (animation-timeline: scroll()){.demo-shrinking-header .prog-header{animation: ph-shrink linear both;animation-timeline: scroll();animation-range: 0px 80px;}.demo-shrinking-header .prog-logo{animation: ph-logo linear both;animation-timeline: scroll();animation-range: 0px 80px;}.demo-shrinking-header .prog-bar{animation: ph-progress linear both;animation-timeline: scroll();}}@media (prefers-reduced-motion: reduce){.demo-shrinking-header .shrink-header, .demo-shrinking-header .prog-header, .demo-shrinking-header .prog-logo, .demo-shrinking-header .prog-bar, .demo-shrinking-header .shrink-logo, .demo-shrinking-header .shrink-nav a{animation: none;}.demo-shrinking-header .shrink-header, .demo-shrinking-header .prog-header{height: 38px;}}
.demo-sticky-sections .sticky-frame{width: 100%;height: 320px;overflow-y: auto;border-radius: var(--radius-lg);border: 1px solid var(--border);}.demo-sticky-sections .sticky-section{}.demo-sticky-sections .sticky-section-title{position: sticky;top: 0;z-index: 1;padding: .35rem 1rem;font-family: var(--font-mono);font-size: .62rem;font-weight: 700;text-transform: uppercase;letter-spacing: .12em;color: var(--accent);background: var(--surface-2);border-bottom: 1px solid var(--border);border-top: 1px solid var(--border);}.demo-sticky-sections .sticky-section:first-child .sticky-section-title{border-top: none;}.demo-sticky-sections .sticky-item{padding: .65rem 1rem;border-bottom: 1px solid var(--border);display: flex;align-items: center;gap: .75rem;}.demo-sticky-sections .sticky-avatar{width: 28px;height: 28px;border-radius: 50%;background: var(--surface-2);border: 1px solid var(--border);flex-shrink: 0;display: flex;align-items: center;justify-content: center;font-family: var(--font-mono);font-size: .6rem;font-weight: 600;color: var(--text-muted);}.demo-sticky-sections .sticky-name{font-size: .85rem;color: var(--text);flex: 1;}.demo-sticky-sections .sticky-detail{font-family: var(--font-mono);font-size: .65rem;color: var(--text-muted);}.card-preview .demo-sticky-sections{pointer-events: auto;}
.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;}}