:root{--skeleton-base-color: hsl(0 0% 92% / 100%);--skeleton-base-color-dark: hsl(0 0% 20% / 100%);--skeleton-highlight-color: hsl(0 0% 96% / 100%);--skeleton-highlight-color-dark: hsl(0 0% 15% / 100%);--skeleton-radius: 0px;--skeleton-highlight-size: clamp(100px, 50vw, 500px);--skeleton-highlight-leading-edge-blur: clamp( 10px, 5vw, 50px );--skeleton-angle: 90deg;--skeleton-animation-animation-speed: 400;--skeleton-animation-animation-time: 1;--skeleton-animation-animation-scaler: .7;--skeleton-ease: cubic-bezier(.45, .3, .7, .55);--skeleton-percentage: 0;--skeleton-full-viewport: 100vw;--skeleton-calc-int-width: calc(10000*tan(atan2(var(--skeleton-full-viewport), 10000px))) ;--skeleton-calc-scaled-time: calc( ( 1 - (var(--skeleton-calc-int-width) / 400) * var(--skeleton-animation-animation-scaler) / 5 ) );--skeleton-calc-anim-time: calc( ( ( var(--skeleton-calc-int-width) / var(--skeleton-animation-animation-speed) ) * (var(--skeleton-animation-animation-time) * 1.33) ) * var(--skeleton-calc-scaled-time) )}@media not (prefers-reduced-motion){:root{animation:skeletonPercent calc(1s * var(--skeleton-calc-anim-time)) var(--skeleton-ease) infinite}}.loading-skeleton{--skeleton-base: light-dark( var(--skeleton-base-color), var(--skeleton-base-color-dark) );--skeleton-highlight: light-dark( var(--skeleton-highlight-color), var(--skeleton-highlight-color-dark) );color:transparent;-webkit-user-select:none;user-select:none;background-color:var(--skeleton-base);border-radius:var(--skeleton-radius);--anim-pos: calc( var(--skeleton-percentage) * (100vw + var(--skeleton-highlight-size) * 2) - var(--skeleton-highlight-size) );--leading-edge: calc( var(--anim-pos) + var(--skeleton-highlight-size) + var(--skeleton-highlight-leading-edge-blur) );--gradient-end: calc( var(--anim-pos) + (var(--skeleton-highlight-size) * 100 / 100) );background-image:linear-gradient(var(--skeleton-angle, 90deg),hsl(from var(--skeleton-highlight) h s l / calc(alpha*0)) var(--anim-pos),hsl(from var(--skeleton-highlight) h s l / calc(alpha*1)) var(--gradient-end),hsl(from var(--skeleton-highlight) h s l / calc(alpha*0)) var(--leading-edge));background-attachment:fixed}.loading-skeleton.dark{color-scheme:dark}@property --skeleton-percentage{syntax: "<number>"; inherits: true; initial-value: 0;}@property --skeleton-full-viewport{syntax: "<length>"; initial-value: 0px; inherits: false;}@keyframes skeletonPercent{0%{--skeleton-percentage: 0}66%,to{--skeleton-percentage: 1}}
