.scroller{display:grid;&>header{margin-left:var(--margin-left);margin-right:var(--margin-right);grid-area:1/1/2/-1;grid-template-columns:auto minmax(20%,max-content);align-items:end;gap:1rlh;display:grid;@supports (text-box:trim-both cap alphabetic){&>*{text-box:trim-both cap alphabetic}}&>:where(h2,h3,h4,h5,h6){padding-bottom:calc(var(--gap-y) / 2 - var(--scroller-extra-padding))}&>menu{width:max-content;height:0;min-height:100%;max-width:calc(50dvw - var(--gap-x) - var(--margin-left) - var(--margin-right));pointer-events:none;opacity:1;will-change:opacity;isolation:isolate;justify-content:end;justify-self:end;align-items:end;transition:opacity .2s ease-out;display:flex;&>a{width:.625rlh;max-width:100%;height:2rlh;padding-inline:.0625rlh;padding-bottom:calc(var(--gap-y) / 2 - var(--scroller-extra-padding));box-sizing:content-box;pointer-events:all;color:var(--weak-text-color);z-index:1;touch-action:none;align-items:end;text-decoration:none;display:flex;position:relative;&:after{content:"";aspect-ratio:1;background-color:currentColor;border-radius:50%;width:100%;max-width:100%;display:block}will-change:opacity, color}&.all-visible{opacity:0;transition-delay:.2s}}}&>:where(.items,.shroud){grid-area:2/1/3/-1}&>.shroud{grid-template-columns:var(--margin-left) 1fr var(--margin-right);pointer-events:none;z-index:1;--gradient:color(from var(--background-color) display-p3 r g b / 1) 0%, color(from var(--background-color) display-p3 r g b / .987) 0.8%, color(from var(--background-color) display-p3 r g b / .951) 3.1%, color(from var(--background-color) display-p3 r g b / .896) 6.8%, color(from var(--background-color) display-p3 r g b / .825) 11.6%, color(from var(--background-color) display-p3 r g b / .741) 17.5%, color(from var(--background-color) display-p3 r g b / .648) 24.3%, color(from var(--background-color) display-p3 r g b / .55) 31.8%, color(from var(--background-color) display-p3 r g b / .45) 39.9%, color(from var(--background-color) display-p3 r g b / .352) 48.4%, color(from var(--background-color) display-p3 r g b / .259) 57.2%, color(from var(--background-color) display-p3 r g b / .175) 66.1%, color(from var(--background-color) display-p3 r g b / .104) 75%, color(from var(--background-color) display-p3 r g b / .049) 83.7%, color(from var(--background-color) display-p3 r g b / .013) 92.1%, color(from var(--background-color) display-p3 r g b / 0) 100%;padding:0;display:grid;&>:first-child{background:linear-gradient(to right, var(--gradient))}&>:last-child{background:linear-gradient(to left, var(--gradient));grid-column:3}}&>.items{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-color:var(--weak-text-color) transparent;scroll-padding-left:var(--margin-left);scroll-padding-right:var(--margin-right);padding-block:1px;padding-left:var(--margin-left);padding-right:var(--margin-right);position:relative;overflow:auto hidden;&:before{content:"";pointer-events:none;inset-block:var(--scroller-extra-padding);left:var(--margin-left);right:var(--margin-right);border-top:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color);position:absolute}&>*{scroll-snap-align:start;grid-column-end:span min(calc(var(--span) * var(--span-multiplier)), calc(var(--column-count) - var(--shrouded-columns)));gap:var(--content-gap);align-content:start;display:grid;position:relative;@supports (text-box:trim-both cap alphabetic){&>:first-child{text-box:trim-start cap alphabetic}&>:last-child{text-box:trim-end cap alphabetic}}margin-block:calc(var(--gap-y) / 2);&:before{content:"";pointer-events:none;inset-block:calc(var(--gap-y) / -2);inset-inline:calc(var(--gap-x) / -2);border:var(--border-width) solid var(--border-color);clip-path:polygon(100% 0%, 100% var(--border-width), 50% var(--border-width), 50% calc(var(--border-width) + var(--gap-y) / 2), 100% calc(var(--border-width) + var(--gap-y) / 2), 100% calc(100% - var(--border-width) - var(--gap-y) / 2), 50% calc(100% - var(--border-width) - var(--gap-y) / 2), 50% calc(100% - var(--border-width)), 100% calc(100% - var(--border-width)), 100% 100%, 0% 100%, 0% calc(100% - var(--border-width)), 50% calc(100% - var(--border-width)), 50% calc(100% - var(--border-width) - var(--gap-y) / 2), 0% calc(100% - var(--border-width) - var(--gap-y) / 2), 0% calc(var(--border-width) + var(--gap-y) / 2), 50% calc(var(--border-width) + var(--gap-y) / 2), 50% var(--border-width), 0% var(--border-width), 0% 0%);border-inline-end-width:0;position:absolute}&:first-child:before{border-inline-start-width:0;inset-inline-start:0}&:last-child:before{inset-inline-end:0}&:where(figure){isolation:isolate;align-content:stretch;position:relative;&:after{content:"";border:var(--border-width) solid var(--border-color);mix-blend-mode:luminosity;pointer-events:none;position:absolute;inset:0}}&.collapse{align-content:stretch;display:grid;& img,& video{object-fit:cover;grid-area:1/1/-1/-1;width:0;min-width:100%;height:0;min-height:100%}}}}}