.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 3, 2, 0.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lb[hidden] { display: none !important; }
.lb-img { width: min(980px, 92vw); height: auto; max-height: 84vh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); animation: lb-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lb-close, .lb-nav { position: absolute; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; transition: background 0.15s; }
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, 0.18); }
.lb-close { top: 18px; right: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font: 600 12px/1 "Plex Mono", monospace; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; }
@media (max-width: 560px) { .lb-nav { top: auto; bottom: 14px; transform: none; } .lb-prev { left: 14px; } .lb-next { right: 14px; } }
@media (prefers-reduced-motion: reduce) { .lb-img { animation: none; } }

/* shared "back to the demos" pill */
.demo-pill { position: fixed; left: 14px; bottom: 14px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(10, 8, 7, 0.88); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); color: #f1e9de; font: 600 12px/1 "Archivo", system-ui, sans-serif; text-decoration: none; }
.demo-pill:hover { border-color: rgba(255, 255, 255, 0.4); }