.lightbox-native{--lightbox-control-size:44px;--lightbox-gap:clamp(4px, 1.5vmin, 12px);--lightbox-gutter:clamp(8px, 2vmin, 24px);width:100vw;max-width:100%;height:100dvh;max-height:100%;padding:calc(var(--lightbox-gutter) + env(safe-area-inset-top,0px)) calc(var(--lightbox-gutter) + env(safe-area-inset-right,0px)) calc(var(--lightbox-gutter) + env(safe-area-inset-bottom,0px)) calc(var(--lightbox-gutter) + env(safe-area-inset-left,0px));box-sizing:border-box;z-index:60;background:0 0;border:none;margin:0;position:fixed;inset:0}.lightbox-native[open]{align-items:center;gap:var(--lightbox-gap);flex-direction:column;display:flex}.lightbox-native::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000d9;transition:background .25s,-webkit-backdrop-filter .25s,backdrop-filter .25s}.lightbox-viewport{touch-action:none;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative;overflow:hidden}[data-enlarge=true]{cursor:zoom-in}.lightbox-figure{align-items:center;gap:var(--lightbox-gap);box-sizing:border-box;flex-direction:column;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;display:flex;position:relative}.lightbox-image-area{flex:1;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.lightbox-img{object-fit:contain;will-change:transform;-webkit-user-select:none;user-select:none;pointer-events:auto;touch-action:none;cursor:default;width:auto;max-width:100%;height:auto;max-height:100%;transition:transform .22s;display:block}.lightbox-img[hidden]{display:none}.lightbox-img.is-zoomed{cursor:grab}.lightbox-img.is-dragging{cursor:grabbing}.lightbox-loader{pointer-events:none;background:#00000073;place-items:center;font-size:0;display:grid;position:absolute;inset:0}.lightbox-loader:after{content:"";border:.25rem solid #fff6;border-top-color:#fff;border-radius:50%;width:2.25rem;height:2.25rem;animation:.9s linear infinite lightbox-spin}.lightbox-error{padding:var(--lightbox-gap);text-align:center;color:#fff;pointer-events:auto;justify-content:safe center;align-items:center;gap:var(--lightbox-gap);background:#000000a8;flex-direction:column;font-size:1rem;display:flex;position:absolute;inset:0;overflow:auto}.lightbox-error>span{min-height:0;overflow:auto}.lightbox-loader[hidden],.lightbox-error[hidden]{display:none}.lightbox-hud{pointer-events:none;flex-direction:column;flex-shrink:0;justify-content:flex-end;gap:4px;width:100%;display:flex;container:lightbox-hud/inline-size}.lightbox-caption{color:#f9fafb;pointer-events:auto;overflow-wrap:anywhere;box-sizing:border-box;background:#0000008c;border-radius:.6rem;flex:none;width:min(100%,65ch);max-height:min(35%,12rem);margin:0;padding:clamp(6px,1.5vmin,10px) clamp(8px,2vmin,14px);font-size:.95rem;overflow:auto}.lightbox-controls,.lightbox-pan-controls{grid-template-columns:repeat(3, var(--lightbox-control-size));pointer-events:auto;align-self:center;gap:4px;margin:0;padding:0;display:grid}.lightbox-pan-controls{grid-template-columns:repeat(4, var(--lightbox-control-size))}.lightbox-pan-controls[hidden]{display:none}.lightbox-pan-controls [data-action=pan-left]>span{rotate:-90deg}.lightbox-pan-controls [data-action=pan-right]>span{rotate:90deg}.lightbox-pan-controls [data-action=pan-down]>span{rotate:180deg}@container lightbox-hud (width>=284px){.lightbox-controls{grid-template-columns:repeat(6, var(--lightbox-control-size))}}.lightbox-controls .lightbox-btn,.lightbox-pan-controls .lightbox-btn{width:var(--lightbox-control-size);height:var(--lightbox-control-size);box-sizing:border-box;line-height:1}@media (width>=48rem){.lightbox-controls,.lightbox-pan-controls{align-self:flex-end}}@media (orientation:landscape) and (height<=30rem) and (width>=30rem){.lightbox-figure{flex-direction:row}.lightbox-caption{flex:0 35%;width:35%;min-width:0;max-width:24rem;max-height:100%}.lightbox-image-area{width:auto;height:100%}}.lightbox-btn{color:#fff;cursor:pointer;background:#0000008c;border:1px solid #ffffffb3;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:0;font-size:1.35rem;transition:background .2s,transform .2s,box-shadow .2s;display:inline-flex}.lightbox-retry{border-radius:.6rem;padding:.5rem 1rem;font-size:1rem}.lightbox-btn:disabled,.lightbox-btn[aria-disabled=true]{opacity:.45;cursor:default}.lightbox-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #ffffffe6}.lightbox-btn:hover:not(:disabled,[aria-disabled=true]){background:#ffffff26;transform:translateY(-1px)}.lightbox-btn:active:not(:disabled){transform:translateY(0)}.lightbox-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes lightbox-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.lightbox-native::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}.lightbox-img,.lightbox-btn{transition:none}.lightbox-loader:after{animation:none}}@media (prefers-contrast:more){.lightbox-native::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#000}.lightbox-caption,.lightbox-btn,.lightbox-error{background:#000;border-color:#fff;box-shadow:0 0 0 2px #fff}}@media (forced-colors:active){.lightbox-btn:focus-visible{outline-offset:2px;outline:2px solid buttontext}}@media print{.lightbox-native{display:none!important}}
