:where(.scroll-area){min-block-size:0;max-block-size:100%;min-inline-size:0;max-inline-size:100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#0006 calc(var(--top-mask-size)*.3),#000000d9 calc(var(--top-mask-size)*.7),#000 var(--top-mask-size),#000 calc(100% - var(--bottom-mask-size)),#000000d9 calc(100% - var(--bottom-mask-size)*.7),#0006 calc(100% - var(--bottom-mask-size)*.3),transparent 100%),linear-gradient(to right,transparent 0,#0006 calc(var(--left-mask-size)*.3),#000000d9 calc(var(--left-mask-size)*.7),#000 var(--left-mask-size),#000 calc(100% - var(--right-mask-size)),#000000d9 calc(100% - var(--right-mask-size)*.7),#0006 calc(100% - var(--right-mask-size)*.3),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#0006 calc(var(--top-mask-size)*.3),#000000d9 calc(var(--top-mask-size)*.7),#000 var(--top-mask-size),#000 calc(100% - var(--bottom-mask-size)),#000000d9 calc(100% - var(--bottom-mask-size)*.7),#0006 calc(100% - var(--bottom-mask-size)*.3),transparent 100%),linear-gradient(to right,transparent 0,#0006 calc(var(--left-mask-size)*.3),#000000d9 calc(var(--left-mask-size)*.7),#000 var(--left-mask-size),#000 calc(100% - var(--right-mask-size)),#000000d9 calc(100% - var(--right-mask-size)*.7),#0006 calc(100% - var(--right-mask-size)*.3),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#0006 calc(var(--top-mask-size)*.3),#000000d9 calc(var(--top-mask-size)*.7),#000 var(--top-mask-size),#000 calc(100% - var(--bottom-mask-size)),#000000d9 calc(100% - var(--bottom-mask-size)*.7),#0006 calc(100% - var(--bottom-mask-size)*.3),transparent 100%),linear-gradient(to right,transparent 0,#0006 calc(var(--left-mask-size)*.3),#000000d9 calc(var(--left-mask-size)*.7),#000 var(--left-mask-size),#000 calc(100% - var(--right-mask-size)),#000000d9 calc(100% - var(--right-mask-size)*.7),#0006 calc(100% - var(--right-mask-size)*.3),transparent 100%);-webkit-mask-composite:source-in,xor;overflow:auto;-webkit-mask-composite:source-in;mask-composite:intersect}:where(.scroll-area)[data-axis=both]{animation-name:scroll-fade-block,scroll-fade-inline;animation-timeline:scroll(self),scroll(self inline)}:where(.scroll-area)[data-axis=inline]{overscroll-behavior-x:contain;animation-name:scroll-fade-inline;animation-timeline:scroll(self inline);overflow-y:clip}:where(.scroll-area)[data-axis=block]{overscroll-behavior-y:contain;animation-name:scroll-fade-block;animation-timeline:scroll(self);overflow-x:clip}@property --top-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --bottom-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --left-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --right-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --fade-distance{syntax:"<length>";inherits:true;initial-value:32px}@keyframes scroll-fade-block{0%{--top-mask-size:0px;--bottom-mask-size:32px}10%,90%{--top-mask-size:32px;--bottom-mask-size:32px}to{--top-mask-size:32px;--bottom-mask-size:0px}}@keyframes scroll-fade-inline{0%{--left-mask-size:0px;--right-mask-size:32px}10%,90%{--left-mask-size:32px;--right-mask-size:32px}to{--left-mask-size:32px;--right-mask-size:0px}}