/* Landing page: full-size screenshot viewer */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgb(8 9 12 / 92%); display: grid; place-items: center; padding: 56px 72px; animation: lb-in 0.2s ease; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; border-radius: 10px; box-shadow: 0 30px 80px rgb(0 0 0 / 60%); }
.lightbox figcaption { color: #e6e7ea; font-weight: 600; }
.lb-close, .lb-nav { position: absolute; border: 0; background: rgb(255 255 255 / 10%); color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 30px; line-height: 1; display: grid; place-items: center; }
.lb-close:hover, .lb-nav:hover { background: rgb(255 255 255 / 20%); }
.lb-close { top: 14px; right: 14px; }
.lb-prev { inset-inline-start: 14px; top: 50%; translate: 0 -50%; }
.lb-next { inset-inline-end: 14px; top: 50%; translate: 0 -50%; }
body.lb-open { overflow: hidden; }
@keyframes lb-in { from { opacity: 0; } }

@media (max-width: 640px) {
  .lightbox { padding: 64px 8px; }
  .lb-nav { top: auto; bottom: 14px; translate: none; }
  .lb-prev { inset-inline-start: calc(50% - 60px); }
  .lb-next { inset-inline-end: calc(50% - 60px); }
}