.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-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-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-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;}}
@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-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;}}
@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-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-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;}}