.app-screenshot-grid.screenshot-carousel{display:flex;flex-wrap:nowrap;gap:24px;max-width:1100px;overflow-x:auto;padding:20px 12px 28px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding:12px;-webkit-overflow-scrolling:touch}
.screenshot-carousel figure{flex:0 0 calc((100% - 72px)/4);min-width:210px;scroll-snap-align:start}
.screenshot-open{display:block;border-radius:24px;transition:transform .25s ease,box-shadow .25s ease;cursor:zoom-in}
.screenshot-open:hover,.screenshot-open:focus-visible{transform:translateY(-8px) scale(1.025);box-shadow:0 20px 40px #12284630;outline:3px solid #4d8cff;outline-offset:4px}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin:8px auto 0;color:#535d6a;font-size:14px;text-align:center}
.carousel-controls button{border:1px solid #c7cfda;border-radius:50%;width:44px;height:44px;background:#fff;color:#1c3d6e;font-size:24px;cursor:pointer;flex-shrink:0}
#screenshot-viewer{border:0;border-radius:20px;background:transparent;color:white;padding:24px;max-width:92vw;max-height:94vh;box-sizing:border-box;overflow:auto;box-shadow:none}
#screenshot-viewer::backdrop{background:#06101de0;backdrop-filter:blur(5px)}
#screenshot-viewer img{display:block;width:auto;height:auto;max-height:78vh;max-width:80vw;margin:auto;border-radius:16px}
#screenshot-viewer p{text-align:center;margin:16px 0 0;font-weight:650}
.viewer-close{position:sticky;top:0;float:right;border:0;border-radius:50%;width:40px;height:40px;margin:0 0 12px 12px;background:white;color:#122846;font-size:30px;cursor:pointer}
@media(max-width:900px){.screenshot-carousel figure{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:680px){.app-screenshot-grid.screenshot-carousel{max-width:100%;gap:18px}.screenshot-carousel figure{flex-basis:78%;min-width:0}.carousel-controls{gap:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.app-screenshot-grid.screenshot-carousel{scroll-behavior:auto}.screenshot-open{transition:none}.screenshot-open:hover,.screenshot-open:focus-visible{transform:none}}

/* Keep the close control from shifting the image relative to its caption. */
#screenshot-viewer{position:fixed;padding:48px 20px 20px}
#screenshot-viewer .viewer-close{position:absolute;top:0;right:0;float:none;margin:0}
#screenshot-viewer img{margin-left:auto;margin-right:auto}
#screenshot-viewer p{width:100%;text-align:center;margin:16px auto 0}