.screenshots-page{width:min(100% - 40px,1320px);margin:0 auto;padding:0 0 60px}.screenshots-header,.screenshot-details{justify-content:space-between;align-items:center;gap:16px;display:flex}.screenshots-header{border-bottom:1px solid var(--border);padding:24px 0;font-size:13px}.screenshots-heading{margin:52px 0 28px}.screenshots-heading h1{letter-spacing:-.05em;margin:0;font-size:clamp(2.15rem,5vw,4rem);font-weight:600;line-height:1.1}.screenshots-heading p,.screenshots-empty{color:var(--muted-foreground);margin-top:10px}.screenshots-gallery,.screenshots-grid{gap:12px;display:grid}.screenshots-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}.screenshot-tile{aspect-ratio:3/2;background:var(--secondary);cursor:zoom-in;text-align:left;border-radius:8px;min-width:0;display:block;position:relative;overflow:hidden}.screenshot-tile:focus-visible,.screenshot-dialog button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.screenshot-tile img{object-fit:cover;width:100%;height:100%;display:block}.screenshot-credit{color:#fff;opacity:0;background:linear-gradient(#0000,#000c);padding:26px 12px 10px;font-size:12px;transition:opacity .15s;display:grid;position:absolute;inset:auto 0 0}.screenshot-credit strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.screenshot-tile:hover .screenshot-credit,.screenshot-tile:focus-visible .screenshot-credit{opacity:1}@media (min-width:900px){.screenshots-grid.is-mosaic{grid-template-rows:repeat(4,clamp(110px,14vw,180px));grid-template-columns:repeat(12,minmax(0,1fr))}.is-mosaic .screenshot-tile{aspect-ratio:auto}.is-mosaic .screenshot-tile:first-child{grid-area:1/1/3/4}.is-mosaic .screenshot-tile:nth-child(2){grid-area:1/4/2/7}.is-mosaic .screenshot-tile:nth-child(3){grid-area:1/7/2/10}.is-mosaic .screenshot-tile:nth-child(4){grid-area:1/10/3/13}.is-mosaic .screenshot-tile:nth-child(5){grid-area:2/4/4/10}.is-mosaic .screenshot-tile:nth-child(6){grid-area:3/1/5/4}.is-mosaic .screenshot-tile:nth-child(7){grid-area:3/10/4/13}.is-mosaic .screenshot-tile:nth-child(8){grid-area:4/4/5/8}.is-mosaic .screenshot-tile:nth-child(9){grid-area:4/8/5/13}}@media (hover:none){.screenshot-credit{opacity:1}}.screenshots-pagination{justify-content:center;gap:12px;margin-top:24px;display:flex}.screenshots-pagination a{border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:13px}.screenshot-dialog{border:1px solid var(--border);background:var(--card);width:min(1080px,100vw - 24px);max-height:calc(100dvh - 24px);color:var(--foreground);border-radius:12px;margin:auto;padding:0}.screenshot-dialog::backdrop{background:#000c}.screenshot-dialog-inner{position:relative}.screenshot-dialog img{object-fit:contain;color:#fff;background:#111;width:100%;min-height:100px;max-height:74dvh;display:block}.screenshot-details{padding:14px 16px}.screenshot-details h2{overflow-wrap:anywhere;margin:0;font-size:15px}.screenshot-details p{color:var(--muted-foreground);margin:4px 0 0;font-size:12px}.screenshot-controls{gap:4px;display:flex}.screenshot-dialog button{cursor:pointer;border-radius:6px;place-items:center;width:34px;height:34px;display:grid}.screenshot-dialog button:hover{background:var(--secondary)}.screenshot-dialog button[aria-disabled=true]{opacity:.4;cursor:default}.screenshot-dialog .screenshot-close{color:#fff;background:#000a;position:absolute;top:8px;right:8px}@media (prefers-reduced-motion:reduce){.screenshot-credit{transition:none}}
