@layer carousel{.carousel{list-style-type:none;padding-inline:var(--base-padding);gap:var(--base-padding);margin-inline:auto;inline-size:min(var(--max-width), 100cqi);display:grid;grid-auto-flow:column;justify-items:center;grid-auto-columns:calc(100cqi - var(--base-padding) * 2);scrollbar-width:none;anchor-name:var(--carousel-anchor-name);container-type:inline-size scroll-state;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}&::scroll-button(left),&::scroll-button(right){position-area:var(--_inner)}&>li{scroll-snap-align:center;padding:0}&:focus-visible{scrollbar-color:var(--link) #fff0;outline:none}@supports (container-type:scroll-state){>*{container-type:scroll-state;@container not scroll-state(snapped:x){interactivity:inert}}}}.scroll-markers{scroll-marker-group:after;&::scroll-marker-group{position:absolute;position-anchor:var(--carousel-anchor-name);container:marker-group / inline-size;display:grid;gap:.5rem;place-content:safe center;box-sizing:border-box;scrollbar-width:none;scroll-behavior:smooth;inline-size:100%;max-inline-size:min(90cqi, 210px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:5px 10px;scroll-padding-inline:10px;top:anchor(bottom);left:calc(anchor(left) - 10%);right:calc(anchor(right) - 10%);margin-block:1rem;grid-auto-columns:1rem;grid-auto-flow:column;justify-self:center}>*{&::scroll-marker{content:" ";scroll-snap-align:center;aspect-ratio:1;border:2px solid var(--link-color);border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:#fff0;text-decoration:none;-webkit-tap-highlight-color:#fff0;transition:var(--transition-default);animation:scale-in-and-out linear both;animation-timeline:view(x);interactivity:auto}&::scroll-marker:target-current{background:var(--link-color);border-color:var(--link-color)}@media (forced-colors:active){&::scroll-marker:target-current{background:Highlight;border-color:Highlight}}&::scroll-marker:not(:active):hover{transform:scale(1.25)}&::scroll-marker:not(:active):focus{outline:2px solid var(--link-color);outline-offset:2px}}}.scroll-buttons{&::scroll-button(*){cursor:pointer;-webkit-tap-highlight-color:#fff0;position:absolute;z-index:1;position-anchor:var(--carousel-anchor-name);inline-size:2rem;margin-inline:calc(-1 * var(--base-padding) / 2);line-height:1;place-items:center;place-content:center;aspect-ratio:1;background:var(--link-color);border:var(--border-width) solid var(--link-color);border-radius:50%;mask-size:cover;position-area:var(--_outer);transition:var(--transition-default);@media (forced-colors:active){background:Canvas}}&::scroll-button(down),&::scroll-button(up){display:none}&::scroll-button(right){--_inner:center span-inline-start;--_inner-under:block-end span-inline-start;--_inner-over:block-start span-inline-start;--_outer:inline-end center;--_outer-under:end;--_outer-over:block-start inline-end;content:"" / "Scroll Right";mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z'/%3E%3C/svg%3E") no-repeat 50% 50%}&::scroll-button(left){--_inner:center span-inline-end;--_inner-under:block-end span-inline-end;--_inner-over:block-start span-inline-end;--_outer:inline-start center;--_outer-under:block-end inline-start;--_outer-over:start;content:"" / "Scroll Left";mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z'/%3E%3C/svg%3E") no-repeat 50% 50%}@container (inline-size>=calc(100cqi - 8rem - 2rem)){&::scroll-button(right),&::scroll-button(left){margin-inline:calc(-2 * var(--base-padding));position-area:var(--_outer-under)}}&::scroll-button(*):not(:disabled):is(:hover,:focus-visible){background-color:var(--body-color);color:var(--body-color);border-color:var(--body-color);transform:scale(1.1)}&::scroll-button(*):not(:active):focus-visible{outline-offset:2px;outline:var(--border-width) solid var(--link-color)}&::scroll-button(right):not(:disabled):active{transform:translateX(5px) scale(.95)}&::scroll-button(left):not(:disabled):active{transform:translateX(-5px) scale(.95)}&::scroll-button(up):not(:disabled):active{transform:translateY(-5px) scale(.95)}&::scroll-button(down):not(:disabled):active{transform:translateY(5px) scale(.95)}&::scroll-button(*):disabled{opacity:25%;cursor:not-allowed}@media (hover){&:not(:hover,:focus-within)::scroll-button(*){opacity:0}}}@keyframes scale-in-and-out{entry 0%{transform:scale(.25)}entry 100%{transform:scale(1)}exit 0%{transform:scale(1)}exit 100%{transform:scale(.25)}}@keyframes interactive-when-visible{0%{interactivity:auto}100%{interactivity:auto}}}