:root { --pw-lightbox-bg: rgba(4, 8, 16, 0.88) !important; --pw-lightbox-z-index: 2147483647 !important; --pw-lightbox-transition-fast: 0.22s !important; --pw-lightbox-transition-base: 0.34s !important; --pw-lightbox-ease-out: cubic-bezier(0.22, 1, 0.36, 1) !important; --pw-lightbox-ease-soft: cubic-bezier(0.16, 1, 0.3, 1) !important; --pw-lightbox-overlay-blur: 14px !important; --pw-lightbox-overlay-saturate: 125% !important; --pw-lightbox-max-width: min(88vw, 1600px) !important; --pw-lightbox-max-height: 88vh !important; --pw-lightbox-border-radius: 14px !important; --pw-lightbox-shadow: 0 24px 80px rgba(0, 0, 0, 0.52), 0 10px 28px rgba(0, 0, 0, 0.3) !important; --pw-lightbox-close-size: 42px !important; --pw-lightbox-nav-size: 48px !important; --pw-lightbox-icon-color: #ffffff !important; --pw-lightbox-icon-bg: rgba(12, 18, 30, 0.42) !important; --pw-lightbox-icon-bg-hover: rgba(18, 28, 44, 0.72) !important; --pw-lightbox-icon-ring: rgba(255, 255, 255, 0.22) !important; --pw-lightbox-frame-bg: linear-gradient(180deg, rgba(10, 14, 22, 0.72), rgba(3, 5, 10, 0.88)) !important; --pw-lightbox-caption-bg: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(6, 10, 18, 0.82) 32%, rgba(6, 10, 18, 0.94) 100%) !important; --pw-lightbox-caption-color: #f5f7fb !important; --pw-lightbox-caption-font-size: 0.875rem !important; } body.pw-lightbox-open { overflow: hidden !important; overscroll-behavior: contain !important; } .pw-lightbox, .pw-lightbox * { box-sizing: border-box !important; } .pw-lightbox { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important; background: var(--pw-lightbox-bg) !important; -webkit-backdrop-filter: blur(var(--pw-lightbox-overlay-blur)) saturate(var(--pw-lightbox-overlay-saturate)) !important; backdrop-filter: blur(var(--pw-lightbox-overlay-blur)) saturate(var(--pw-lightbox-overlay-saturate)) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity var(--pw-lightbox-transition-base) var(--pw-lightbox-ease-out), visibility var(--pw-lightbox-transition-base) var(--pw-lightbox-ease-out), background-color var(--pw-lightbox-transition-base) var(--pw-lightbox-ease-out) !important; z-index: var(--pw-lightbox-z-index) !important; cursor: zoom-out !important; -webkit-tap-highlight-color: transparent !important; isolation: isolate !important; } .pw-lightbox--visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .pw-lightbox__inner { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.9rem !important; max-width: var(--pw-lightbox-max-width) !important; max-height: var(--pw-lightbox-max-height) !important; width: auto !important; margin: 0 !important; transform: translate3d(0, 18px, 0) scale(0.985) !important; transform-origin: center center !important; opacity: 0 !important; transition: transform var(--pw-lightbox-transition-base) var(--pw-lightbox-ease-soft), opacity var(--pw-lightbox-transition-base) var(--pw-lightbox-ease-out) !important; touch-action: pan-y !important; cursor: default !important; will-change: transform, opacity !important; } .pw-lightbox--visible .pw-lightbox__inner { transform: translate3d(0, 0, 0) scale(1) !important; opacity: 1 !important; } .pw-lightbox__figure { position: relative !important; min-width: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; background: var(--pw-lightbox-frame-bg) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--pw-lightbox-border-radius) !important; box-shadow: var(--pw-lightbox-shadow) !important; overflow: hidden !important; } .pw-lightbox__figure, .pw-lightbox__image { margin: 0 !important; padding: 0 !important; max-width: 100% !important; } .pw-lightbox__image { display: block !important; max-height: var(--pw-lightbox-max-height) !important; width: auto !important; height: auto !important; object-fit: contain !important; background: #000 !important; border: 0 !important; opacity: 0 !important; transform: scale(1.01) !important; transition: opacity 0.28s var(--pw-lightbox-ease-out), transform 0.42s var(--pw-lightbox-ease-soft) !important; -webkit-user-drag: none !important; user-select: none !important; cursor: default !important; will-change: opacity, transform !important; } .pw-lightbox__image--loaded { opacity: 1 !important; transform: scale(1) !important; } .pw-lightbox__caption { padding: 0.65rem 0.95rem 0.8rem !important; background: var(--pw-lightbox-caption-bg) !important; color: var(--pw-lightbox-caption-color) !important; font-size: var(--pw-lightbox-caption-font-size) !important; line-height: 1.45 !important; max-width: 100% !important; word-wrap: break-word !important; margin: 0 !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; } .pw-lightbox__caption:empty { display: none !important; } .pw-lightbox__counter { position: absolute !important; top: 12px !important; left: 12px !important; padding: 0.35rem 0.62rem !important; border-radius: 999px !important; background: var(--pw-lightbox-icon-bg) !important; color: var(--pw-lightbox-icon-color) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; font-size: 0.75rem !important; line-height: 1 !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; z-index: 3 !important; pointer-events: none !important; user-select: none !important; } .pw-lightbox--single .pw-lightbox__counter { display: none !important; } .pw-lightbox__close, .pw-lightbox__nav { appearance: none !important; -webkit-appearance: none !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; outline: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; background: var(--pw-lightbox-icon-bg) !important; background-image: none !important; color: var(--pw-lightbox-icon-color) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; flex: 0 0 auto !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; font: inherit !important; transition: background-color var(--pw-lightbox-transition-fast) var(--pw-lightbox-ease-out), transform var(--pw-lightbox-transition-fast) var(--pw-lightbox-ease-out), border-color var(--pw-lightbox-transition-fast) var(--pw-lightbox-ease-out), box-shadow var(--pw-lightbox-transition-fast) var(--pw-lightbox-ease-out) !important; } .pw-lightbox__nav { width: var(--pw-lightbox-nav-size) !important; height: var(--pw-lightbox-nav-size) !important; } .pw-lightbox__nav:hover, .pw-lightbox__nav:focus-visible, .pw-lightbox__close:hover, .pw-lightbox__close:focus-visible { background: var(--pw-lightbox-icon-bg-hover) !important; border-color: var(--pw-lightbox-icon-ring) !important; transform: translateY(-1px) scale(1.02) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .pw-lightbox__nav:focus-visible, .pw-lightbox__close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.88) !important; outline-offset: 2px !important; } .pw-lightbox__nav:active, .pw-lightbox__close:active { transform: translateY(0) scale(0.98) !important; } .pw-lightbox__nav[disabled] { opacity: 0.3 !important; cursor: default !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; } .pw-lightbox__close-icon, .pw-lightbox__nav-icon { display: block !important; font-size: 1.3rem !important; line-height: 1 !important; user-select: none !important; } .pw-lightbox__nav--prev .pw-lightbox__nav-icon:before { content: "‹" !important; } .pw-lightbox__nav--next .pw-lightbox__nav-icon:before { content: "›" !important; } .pw-lightbox__close-icon:before { content: "×" !important; } .pw-lightbox__close { position: absolute !important; top: 12px !important; right: 12px !important; width: var(--pw-lightbox-close-size) !important; height: var(--pw-lightbox-close-size) !important; font-size: 1.1rem !important; line-height: 1 !important; z-index: 4 !important; } .pw-lightbox--single .pw-lightbox__nav { display: none !important; } a.pw-lightbox-link { cursor: zoom-in !important; text-decoration: none !important; } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pw-lightbox { background: rgba(0, 0, 0, 0.88) !important; } .pw-lightbox__close, .pw-lightbox__nav, .pw-lightbox__counter, .pw-lightbox__caption { background: rgba(12, 18, 30, 0.78) !important; } } @media (max-width: 768px) { :root { --pw-lightbox-max-width: 100vw !important; --pw-lightbox-max-height: 90vh !important; --pw-lightbox-border-radius: 12px !important; --pw-lightbox-nav-size: 40px !important; --pw-lightbox-close-size: 40px !important; --pw-lightbox-overlay-blur: 10px !important; } .pw-lightbox { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important; } .pw-lightbox__inner { gap: 0.55rem !important; } .pw-lightbox__caption { font-size: 0.8125rem !important; padding: 0.58rem 0.82rem 0.72rem !important; } .pw-lightbox__close { top: 10px !important; right: 10px !important; } .pw-lightbox__counter { top: 10px !important; left: 10px !important; } } @media (prefers-reduced-motion: reduce) { .pw-lightbox, .pw-lightbox__inner, .pw-lightbox__image, .pw-lightbox__close, .pw-lightbox__nav { transition: none !important; } .pw-lightbox__inner, .pw-lightbox__image { transform: none !important; } }