/* The screenshot carousel (carousel.js). Without JavaScript the page keeps its own layout. */
.has-carousel .car { --slide: min(1104px, 86vw); position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.has-carousel #see-it .car-track { display: flex !important; gap: clamp(16px, 2.5vw, 32px) !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px calc((100vw - var(--slide)) / 2) 12px; outline: none; grid-template-columns: none !important; }
.has-carousel #see-it .car-track::-webkit-scrollbar { display: none; }
.has-carousel #see-it .car-slide { flex: 0 0 var(--slide); max-width: none; width: auto; margin: 0; scroll-snap-align: center; opacity: .36; transform: scale(.94); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.has-carousel #see-it .car-slide:not(.is-on) { cursor: pointer; }
.has-carousel #see-it .car-slide:not(.is-on):hover { opacity: .55; }
.has-carousel #see-it .car-slide.is-on { opacity: 1; transform: none; }
.has-carousel #see-it .car-slide figcaption { display: none; }

/* Underneath: a short rail of thin segments (the current one fills), a quiet pause button, the caption as one line. */
.has-carousel .car-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; padding: 0 16px; }
.has-carousel .car-rail { display: flex; gap: 8px; width: min(420px, 70vw); }
.has-carousel .car-rail button { flex: 1; position: relative; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; }
.has-carousel .car-rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: rgba(242,244,255,.18); }
.has-carousel .car-rail button i { position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: #F2F4FF; transform: scaleX(0); transform-origin: left center; will-change: transform; }
.has-carousel .car-caption { margin: 6px 0 0; text-align: center; font: 500 clamp(17px, 1.7vw, 21px)/1.4 Roboto, system-ui, sans-serif; color: #F2F4FF; letter-spacing: -.005em; min-height: 1.4em; padding: 0 16px; }
.has-carousel .car-toggle { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(242,244,255,.16); background: transparent; color: rgba(242,244,255,.6); cursor: pointer; display: grid; place-items: center; transition: color .2s ease, border-color .2s ease; }
.has-carousel .car-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.has-carousel .car-toggle:hover { color: #F2F4FF; border-color: rgba(242,244,255,.4); }
.has-carousel .car button:focus-visible, .has-carousel #see-it .car-track:focus-visible { outline: 2px solid #8AB4FF; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { .has-carousel #see-it .car-slide { transition: none; } }