.mask-scroller{-webkit-mask-image:linear-gradient(#fff,#0000),linear-gradient(#fff,#fff),linear-gradient(#0000,#fff);mask-image:linear-gradient(#fff,#0000),linear-gradient(#fff,#fff),linear-gradient(#0000,#fff);-webkit-mask-position:50% 0,50%,50% 100%;mask-position:50% 0,50%,50% 100%;-webkit-mask-size:100% 0,100% 100%,100% 30px;mask-size:100% 0,100% 100%,100% 30px;-webkit-mask-repeat:no-repeat,no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat,no-repeat;-webkit-mask-clip:border-box,border-box,border-box;mask-clip:border-box,border-box,border-box;-webkit-mask-origin:border-box,border-box,border-box;mask-origin:border-box,border-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto,auto;mask-mode:match-source,match-source,match-source;-webkit-mask-size:100% calc((var(--scroll-progress-top)/100)*30px),100% 100%,100% calc((100 - (100*(var(--scroll-progress-bottom)/100)))*1px);mask-size:100% calc((var(--scroll-progress-top)/100)*30px),100% 100%,100% calc((100 - (100*(var(--scroll-progress-bottom)/100)))*1px)}@supports (animation-timeline:scroll()){.mask-scroller{animation-name:mask-up,mask-down;animation-duration:0s,0s;animation-timing-function:linear,linear;animation-iteration-count:1,1;animation-direction:normal,normal;animation-play-state:running,running;animation-delay:0s,0s;animation-fill-mode:both,both;animation-timeline:scroll(self);animation-range:0 50px,calc(100% - 50px) 100%;-webkit-mask-image:linear-gradient(#fff,#0000),linear-gradient(#fff,#fff),linear-gradient(#0000,#fff);mask-image:linear-gradient(#fff,#0000),linear-gradient(#fff,#fff),linear-gradient(#0000,#fff);-webkit-mask-position:50% 0,50%,50% 100%;mask-position:50% 0,50%,50% 100%;-webkit-mask-size:100% 0,100% 100%,100% 30px;mask-size:100% 0,100% 100%,100% 30px;-webkit-mask-repeat:no-repeat,no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat,no-repeat;-webkit-mask-clip:border-box,border-box,border-box;mask-clip:border-box,border-box,border-box;-webkit-mask-origin:border-box,border-box,border-box;mask-origin:border-box,border-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto,auto;mask-mode:match-source,match-source,match-source}}@keyframes mask-up{to{-webkit-mask-size:100% 30px,100% 100%,100% 30px;mask-size:100% 30px,100% 100%,100% 30px}}@keyframes mask-down{to{-webkit-mask-size:100% 30px,100% 100%,100% 0;mask-size:100% 30px,100% 100%,100% 0}}