:root{color-scheme:light dark;--wrapper-width: 100vw;--wrapper-height: 100svh;--wrapper-gap: 10px;--item-border-radius: 5px;--carousel-scroll-padding: 24px;--body-padding: 100px 0 0 0;--color-background: #fff;--bg-offset-2: hsl(220, 14%, 98%);--bg-offset-10: hsl(220, 14%, 90%);--bg-offset-60: hsl(220, 14%, 40%)}@media (prefers-color-scheme: dark){:root{--color-background: hsl(220, 14%, 8%);--bg-offset-2: hsl(220, 14%, 10%);--bg-offset-10: hsl(220, 14%, 20%);--bg-offset-60: hsl(220, 14%, 60%)}}body,html{margin:0;padding:0;height:100%;font-family:sans-serif;background:var(--color-background)}body{padding:var(--body-padding)}.carousels{display:flex;flex-wrap:wrap;gap:100px;padding:0}.alignment-controls{position:fixed;top:12px;left:12px;z-index:10;display:flex;gap:12px;padding:8px 12px;background:var(--bg-offset-2);border-radius:10px;font-size:13px}.alignment-controls label{display:flex;align-items:center;gap:4px;cursor:pointer}.build-stamp{align-self:center;font:11px/1 ui-monospace,monospace;color:var(--bg-offset-60);opacity:.7}.carousel-controls{display:flex;gap:16px;margin-bottom:12px;padding:8px 12px;background:var(--bg-offset-2);border-radius:10px;font-size:13px;width:fit-content}.carousel-controls label{display:flex;align-items:center;gap:6px}.carousel-wrapper{display:flex;align-items:center;gap:var(--wrapper-gap);width:var(--wrapper-width);height:var(--wrapper-height);margin:var(--wrapper-margin);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:var(--carousel-scroll-padding);box-shadow:inset 0 0 0 1px #ff00004d;--noncurrent-scale: .8;--noncurrent-opacity: .5}.carousel-with-controls .carousel-wrapper::-webkit-scrollbar{display:none}.carousel-wrapper[data-scroll-axis=y]{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory}.carousel-wrapper.uniform-size{--wrapper-gap: 0px}.carousel-item,.spacer{height:var(--carousel-item-height);flex:0 0 auto;display:flex;font-size:12px}.carousel-item{width:var(--carousel-item-width);overflow:hidden;border-radius:var(--item-border-radius);scale:1;opacity:1;isolation:isolate}@property --item-progress{syntax: "<number>"; inherits: true; initial-value: 1;}@property --item-shift{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --scroll-error{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --contrast-amount{syntax: "<number>"; inherits: true; initial-value: 1;}@property --rest-progress{syntax: "<number>"; inherits: true; initial-value: 0;}@property --item-progress-effective{syntax: "<number>"; inherits: true; initial-value: 1;}.carousel-item{--item-progress-effective: calc(var(--rest-progress) + var(--contrast-amount) * (var(--item-progress) - var(--rest-progress)))}.carousel-wrapper{transition:--contrast-amount .13s ease}.carousel-wrapper[data-contrast=off]{--contrast-amount: 0}.carousel-wrapper:not([data-scroll-timelines=off]) .carousel-item{view-timeline-name:--item-reveal;view-timeline-axis:inline;animation-name:item-current;animation-timeline:--item-reveal;animation-fill-mode:both;animation-timing-function:linear}.carousel-wrapper[data-scroll-axis=y]:not([data-scroll-timelines=off]) .carousel-item{view-timeline-name:--item-reveal;view-timeline-axis:block;animation-name:item-current;animation-timeline:--item-reveal;animation-fill-mode:both;animation-timing-function:linear}@supports (animation-timeline: --works){.carousel-wrapper:not([data-scroll-timelines=off]) .carousel-item{view-timeline-inset:0px}}.carousel-wrapper:not([data-scroll-timelines=off]){scroll-timeline-name:--carousel-scroll;scroll-timeline-axis:inline}.carousel-wrapper[data-scroll-axis=y]:not([data-scroll-timelines=off]){scroll-timeline-name:--carousel-scroll;scroll-timeline-axis:block}.carousel-wrapper:not([data-scroll-timelines=off]) .carousel-item{--rest-progress: 1;scale:calc(var(--noncurrent-scale) + var(--item-progress-effective) * (1 - var(--noncurrent-scale)));opacity:calc(var(--noncurrent-opacity) + var(--item-progress-effective) * (1 - var(--noncurrent-opacity)));translate:calc(var(--item-shift) * var(--contrast-amount)) 0;transform:translate(var(--scroll-error))}.carousel-wrapper[data-scroll-axis=y]:not([data-scroll-timelines=off]) .carousel-item{translate:0 calc(var(--item-shift) * var(--contrast-amount));transform:translateY(var(--scroll-error))}@keyframes item-current{0%{--item-progress: 0}50%{--item-progress: 1}to{--item-progress: 0}}.carousel-item-snap-fix{scroll-snap-align:center;box-shadow:inset 0 0 0 1px #f000}.carousel-wrapper[data-scroll-alignment=start] .carousel-item-snap-fix{scroll-snap-align:start}.carousel-wrapper[data-scroll-alignment=end] .carousel-item-snap-fix{scroll-snap-align:end}.carousel-with-controls{position:relative;overflow:hidden}.carousel-comparison{width:100%}.carousel-comparison h2{margin:0 0 12px;font:13px monospace;color:var(--bg-offset-60)}.carousel-wrapper.comparison-wrapper{height:45vh}.page-controls{background:var(--bg-offset-2);width:auto;height:auto;padding:12px;border-radius:16px;position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:6px}.page-indicator-dot{width:8px;height:8px;background:var(--bg-offset-10);border-radius:10px}.page-indicator-dot.current{background:var(--bg-offset-60)}.placeholder-boxes .carousel-item{padding:6px}.thumbnail-scrubber-strip{height:100px;--noncurrent-scale: .6;--noncurrent-opacity: .6}.thumbnail-scrubber-strip::-webkit-scrollbar,.thumbnail-scrubber-main::-webkit-scrollbar,.ios-thumbnail-scrubber-strip::-webkit-scrollbar{display:none}.ios-thumbnail-scrubber-strip{height:30px}.ios-thumbnail-scrubber-item{flex:0 0 auto;width:var(--ios-item-width);height:100%;overflow:visible;display:flex;align-items:center;justify-content:center;transition:transform .13s ease}.ios-thumbnail-scrubber-thumb{flex:0 0 auto;width:var(--ios-item-width);height:100%;border-radius:3px;transition:width .13s ease,transform .13s ease;background-color:#a8afbd}@property --ios-progress{syntax: "<number>"; inherits: true; initial-value: 0;}@property --ios-bend{syntax: "<number>"; inherits: true; initial-value: 0;}.ios-scrubber-css{scroll-timeline-name:--carousel-scroll;scroll-timeline-axis:inline;animation-timeline:--carousel-scroll;animation-fill-mode:both;animation-timing-function:linear}.ios-scrubber-css .ios-thumbnail-scrubber-item,.ios-scrubber-css .ios-thumbnail-scrubber-thumb{transition:none}.ios-scrubber-css .ios-thumbnail-scrubber-item{--u: calc(var(--ios-index) - var(--ios-progress));--lo: clamp(0, calc(1 + var(--u)), 1);--hi: clamp(0, var(--u), 1);--item-progress: calc(var(--lo) - var(--hi));--item-shift: calc( var(--ios-footprint-growth) * ( var(--ios-alignment) * var(--lo) + (1 - var(--ios-alignment)) * var(--hi) - var(--ios-alignment) - var(--ios-bend) ) );transform:translate3d(calc(var(--item-shift) * var(--contrast-amount) + var(--scroll-error)),0,0)}.ios-scrubber-css .ios-thumbnail-scrubber-thumb{width:calc(var(--ios-item-width) + var(--item-progress-effective) * var(--ios-thumb-growth));transform:translate3d(calc(var(--item-progress-effective) * var(--ios-footprint-growth) * (.5 - var(--ios-alignment))),0,0)}.spacer{flex:0 0 auto;display:flex;align-items:center;justify-content:center left}.placeholder-boxes .carousel-item{background-color:#a8afbd}.placeholder-images .carousel-item img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;margin:0 auto}