@property --srl-above{syntax:"<length>";inherits:false;initial-value:0}@property --srl-below{syntax:"<length>";inherits:false;initial-value:0}.srl{flex-direction:column;min-height:0;display:flex;position:relative}.srl-box{overscroll-behavior:contain;scrollbar-width:none;min-height:0;-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--srl-above), #000 calc(100% - var(--srl-below)), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--srl-above), #000 calc(100% - var(--srl-below)), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 var(--srl-above), #000 calc(100% - var(--srl-below)), transparent 100%);transition:--srl-above .24s var(--ease), --srl-below .24s var(--ease);flex:0 auto;overflow-y:auto}.srl-box::-webkit-scrollbar{display:none}.srl[data-overflow] .srl-box{padding-inline-end:18px}.srl[data-more-above] .srl-box{--srl-above:28px}.srl[data-more-below] .srl-box{--srl-below:36px}.srl-rail{cursor:pointer;opacity:.55;touch-action:none;width:14px;transition:opacity .26s var(--ease);position:absolute;inset-block:8px;inset-inline-end:0}.srl:hover .srl-rail,.srl[data-moving] .srl-rail{opacity:1}.srl-line{background:linear-gradient(#eb0e1a00,#eb0e1a47 12% 88%,#eb0e1a00);border-radius:1px;width:2px;margin-inline:auto;position:absolute;inset-block:0;inset-inline:0}.srl-holder{--h:max(var(--min), calc(var(--size) * 100%));width:4px;height:var(--h);background:var(--red);clip-path:polygon(0 4px,100% 0,100% calc(100% - 4px),0 100%);cursor:grab;transition:width .2s var(--ease-spring), background-size .2s var(--ease);margin-inline:auto;position:absolute;inset-block-start:calc(var(--at) * (100% - var(--h)));inset-inline:0}.srl-rail:hover .srl-holder,.srl[data-held] .srl-holder{background:linear-gradient(var(--paper), var(--paper)) center / 2px 12px no-repeat, var(--red);width:8px}.srl[data-held] .srl-holder{cursor:grabbing}@media (prefers-reduced-motion:reduce){.srl-box,.srl-rail,.srl-holder{transition:none}}