/*! RAWW Lightbox 1.0.0 — styles. Design tokens: override the --rlb-* custom properties on .rlb (or :root) — see README.md. */
.rlb {
  /* colours */
  --rlb-backdrop: rgb(6 6 7);
  --rlb-fg: rgb(255 255 255 / .94);
  --rlb-fg-dim: rgb(255 255 255 / .62);
  --rlb-glass: rgb(38 38 42 / .52);
  --rlb-glass-hover: rgb(64 64 70 / .62);
  --rlb-glass-border: rgb(255 255 255 / .12);
  --rlb-glass-blur: 22px;
  --rlb-shadow: 0 6px 28px rgb(0 0 0 / .28), 0 1px 2px rgb(0 0 0 / .2);
  --rlb-focus: #5ab0ff;
  /* type and shape */
  --rlb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rlb-radius: 999px;
  --rlb-radius-card: 16px;
  --rlb-control: 44px;
  --rlb-nav: 52px;
  --rlb-icon: 22px;
  --rlb-thumb: 46px;
  --rlb-img-radius: 0px;
  /* motion */
  --rlb-duration: 280;
  --rlb-ease: cubic-bezier(.32, .72, 0, 1);
  --rlb-ui-duration: 200ms;
  /* layout: space kept free around the photo for the controls (the zoomed photo may use the whole screen) */
  --rlb-gap: 16px;
  --rlb-inset-top: calc(env(safe-area-inset-top, 0px) + 72px);
  --rlb-inset-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  --rlb-inset-x: 88px;

  position: fixed; inset: 0; z-index: 2147483000;
  font: 500 15px/1.3 var(--rlb-font); color: var(--rlb-fg);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
  outline: none; overscroll-behavior: contain; touch-action: none; user-select: none; -webkit-user-select: none;
  contain: strict;
}
.rlb *, .rlb *::before, .rlb *::after { box-sizing: border-box; }
.rlb--single { --rlb-inset-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
@media (max-width: 767px), (pointer: coarse) and (max-width: 1023px) {
  .rlb { --rlb-inset-top: calc(env(safe-area-inset-top, 0px) + 60px); --rlb-inset-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); --rlb-inset-x: 0px; --rlb-thumb: 40px; --rlb-gap: 12px; }
  .rlb--single { --rlb-inset-bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); }
}

.rlb__backdrop { position: absolute; inset: 0; background: var(--rlb-backdrop); opacity: 0;
  transition: opacity calc(var(--rlb-duration) * 1ms) var(--rlb-ease); }
.rlb.is-open .rlb__backdrop { opacity: 1; }
.rlb.is-closing .rlb__backdrop { opacity: 0; }

/* slides */
.rlb__stage { position: absolute; inset: 0; overflow: hidden; }
.rlb__frame { position: absolute; top: var(--rlb-inset-top); bottom: var(--rlb-inset-bottom); left: calc(env(safe-area-inset-left, 0px) + var(--rlb-inset-x));
  right: calc(env(safe-area-inset-right, 0px) + var(--rlb-inset-x)); visibility: hidden; pointer-events: none; }
.rlb__slide { position: absolute; inset: 0; will-change: transform;
  transition: transform calc(var(--rlb-duration) * 1.15ms) var(--rlb-ease); }
.rlb__slide[hidden] { display: none; }
.rlb__zoom { position: absolute; transform-origin: 0 0; will-change: transform;
  transition: transform calc(var(--rlb-duration) * 1ms) var(--rlb-ease), opacity calc(var(--rlb-duration) * .8ms) ease; }
.rlb__ph, .rlb__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: var(--rlb-img-radius);
  object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.rlb__ph { filter: saturate(1.02); }
.rlb__img { opacity: 0; transition: opacity 220ms ease; }
.rlb__slide.is-loaded .rlb__img { opacity: 1; }
.rlb__slide.is-loaded .rlb__ph { visibility: hidden; transition: visibility 0s 240ms; }
.rlb.is-zoomable .rlb__slide.is-current .rlb__zoom { cursor: zoom-in; }
.rlb.is-zoomed .rlb__slide.is-current .rlb__zoom { cursor: grab; }
.rlb.is-zoomed.is-dragging .rlb__slide.is-current .rlb__zoom { cursor: grabbing; }
.rlb.is-dragging .rlb__slide, .rlb.is-dragging .rlb__zoom { transition: none; }
.rlb.is-jump .rlb__slide.is-current .rlb__zoom { animation: rlb-in calc(var(--rlb-duration) * 1ms) var(--rlb-ease); }
@keyframes rlb-in { from { opacity: 0; transform: scale(.985); } }

/* loading: placeholder first, a quiet ring only when the file is slow */
.rlb__spinner { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / .22); border-top-color: rgb(255 255 255 / .85); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease; animation: rlb-spin .9s linear infinite; }
.rlb__slide.is-loading.is-slow .rlb__spinner { opacity: 1; }
@keyframes rlb-spin { to { transform: rotate(360deg); } }

