.skeleton{--lines:1;--l-h:20px;--l-gap:10px;--g-gap:15px;--c-w:300px;--c-p:10px;--bg:#e2e1eb;--c-bg:transparent;--shine:hsla(0,0%,100%,.2);--t:2s;--c-s:40px;--c-pos:center;--rect-h:80px;background:var(--c-bg);box-sizing:border-box!important;padding:var(--c-p);position:relative;width:var(--c-w);--ln:linear-gradient(#000,#000);--circle:radial-gradient(calc(var(--c-s)/2) calc(var(--c-s)/2) at 50% 50%,#000 98%,transparent 100%);--m:unset;--m-r:inherit}.skeleton:after,.skeleton:before{content:"";height:calc(100% - var(--c-p)*2);left:var(--c-p);-webkit-mask:var(--m);mask:var(--m);-webkit-mask-repeat:var(--m-r);mask-repeat:var(--m-r);position:absolute;top:var(--c-p);width:calc(100% - var(--c-p)*2)}.skeleton:before{background:var(--bg)}.skeleton:after{animation:s var(--t) linear infinite;background:linear-gradient(to right,transparent 0 20%,var(--shine),transparent 80% 100%) -300% 0/80% 100% no-repeat}@keyframes s{to{background-position:600% 0}}.skeleton.no-animate:after{animation:none}.skeleton.skeleton-line{height:calc(var(--l-h)*var(--lines) + var(--l-gap)*(var(--lines) - 1) + var(--c-p)*2);--m:linear-gradient(#000 0 var(--l-h),transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 0/100% calc(var(--l-h) + var(--l-gap))}.skeleton.skeleton-circle{height:calc(var(--c-s) + var(--c-p)*2);width:calc(var(--c-s) + var(--c-p)*2);--m:var(--circle) 0 50%/var(--c-s) var(--c-s) no-repeat}.skeleton.skeleton-circle-line{height:calc(var(--c-s) + var(--c-p)*2);--m:var(--circle) 0 50%/calc(var(--c-s)) calc(var(--c-s)),var(--ln) calc(var(--c-s) + var(--g-gap)) var(--c-pos)/100% var(--l-h);--m-r:no-repeat}.skeleton.skeleton-circle-multi-line{height:calc(var(--l-h)*var(--lines) + var(--l-gap)*(var(--lines) - 1) + var(--c-p)*2);--m:var(--circle) 0 var(--c-pos)/calc(var(--c-s)) calc(var(--c-s)),linear-gradient(#000 0 var(--l-h),transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) calc(var(--c-s) + var(--g-gap)) 0%/100% calc(var(--l-h) + var(--l-gap));--m-r:no-repeat,no-repeat repeat}.skeleton.skeleton-circle-multi-line.adapt-to-circle{height:calc(var(--c-s) + var(--c-p)*2);--m-r:no-repeat,no-repeat space}.skeleton.skeleton-rect{height:calc(((var(--l-h)*var(--lines)) + (var(--l-gap)*(var(--lines) - 1)) + var(--g-gap))*clamp(0,var(--lines),1) + var(--rect-h) + var(--c-p)*2);--m:var(--ln) 0 0/100% var(--rect-h),repeating-linear-gradient(#000 0 var(--l-h),transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--rect-h) + var(--g-gap))/100% calc(100% - var(--rect-h) - var(--g-gap));--m-r:no-repeat}.skeleton.skeleton-chart-line{--chart-btm:40px;--chart-h:200px;height:calc(var(--chart-h) + var(--c-p)*2);--m:var(--ln) 0 100%/100% var(--chart-btm),linear-gradient(to left bottom,transparent 0 49.5%,#000 50% 100%) left 0 bottom var(--chart-btm)/calc((var(--c-w)/10)*2) calc(var(--chart-h)/2),linear-gradient(to right bottom,transparent 0 49.5%,#000 50% 100%) left calc((var(--c-w)/10)*2) bottom var(--chart-btm)/calc((var(--c-w)/10)*3) calc(var(--chart-h) - var(--chart-btm)),linear-gradient(to left bottom,transparent 0 49.5%,#000 50% 100%) left calc((var(--c-w)/10)*5) bottom var(--chart-btm)/calc((var(--c-w)/10)*3) calc(var(--chart-h) - var(--chart-btm)),linear-gradient(to right bottom,transparent 0 49.5%,#000 50% 100%) left calc((var(--c-w)/10)*8) bottom var(--chart-btm)/calc((var(--c-w)/10)*2.5) calc(var(--chart-h)/2.5);--m-r:no-repeat}.skeleton.skeleton-chart-columns{--cols:5;--col-w:25px;--col-gap:25px;--o-l:calc(var(--col-w) + var(--col-gap));--chart-h:200px;height:calc(var(--chart-h) + var(--c-p)*2);width:calc((var(--cols) - 1)*var(--o-l) + var(--col-w) + var(--c-p)*2);--m:var(--ln) 0 100%/var(--col-w) calc((var(--chart-h)/10)*4),var(--ln) calc(var(--o-l)) 100%/var(--col-w) calc((var(--chart-h)/10)*3),var(--ln) calc(var(--o-l)*2) 100%/var(--col-w) calc((var(--chart-h)/10)*6),var(--ln) calc(var(--o-l)*3) 100%/var(--col-w) calc((var(--chart-h)/10)*8),var(--ln) calc(var(--o-l)*4) 100%/var(--col-w) calc((var(--chart-h)/10)*2),var(--ln) calc(var(--o-l)*5) 100%/var(--col-w) calc((var(--chart-h)/10)*5),var(--ln) calc(var(--o-l)*6) 100%/var(--col-w) calc((var(--chart-h)/10)*4),var(--ln) calc(var(--o-l)*7) 100%/var(--col-w) calc((var(--chart-h)/10)*9),var(--ln) calc(var(--o-l)*8) 100%/var(--col-w) calc((var(--chart-h)/10)*2),var(--ln) calc(var(--o-l)*9) 100%/var(--col-w) calc((var(--chart-h)/10)*7);--m-r:no-repeat}.skeleton.skeleton-card-1{--card-h:150px;--g-gap:30px;--c-s:30px;--c-w-o:(var(--c-w) - var(--c-p) * 2);height:calc(var(--card-h) + var(--c-p)*2);--r-x:calc(var(--c-w-o)/4 + var(--g-gap));--l-x:calc(var(--c-w-o)/4 + var(--g-gap) + var(--c-s) + var(--l-gap));--l-w:calc((var(--c-w-o) - (var(--c-w-o)/4 + (var(--g-gap)*2) + (var(--l-gap)*2) + var(--c-s)*2))/2);--m:var(--ln) 0 0/calc(var(--c-w-o)/4) var(--card-h),var(--ln) calc(var(--c-w-o)/4 + var(--g-gap)) 0/calc(var(--c-w-o) - var(--c-w-o)/4 - var(--g-gap)) calc(var(--card-h)/5),var(--ln) calc(var(--c-w-o)/4 + var(--g-gap)) calc(var(--card-h)/3)/calc(var(--c-w-o) - var(--c-w-o)/4 - var(--g-gap)) calc(var(--card-h)/8),var(--ln) calc(var(--c-w-o)/4 + var(--g-gap)) calc(var(--card-h)/1.8)/calc(var(--c-w-o) - var(--c-w-o)/4 - var(--g-gap)) calc(var(--card-h)/8),var(--circle) var(--r-x) 100%/calc(var(--c-s)) calc(var(--c-s)),var(--ln) left var(--l-x) bottom calc((var(--c-s) - (var(--card-h)/8))/2)/var(--l-w) calc(var(--card-h)/8),var(--circle) calc(var(--l-x) + var(--l-w) + var(--g-gap)) 100%/calc(var(--c-s)) calc(var(--c-s)),var(--ln) left calc(var(--l-x) + var(--l-w) + var(--c-s) + var(--g-gap) + var(--l-gap)) bottom calc((var(--c-s) - (var(--card-h)/8))/2)/var(--l-w) calc(var(--card-h)/8);--m-r:no-repeat}.skeleton.skeleton-card-2{--f-l-w:90%;--f-l-h:25px;--f-l-c:var(--bg);--s-l-w:70%;--s-l-h:20px;--s-l-c:var(--bg);--s-l-m-t:15px;height:calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap) + var(--l-h)*var(--lines) + var(--l-gap)*(var(--lines) - 1) + var(--c-p)*2);--top:calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap));--m:var(--ln) 0 0/var(--f-l-w) var(--f-l-h),var(--ln) 0 calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h),var(--ln) 0 var(--top)/100% var(--l-h),var(--ln) 0 calc(var(--top) + var(--l-h) + var(--l-gap))/100% var(--l-h),var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap))*2)/80% var(--l-h),var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap))*3)/100% var(--l-h),var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap))*4)/100% var(--l-h),var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap))*5)/80% var(--l-h);--m-r:no-repeat}.skeleton.skeleton-card-2:before{background:linear-gradient(var(--f-l-c),var(--f-l-c)) 0 0/var(--f-l-w) var(--f-l-h) no-repeat,linear-gradient(var(--s-l-c),var(--s-l-c)) 0 calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h) no-repeat,var(--bg)}.skeleton.skeleton-card-3{--c-w:100%;--c-s:50px;--g-gap:30px;--f-l-w:200px;--f-l-h:20px;--s-l-w:130px;--s-l-h:10px;--l-h:10px;--lines:3;--s-l-m-t:10px;height:calc(var(--l-h)*var(--lines) + var(--l-gap)*(var(--lines) - 1) + var(--g-gap) + var(--c-s) + var(--f-l-h) + var(--s-l-h));--m:var(--circle) 0 0/var(--c-s) var(--c-s),var(--ln) calc(var(--c-s) + var(--g-gap)) 0/var(--f-l-w) var(--f-l-h),var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h),repeating-linear-gradient(#000 0 var(--l-h),transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--c-s) + var(--g-gap))/100% 100%;--m-r:no-repeat}.skeleton.skeleton-list{--bullet-ratio:1.4;--b:calc(var(--l-h)*var(--bullet-ratio));--p:calc((var(--b) - var(--l-h))/2);height:calc(var(--b) + (var(--b) + var(--l-gap))*(var(--lines) - 1) + var(--c-p)*2);--m:repeating-linear-gradient(#000 0 var(--b),transparent var(--b) calc(var(--b) + var(--l-gap))) 0 0/var(--b) 100%,repeating-linear-gradient(transparent 0 var(--p),#000 var(--p) calc(var(--p) + var(--l-h)),transparent calc(var(--p) + var(--l-h)) calc(var(--p)*2 + var(--l-gap) + var(--l-h))) calc(var(--b) + var(--g-gap)) 0/calc(var(--c-w) - var(--b) - var(--g-gap)) 100%;--m-r:no-repeat}.skeleton.skeleton-youtube{--g-gap:10px;--rect-h:150px;--c-s:36px;height:calc(var(--rect-h) + var(--g-gap) + var(--l-gap) + var(--l-h)*2 + var(--c-p)*2);--m:var(--ln) 0 0/100% var(--rect-h),var(--circle) 0 calc(var(--rect-h) + var(--g-gap))/var(--c-s) var(--c-s),var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap))/calc(var(--c-w)*.85 - var(--c-p)*2*.85 - var(--c-s)*.85 - var(--g-gap)*.85) var(--l-h),var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap) + var(--l-h) + var(--l-gap))/calc(var(--c-w)*.6 - var(--c-p)*2*.6 - var(--c-s)*.6 - var(--g-gap)*.6) var(--l-h);--m-r:no-repeat}.skeleton.skeleton-image{--i-w:250px;height:var(--i-w);width:var(--i-w);--cw:calc((var(--i-w) - var(--c-p)*2)/12);--ch:calc(var(--i-w)/12);--c-s:calc(var(--i-w)/4);--m:linear-gradient(to left top,#000 50%,transparent 50.5%) 0 100%/calc(var(--cw)*2) calc(var(--ch)*4),linear-gradient(to right top,#000 50%,transparent 50.5%) calc(var(--cw)*2) 100%/calc(var(--cw)*2) calc(var(--ch)*4),linear-gradient(to left top,#000 50%,transparent 50.5%) calc(var(--cw)*4) 100%/calc(var(--cw)*4) calc(var(--ch)*6),linear-gradient(to right top,#000 50%,transparent 50.5%) calc(var(--cw)*8) 100%/calc(var(--cw)*4) calc(var(--ch)*6),var(--circle) left calc(var(--i-w)/8) top calc(var(--i-w)/8)/var(--c-s) var(--c-s);--m-r:no-repeat}
