*,:after,:before{box-sizing:border-box}:root{--size:300px;--radius:32;--padding:64;--bar:hsla(0,0%,100%,.5);--panel:#c63;timeline-scope:--scroll_container}.scroll_container{position:relative;width:320px;aspect-ratio:3/4;resize:both;overflow:hidden;padding:0 .5rem 0 0}.scroll_container ul{height:100%;width:100%;overflow:auto;background-color:#9f9a85;border-radius:calc(var(--radius) * 1px);display:grid;grid-auto-flow:row;gap:1rem;margin:0;padding:calc(var(--padding) * 1px) 0;list-style-type:none;scroll-snap-type:y mandatory;scroll-timeline:--scroll_container;scroll-behavior:smooth}.bar__thumb,.bar__track{opacity:0;transition:opacity .2s}[data-rounded-scroll] .scroll_container :is(.bar__thumb,.bar__track){opacity:1}.scroll_container>svg{position:absolute;top:0;bottom:0;right:.5rem;pointer-events:none;height:100%;width:calc(var(--radius) * 2px);overflow:visible!important}[data-rounded-scroll] .scroll_container ul::-webkit-scrollbar{display:none}[data-rounded-scroll] ul::-webkit-scrollbar{display:none;opacity:0!important}[data-rounded-scroll] .scroll_container ul{scrollbar-width:0;scrollbar-width:none;-ms-overflow-style:none}.scroll_container path{stroke-width:calc(var(--stroke-width) * 1px)}.bar__thumb{stroke:hsl(0 0% 100%/var(--bar-alpha,.5));stroke-dasharray:var(--thumb-size) var(--track-length)}@supports (animation-timeline:scroll()){.bar__thumb{animation:scroll linear both;animation-timeline:--scroll_container}}.bar__track{stroke:hsl(0 0% 100%/var(--track-alpha,0))}.scroll_container li{text-align:center;background-color:var(--panel);width:100%;height:calc(var(--size) * .75);border-radius:calc(var(--radius) * 1px);scroll-snap-align:center}.scroll_container li:first-of-type{scroll-snap-align:start}.scroll_container li:last-of-type{scroll-snap-align:end}