/* glass */
.rlb__glass { background: var(--rlb-glass); border: .5px solid var(--rlb-glass-border); box-shadow: var(--rlb-shadow);
  -webkit-backdrop-filter: blur(var(--rlb-glass-blur)) saturate(170%); backdrop-filter: blur(var(--rlb-glass-blur)) saturate(170%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .rlb__glass { background: rgb(36 36 40 / .9); } }

/* controls */
.rlb__ui { transition: opacity var(--rlb-ui-duration) ease, transform var(--rlb-ui-duration) ease, visibility 0s; }
.rlb.is-ui-hidden .rlb__ui, .rlb.is-dismissing .rlb__ui, .rlb.is-opening .rlb__ui, .rlb.is-closing .rlb__ui {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--rlb-ui-duration) ease, transform var(--rlb-ui-duration) ease, visibility 0s var(--rlb-ui-duration); }
.rlb.is-ui-hidden .rlb__bar { transform: translateY(-6px); }
.rlb.is-ui-hidden .rlb__strip { transform: translate(-50%, 6px); }
.rlb__bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 16px) 0 calc(env(safe-area-inset-left, 0px) + 16px); pointer-events: none; }
.rlb__bar > * { pointer-events: auto; }
.rlb--single .rlb__bar { justify-content: flex-end; }
.rlb__counter { height: 34px; padding: 0 14px; border-radius: var(--rlb-radius); display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--rlb-fg); }
.rlb__tools { display: flex; gap: 10px; margin-left: auto; }
.rlb__btn, .rlb__nav { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border-radius: var(--rlb-radius); color: var(--rlb-fg);
  display: inline-grid; place-items: center; cursor: pointer; font: inherit; }
.rlb__btn { width: var(--rlb-control); height: var(--rlb-control); }
.rlb__btn[hidden] { display: none; }
.rlb__btn svg, .rlb__nav svg { width: var(--rlb-icon); height: var(--rlb-icon); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rlb__nav { position: absolute; top: 50%; width: var(--rlb-nav); height: var(--rlb-nav); margin-top: calc(var(--rlb-nav) / -2);
  background: var(--rlb-glass); border: .5px solid var(--rlb-glass-border); box-shadow: var(--rlb-shadow);
  -webkit-backdrop-filter: blur(var(--rlb-glass-blur)) saturate(170%); backdrop-filter: blur(var(--rlb-glass-blur)) saturate(170%); }
.rlb__nav--prev { left: calc(env(safe-area-inset-left, 0px) + 20px); }
.rlb__nav--next { right: calc(env(safe-area-inset-right, 0px) + 20px); }
.rlb__nav[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) {
  .rlb__btn:hover, .rlb__nav:not([disabled]):hover { background: var(--rlb-glass-hover); }
}
.rlb__btn:active, .rlb__nav:not([disabled]):active { transform: scale(.94); transition: transform 90ms ease; }
.rlb__btn, .rlb__nav { transition: background-color 160ms ease, transform 160ms ease, opacity var(--rlb-ui-duration) ease, visibility 0s; }
/* touch screens: no side arrows on top of the photo (swipe); they come back for keyboard focus */
@media (pointer: coarse), (max-width: 767px) {
  .rlb__nav { opacity: 0; pointer-events: none; }
  .rlb__nav:focus-visible { opacity: 1; pointer-events: auto; }
}

/* thumbnails */
.rlb__strip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-width: min(calc(100% - 32px), 760px); display: flex; gap: 6px; padding: 6px; border-radius: 18px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; }
.rlb__strip::-webkit-scrollbar { display: none; }
.rlb__thumb { flex: 0 0 auto; width: var(--rlb-thumb); height: var(--rlb-thumb); padding: 0; margin: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: rgb(255 255 255 / .08); cursor: pointer; opacity: .55; position: relative;
  transition: opacity 180ms ease, transform 180ms var(--rlb-ease), width 220ms var(--rlb-ease); }
.rlb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rlb__thumb[aria-current="true"] { opacity: 1; width: calc(var(--rlb-thumb) * 1.36); }
.rlb__thumb[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .92); }
@media (hover: hover) { .rlb__thumb:hover { opacity: .9; } }
@media (max-width: 420px) { .rlb__strip { max-width: calc(100% - 24px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); } }

/* caption (optional) */
.rlb__caption { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); max-width: min(92%, 720px);
  padding: 8px 14px; border-radius: 14px; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; color: var(--rlb-fg); }
.rlb__caption[hidden] { display: none; }
.rlb--single .rlb__caption { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }

/* error */
.rlb__error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 340px); padding: 20px 20px 18px; border-radius: var(--rlb-radius-card);
  text-align: center; touch-action: auto; user-select: text; }
.rlb__error p { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--rlb-fg); }
.rlb__error-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rlb__pill { appearance: none; border: 0; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgb(255 255 255 / .14); color: var(--rlb-fg);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.rlb__pill:hover { background: rgb(255 255 255 / .22); }
.rlb__slide.is-error .rlb__ph { opacity: .25; }

/* focus: always visible for keyboard users */
.rlb button:focus { outline: none; }
.rlb button:focus-visible, .rlb a:focus-visible { outline: 2px solid var(--rlb-focus); outline-offset: 3px; }
.rlb__thumb:focus-visible { outline-offset: 2px; opacity: 1; }
.rlb__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* page under the viewer */
html.rlb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rlb { --rlb-duration: 1; --rlb-ui-duration: 1ms; }
  .rlb__backdrop { transition: opacity 120ms linear; }
  .rlb__spinner { animation-duration: 2.4s; }
  .rlb.is-jump .rlb__slide.is-current .rlb__zoom { animation: none; }
}
@media (forced-colors: active) {
  .rlb__btn, .rlb__nav, .rlb__counter, .rlb__strip { border: 1px solid CanvasText; }
  .rlb__thumb[aria-current="true"] { outline: 3px solid Highlight; }
}