.screenshot-lightbox { position: fixed; width: min(92vw, 1400px); max-width: none; max-height: 94vh; overflow: visible; padding: 40px 62px 34px; border: 2px solid #d7e5e9; border-radius: 18px; background: #fffdf2; color: #244d72; box-shadow: 0 18px 60px rgba(7, 20, 38, .38); }
.screenshot-lightbox::backdrop { background: rgba(18, 35, 58, .86); backdrop-filter: blur(3px); }
.screenshot-lightbox figure { display: grid; justify-items: center; gap: 10px; margin: 0; }
.screenshot-lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 108px); border-radius: 8px; object-fit: contain; }
.screenshot-lightbox figcaption { color: #8093a2; font-size: 11px; font-weight: 700; }
.lightbox-close,.lightbox-arrow { position: absolute; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(25, 45, 70, .2); color: #304e72; cursor: pointer; }
.lightbox-close { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 23px; line-height: 1; }
.lightbox-arrow { top: 50%; width: 44px; height: 44px; transform: translateY(-50%); font: 400 31px/1 Arial, sans-serif; }
.lightbox-arrow--previous { left: 10px; }
.lightbox-arrow--next { right: 10px; }
.lightbox-arrow[hidden] { display: none; }
.lightbox-close:hover,.lightbox-arrow:hover { background: #fff5c8; }
.screenshot-lightbox button:focus-visible { outline: 3px solid #f0c365; outline-offset: 3px; }

@media (max-width: 640px) {
  .screenshot-lightbox { width: 100vw; max-height: 100dvh; padding: 56px 8px 22px; border-radius: 0; }
  .screenshot-lightbox img { max-height: calc(100dvh - 110px); }
  .lightbox-arrow { width: 36px; height: 36px; }
  .lightbox-arrow--previous { left: 8px; }
  .lightbox-arrow--next { right: 8px; }
}