.stage {
  position: relative;
  flex: 0 0 auto;
  contain: layout paint;
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  cursor: grab;
}

.stage.dragging {
  cursor: grabbing;
  transition: none !important;
}

.stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: none !important;
  pointer-events: none;
  -webkit-user-drag: none;
}

.stage .original {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.stage .preview {
  opacity: 1;
  transition: none;
}

#lightbox .viewer-thumb-buffer {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: .001;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  pointer-events: none;
  contain: paint;
  will-change: transform, opacity;
}

.stage.load-failed {
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 14px,rgba(0,0,0,.035) 14px 28px);
  box-shadow:none !important;
}

.viewer-load-failure {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:rgba(255,255,255,.62);
  text-align:center;
  pointer-events:none;
}

.viewer-load-failure[hidden] { display:none; }
.viewer-load-failure .load-failure-mark { width:48px;height:48px;border-color:rgba(255,255,255,.2);background:rgba(12,14,18,.32);color:rgba(255,255,255,.68);font-size:31px;box-shadow:none }
.viewer-load-failure b { font-size:13px;font-weight:600;letter-spacing:.08em }
.viewer-load-failure small { color:rgba(255,255,255,.38);font-size:10px }

dialog#lightbox {
  --dismiss-progress: 0;
  --viewer-wall-rgb:61 69 81;
  height: 100dvh;
  background:rgb(var(--viewer-wall-rgb) / calc(1 - var(--dismiss-progress) * .76));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 220ms ease-out;
}

dialog#lightbox::backdrop {
  background:transparent;
  transition: background 280ms ease-out;
}

dialog#lightbox.closing {
  background:rgba(28,31,38,0);
}

dialog#lightbox.closing::backdrop {
  background:rgba(22,24,29,0);
}

#lightbox figure {
  padding: .75vh .5vw;
}

#lightbox figure::before,
#lightbox figure::after {
  display: none;
}

#lightbox .stage {
  border-radius:3px;
  box-shadow:
    0 1px 2px rgba(4,6,10,.52),
    0 7px 14px rgba(4,6,10,.3),
    0 20px 28px rgba(4,6,10,.2);
}

#lightbox .close,
#lightbox .nav {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, .58);
  box-shadow: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.78);
  backdrop-filter: none;
  transition: opacity 160ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease, transform 180ms cubic-bezier(.22, .72, .2, 1);
}

#lightbox .viewer-count {
  position: fixed;
  top: 23px;
  left: 24px;
  z-index: 4;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0,0,0,.78);
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.22,.72,.2,1);
}

#lightbox .nav {
  width: 42px;
  height: 68px;
  border-radius: 12px;
  font-size: 38px;
  font-weight: 200;
  line-height: 1;
}

#lightbox .viewer-actions,
#lightbox .details-panel {
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.22, .72, .2, 1);
}

#lightbox.dismissing .close,
#lightbox.dismissing .nav,
#lightbox.dismissing .viewer-count,
#lightbox.dismissing .viewer-actions,
#lightbox.dismissing .details-panel {
  opacity: calc(1 - var(--dismiss-progress) * 1.8);
  pointer-events: none;
}

#lightbox.closing .close,
#lightbox.closing .nav,
#lightbox.closing .viewer-count,
#lightbox.closing .viewer-actions,
#lightbox.closing .details-panel {
  opacity: 0;
  pointer-events: none;
}

#lightbox.closing .close { transform: translateY(-10px) scale(.9); }
#lightbox.closing .viewer-count { transform: translateY(-8px); }
#lightbox.closing .prev { transform: translateX(-14px) scale(.92); }
#lightbox.closing .next { transform: translateX(14px) scale(.92); }
#lightbox.closing .viewer-actions { transform: translateY(10px) scale(.94); }

#lightbox .close:hover,
#lightbox .nav:hover {
  color: #fff;
  border-color: rgba(255,255,255,.12);
  background: rgba(12,13,14,.32);
  backdrop-filter:blur(8px);
  transform: scale(1.04);
}

#lightbox .close {
  position:fixed;
  top:18px;
  right:20px;
}

#lightbox .prev { left: 18px; }
#lightbox .next { right: 18px; }

#lightbox .viewer-actions{position:fixed;right:20px;bottom:18px;z-index:4;display:flex;align-items:center;gap:8px}
#lightbox .viewer-more {
  position:relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:rgba(12,13,14,.22);
  color:rgba(255,255,255,.62);
  box-shadow:none;
  text-shadow:0 2px 7px rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  pointer-events: auto;
  transition:color 150ms ease,border-color 150ms ease,background 150ms ease,transform 150ms ease;
}

#lightbox .viewer-more[aria-expanded="true"]{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(12,13,14,.48)}
#lightbox .viewer-more svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#lightbox .viewer-more::after{content:"";position:absolute;right:2px;bottom:2px;width:6px;height:6px;border:2px solid rgba(12,13,14,.9);border-radius:50%;background:#72d6c2;opacity:0;transform:scale(.5);transition:opacity 160ms ease,transform 180ms cubic-bezier(.22,.72,.2,1)}
#lightbox .viewer-more.original-ready{color:rgba(255,255,255,.92)}
#lightbox .viewer-more.original-ready::after{opacity:1;transform:scale(1)}
#lightbox .viewer-action-menu{position:absolute;right:0;bottom:52px;width:172px;padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,16,16,.78);box-shadow:0 14px 42px rgba(0,0,0,.28);backdrop-filter:blur(16px);animation:actions-in 150ms cubic-bezier(.22,.72,.2,1)}
#lightbox .viewer-action-menu[hidden]{display:none}
#lightbox .viewer-action-menu .download,
#lightbox .viewer-action-menu .info,
#lightbox .viewer-action-menu .recommendations{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;height:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.72);font-size:12px;text-align:left;text-decoration:none;transition:color 140ms ease,background 140ms ease}
#lightbox .viewer-action-menu span{white-space:nowrap}
#lightbox .viewer-action-menu small{color:rgba(255,255,255,.3);font-size:9px;font-weight:400;white-space:nowrap}
#lightbox .viewer-action-menu .recommendations:disabled{opacity:.58;cursor:default}
#lightbox .viewer-action-menu .recommendations[hidden]{display:none}
#lightbox .viewer-menu-divider{height:1px;margin:5px 8px;background:rgba(255,255,255,.08)}

#lightbox .viewer-more:hover,
#lightbox .download:hover,
#lightbox .info:hover,
#lightbox .info[aria-expanded="true"] {
  color: #fff;
  background:rgba(255,255,255,.08);
}

#lightbox .download svg,
#lightbox .info svg,
#lightbox .recommendations svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes actions-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}

#lightbox .details-panel{position:fixed;right:18px;bottom:72px;z-index:3;width:320px;padding:17px 18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(15,16,16,.84);color:rgba(255,255,255,.88);box-shadow:0 18px 56px rgba(0,0,0,.34);backdrop-filter:blur(18px);pointer-events:auto;animation:details-in 180ms cubic-bezier(.22,.72,.2,1)}
#lightbox .details-panel[hidden]{display:none}
#lightbox .details-heading{margin-bottom:9px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em}
#lightbox .details-panel dl{display:grid;gap:6px;margin:0}
#lightbox .details-panel dl div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}
#lightbox .details-panel dt{color:rgba(255,255,255,.42);font-size:11px}
#lightbox .details-panel dd{margin:0;overflow:hidden;color:rgba(255,255,255,.76);font-size:11px;text-align:right;text-overflow:ellipsis;white-space:nowrap}
@keyframes details-in{from{opacity:0;transform:translateX(12px) scale(.98)}to{opacity:1;transform:none}}

:root[data-theme="light"] dialog#lightbox{--viewer-wall-rgb:226 222 214;color:#202228}
:root[data-theme="light"] .viewer-load-failure{color:rgba(27,30,36,.62)}
:root[data-theme="light"] .viewer-load-failure .load-failure-mark{border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.42);color:rgba(27,30,36,.65)}
:root[data-theme="light"] .viewer-load-failure small{color:rgba(27,30,36,.4)}
:root[data-theme="light"] dialog#lightbox.closing{background:rgba(239,237,231,0)}
:root[data-theme="light"] dialog#lightbox.closing::backdrop{background:rgba(214,215,214,0)}
:root[data-theme="light"] #lightbox .stage{box-shadow:0 1px 2px rgba(62,55,47,.3),0 7px 14px rgba(62,55,47,.17),0 20px 28px rgba(62,55,47,.11)}
:root[data-theme="light"] #lightbox .close,
:root[data-theme="light"] #lightbox .nav,
:root[data-theme="light"] #lightbox .viewer-count{color:rgba(27,30,36,.58);text-shadow:0 1px 5px rgba(255,255,255,.86)}
:root[data-theme="light"] #lightbox .close:hover,
:root[data-theme="light"] #lightbox .nav:hover{color:#16181d;border-color:rgba(0,0,0,.1);background:rgba(255,255,255,.42)}
:root[data-theme="light"] #lightbox .viewer-more{border-color:rgba(0,0,0,.09);background:rgba(255,255,255,.38);color:rgba(27,30,36,.62);text-shadow:none;box-shadow:0 7px 22px rgba(55,50,45,.08)}
:root[data-theme="light"] #lightbox .viewer-more[aria-expanded="true"],
:root[data-theme="light"] #lightbox .viewer-more:hover{color:#17191e;border-color:rgba(0,0,0,.13);background:rgba(255,255,255,.7)}
:root[data-theme="light"] #lightbox .viewer-more.original-ready{color:rgba(25,28,34,.9)}
:root[data-theme="light"] #lightbox .viewer-more::after{border-color:rgba(245,244,240,.95)}
:root[data-theme="light"] #lightbox .viewer-action-menu{border-color:rgba(0,0,0,.1);background:rgba(250,249,246,.86);box-shadow:0 16px 46px rgba(55,50,45,.16)}
:root[data-theme="light"] #lightbox .viewer-action-menu .download,
:root[data-theme="light"] #lightbox .viewer-action-menu .info,
:root[data-theme="light"] #lightbox .viewer-action-menu .recommendations{color:rgba(28,30,35,.72)}
:root[data-theme="light"] #lightbox .viewer-action-menu small{color:rgba(28,30,35,.35)}
:root[data-theme="light"] #lightbox .viewer-menu-divider{background:rgba(0,0,0,.08)}
:root[data-theme="light"] #lightbox .download:hover,
:root[data-theme="light"] #lightbox .info:hover,
:root[data-theme="light"] #lightbox .info[aria-expanded="true"]{color:#17191e;background:rgba(0,0,0,.055)}
:root[data-theme="light"] #lightbox .details-panel{border-color:rgba(0,0,0,.1);background:rgba(250,249,246,.9);color:rgba(27,29,34,.88);box-shadow:0 18px 56px rgba(55,50,45,.18)}
:root[data-theme="light"] #lightbox .details-heading{color:#1b1d22}
:root[data-theme="light"] #lightbox .details-panel dt{color:rgba(27,29,34,.45)}
:root[data-theme="light"] #lightbox .details-panel dd{color:rgba(27,29,34,.74)}


header button,
header .search {
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

header .search:focus-within {
  border-color: var(--muted);
  background: var(--control);
  box-shadow: 0 0 0 3px var(--soft);
}

@media (max-width: 650px) {
  #lightbox figure { padding: 2vh 0; }
  #lightbox .stage { border-radius:1px;box-shadow:0 1px 2px rgba(4,6,10,.46),0 5px 10px rgba(4,6,10,.27),0 13px 20px rgba(4,6,10,.18) }
  :root[data-theme="light"] #lightbox .stage{box-shadow:0 1px 2px rgba(62,55,47,.27),0 5px 10px rgba(62,55,47,.15),0 13px 20px rgba(62,55,47,.1)}
  #lightbox .nav{display:none}
  #lightbox .details-panel {
    left:12px;
    right:12px;
    bottom:calc(68px + env(safe-area-inset-bottom,0px));
    width:auto;
    border-radius:18px;
    animation-name:details-up;
  }
  #lightbox .viewer-actions{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  #lightbox .close{top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px))}
  #lightbox .viewer-count{top:calc(20px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px))}
}

@keyframes details-up{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* Refined viewer surface */
dialog#lightbox{
--viewer-wall-rgb:24 30 37;
color:#f7f7f5;
transition:background 260ms cubic-bezier(.2,.78,.2,1)
}
#lightbox figure::before{
display:block;
position:fixed;
inset:0;
z-index:0;
height:auto;
background:
radial-gradient(ellipse 104% 94% at 50% 45%,rgba(194,212,230,.52) 0,rgba(126,148,170,.37) 40%,rgba(61,75,90,.2) 68%,transparent 86%),
radial-gradient(ellipse 122% 114% at 50% 50%,transparent 48%,rgba(2,5,9,.68) 100%),
linear-gradient(145deg,rgba(117,91,76,.09),transparent 34%,rgba(69,91,114,.12));
opacity:calc(1 - var(--dismiss-progress) * 1.4);
transition:opacity 180ms ease;
pointer-events:none
}
#lightbox .stage{
z-index:1;
border:0;
border-radius:7px;
background:transparent;
box-shadow:
0 0 0 1px rgba(238,246,255,.5),
0 0 0 2px rgba(0,0,0,.42),
0 0 42px rgba(185,213,240,.2),
0 3px 5px rgba(0,0,0,.82),
0 10px 22px -2px rgba(0,0,0,.72),
0 28px 54px -8px rgba(0,0,0,.64),
0 60px 112px -18px rgba(0,0,0,.54),
0 112px 200px -36px rgba(0,0,0,.4);
transition:box-shadow 220ms ease,border-color 220ms ease
}
#lightbox .stage.awaiting-image{
background:#363e47
}
#lightbox .stage.awaiting-image::before{
content:"";
position:absolute;
inset:0;
z-index:0;
border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(232,240,247,.12),inset 0 1px 0 rgba(255,255,255,.055);
pointer-events:none
}
#lightbox .stage::after{
content:"";
position:absolute;
inset:0;
z-index:4;
border-radius:inherit;
box-shadow:
inset 0 0 0 1px rgba(235,244,252,.3),
inset 0 1px 0 rgba(255,255,255,.42),
inset 0 -1px 0 rgba(0,0,0,.34),
inset 1px 0 0 rgba(255,255,255,.14),
inset -1px 0 0 rgba(0,0,0,.18);
pointer-events:none
}
#lightbox .stage img{z-index:1;border-radius:inherit}
.stage .original{transition:opacity 160ms cubic-bezier(.2,.78,.2,1)}
#lightbox .close,
#lightbox .nav,
#lightbox .viewer-more{
border:1px solid rgba(255,255,255,.11);
background:rgba(18,22,27,.42);
color:rgba(255,255,255,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.15);
-webkit-backdrop-filter:blur(16px) saturate(135%);
backdrop-filter:blur(16px) saturate(135%);
text-shadow:none;
transition:opacity 160ms ease,color 160ms ease,border-color 160ms ease,background 180ms ease,transform 220ms cubic-bezier(.16,1,.3,1),box-shadow 180ms ease
}
#lightbox .close,
#lightbox .nav{
border-color:rgba(255,255,255,.055);
background:rgba(10,13,17,.1);
color:rgba(255,255,255,.42);
box-shadow:none;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px)
}
#lightbox .close{
top:0;
right:0;
display:grid;
place-items:center;
width:84px;
height:84px;
padding:0;
border:0;
border-radius:0;
background:transparent;
color:rgba(255,255,255,.38);
box-shadow:none;
text-shadow:0 1px 3px rgba(0,0,0,.72),0 0 10px rgba(0,0,0,.26);
-webkit-backdrop-filter:none;
backdrop-filter:none
}
#lightbox .nav{
display:grid;
place-items:center;
top:50%;
width:48px;
height:48px;
padding:0;
border-radius:50%;
background:rgba(10,13,17,.1);
box-shadow:none;
font-size:0;
transform:translateY(-50%)
}
#lightbox .close svg,#lightbox .nav svg{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#lightbox .close svg{width:19px;height:19px;stroke-width:1.65;filter:drop-shadow(0 1px 2px rgba(0,0,0,.62))}
#lightbox .nav svg{width:21px;height:21px;stroke-width:1.7}
#lightbox .prev{left:clamp(16px,2vw,30px)}
#lightbox .next{right:clamp(16px,2vw,30px)}
#lightbox .viewer-count{
top:21px;
left:24px;
min-width:0;
height:auto;
padding:0;
border:0;
border-radius:0;
background:transparent;
color:rgba(255,255,255,.36);
font-size:10px;
font-weight:600;
letter-spacing:.1em;
line-height:1;
text-align:left;
text-shadow:0 1px 3px rgba(0,0,0,.72),0 0 10px rgba(0,0,0,.28);
-webkit-backdrop-filter:none;
backdrop-filter:none
}
#lightbox .viewer-actions{right:22px;bottom:20px}
#lightbox .viewer-more{
width:44px;
height:44px;
background:rgba(18,22,27,.48)
}
#lightbox .viewer-more[aria-expanded="true"]{
color:#fff;
border-color:rgba(255,255,255,.22);
background:rgba(34,40,47,.78);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 42px rgba(0,0,0,.25)
}
#lightbox .viewer-more::after{right:1px;bottom:1px;width:7px;height:7px;border-width:2px;border-color:#171b20;background:#8de0cb}
#lightbox .viewer-action-menu{
bottom:56px;
width:188px;
padding:8px;
border-color:rgba(255,255,255,.12);
border-radius:17px;
background:linear-gradient(145deg,rgba(31,36,42,.92),rgba(16,20,24,.94));
box-shadow:0 28px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
-webkit-backdrop-filter:blur(28px) saturate(140%);
backdrop-filter:blur(28px) saturate(140%);
transform-origin:bottom right;
animation:viewer-popover-in 220ms cubic-bezier(.16,1,.3,1)
}
#lightbox .viewer-action-menu .download,
#lightbox .viewer-action-menu .info,
#lightbox .viewer-action-menu .recommendations{
height:42px;
border-radius:10px;
color:rgba(255,255,255,.7);
font-size:12px;
transition:color 150ms ease,background 150ms ease,transform 180ms cubic-bezier(.2,.78,.2,1)
}
#lightbox .viewer-menu-divider{margin:6px 9px;background:rgba(255,255,255,.09)}
#lightbox .details-panel{
right:22px;
bottom:78px;
width:336px;
padding:20px;
border-color:rgba(255,255,255,.12);
border-radius:20px;
background:linear-gradient(145deg,rgba(31,36,42,.93),rgba(16,20,24,.95));
box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
-webkit-backdrop-filter:blur(28px) saturate(140%);
backdrop-filter:blur(28px) saturate(140%);
animation:viewer-details-in 240ms cubic-bezier(.16,1,.3,1)
}
#lightbox .details-heading{margin-bottom:14px;font-size:11px;font-weight:680;letter-spacing:.1em;text-transform:uppercase}
#lightbox .details-panel dl{gap:9px}
#lightbox .details-panel dl div{grid-template-columns:80px minmax(0,1fr);gap:14px}
#lightbox .details-panel dt{font-size:10px;letter-spacing:.04em}
#lightbox .details-panel dd{font-size:11px}
#lightbox .detail-copy{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
width:100%;
height:24px;
min-width:0;
padding:3px 4px;
border:0;
border-radius:7px;
background:transparent;
color:inherit;
box-shadow:none;
font:inherit;
text-align:right;
transition:color 140ms ease,background 140ms ease,transform 100ms ease
}
#lightbox .detail-copy span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lightbox .detail-copy svg{flex:0 0 auto;display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;opacity:.46}
#lightbox .detail-copy .check-icon{display:none}
#lightbox .detail-copy.copied{color:#bdd8c7}
#lightbox .detail-copy.copied .copy-icon{display:none}
#lightbox .detail-copy.copied .check-icon{display:block;opacity:.9}
#lightbox .detail-copy:active{transform:scale(.985)}
#lightbox .detail-copy:focus-visible{outline:0;background:rgba(255,255,255,.07);box-shadow:0 0 0 2px rgba(210,226,240,.14)}
.viewer-load-failure{gap:10px}
.viewer-load-failure .load-failure-mark{width:52px;height:52px;border-radius:17px;font-size:0}
.viewer-load-failure .load-failure-mark::before,.viewer-load-failure .load-failure-mark::after{width:18px}

@media(hover:hover){
#lightbox.edge-hover-prev,
#lightbox.edge-hover-next{cursor:pointer}
#lightbox.edge-hover-prev .stage,
#lightbox.edge-hover-next .stage{cursor:pointer}
#lightbox.edge-hover-prev::after,
#lightbox.edge-hover-next::after{
position:fixed;
top:0;
bottom:0;
z-index:3;
display:grid;
place-items:center;
box-sizing:border-box;
width:var(--edge-hit-width,144px);
color:rgba(225,238,249,.5);
font-size:34px;
font-weight:200;
line-height:1;
text-shadow:0 2px 8px rgba(0,0,0,.58);
pointer-events:none;
animation:viewer-edge-hover-in 150ms ease-out
}
#lightbox.edge-hover-prev::after{
content:"‹";
left:0;
place-items:center start;
padding-left:28px;
background:linear-gradient(90deg,rgba(177,207,232,.1),transparent 82%)
}
#lightbox.edge-hover-next::after{
content:"›";
right:0;
place-items:center end;
padding-right:28px;
background:linear-gradient(270deg,rgba(177,207,232,.1),transparent 82%)
}
#lightbox .viewer-more:hover{
color:#fff;
border-color:rgba(255,255,255,.2);
background:rgba(42,49,57,.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 40px rgba(0,0,0,.22);
transform:translateY(-1px) scale(1.035)
}
#lightbox .close:hover{
color:rgba(255,255,255,.82);
border-color:transparent;
background:transparent;
box-shadow:none;
transform:scale(1.07)
}
#lightbox .nav:hover{
color:rgba(255,255,255,.78);
border-color:rgba(255,255,255,.12);
background:rgba(20,25,31,.26);
box-shadow:0 8px 26px rgba(0,0,0,.12)
}
#lightbox .nav:hover{transform:translateY(-50%) scale(1.055)}
#lightbox .prev:hover{transform:translate3d(-2px,-50%,0) scale(1.055)}
#lightbox .next:hover{transform:translate3d(2px,-50%,0) scale(1.055)}
#lightbox .download:hover,#lightbox .info:hover,#lightbox .info[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.08);transform:translateX(2px)}
#lightbox .detail-copy:hover{color:#fff;background:rgba(255,255,255,.055)}
}

#lightbox.closing .prev{transform:translate3d(-14px,-50%,0) scale(.92)}
#lightbox.closing .next{transform:translate3d(14px,-50%,0) scale(.92)}
#lightbox .close:focus-visible{
color:rgba(255,255,255,.88);
border-color:transparent;
background:transparent;
box-shadow:none;
filter:drop-shadow(0 0 5px rgba(220,235,248,.38));
transform:scale(1.07)
}
#lightbox .close:active{transform:scale(.9)}
#lightbox .nav:focus-visible{
color:rgba(255,255,255,.86);
border-color:rgba(255,255,255,.22);
background:rgba(20,25,31,.32);
box-shadow:0 0 0 3px rgba(207,224,242,.12)
}

:root[data-theme="light"] dialog#lightbox{--viewer-wall-rgb:218 216 210;color:#20242a}
:root[data-theme="light"] #lightbox figure::before{background:radial-gradient(ellipse 76% 72% at 50% 45%,rgba(255,255,255,.9) 0,rgba(241,239,233,.62) 38%,rgba(221,220,215,.18) 65%,transparent 76%),radial-gradient(ellipse 110% 100% at 50% 50%,transparent 48%,rgba(92,87,79,.2) 100%),linear-gradient(145deg,rgba(206,178,153,.12),transparent 35%,rgba(155,180,204,.13))}
:root[data-theme="light"] #lightbox .stage{border:0;background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.8),0 2px 3px rgba(62,55,47,.4),0 8px 18px -2px rgba(62,55,47,.32),0 24px 48px -8px rgba(62,55,47,.26),0 52px 96px -18px rgba(62,55,47,.2),0 100px 180px -34px rgba(62,55,47,.13)}
:root[data-theme="light"] #lightbox .stage.awaiting-image{background:#e5e2db}
:root[data-theme="light"] #lightbox .stage.awaiting-image::before{box-shadow:inset 0 0 0 1px rgba(75,70,63,.1),inset 0 1px 0 rgba(255,255,255,.48)}
:root[data-theme="light"] #lightbox .stage::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.68),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(54,49,43,.24),inset 1px 0 0 rgba(255,255,255,.36),inset -1px 0 0 rgba(54,49,43,.12)}
:root[data-theme="light"] #lightbox .viewer-more{
border-color:rgba(27,31,37,.11);
background:rgba(255,255,255,.48);
color:rgba(27,31,37,.66);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 34px rgba(55,50,45,.1)
}
:root[data-theme="light"] #lightbox .close{border:0;background:transparent;color:rgba(27,31,37,.34);box-shadow:none;text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 9px rgba(255,255,255,.62)}
:root[data-theme="light"] #lightbox .close svg{filter:drop-shadow(0 1px 2px rgba(255,255,255,.86))}
:root[data-theme="light"] #lightbox .nav{border-color:rgba(27,31,37,.055);background:rgba(255,255,255,.12);color:rgba(27,31,37,.4);box-shadow:none}
:root[data-theme="light"] #lightbox .viewer-count{border:0;background:transparent;color:rgba(27,31,37,.34);text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 9px rgba(255,255,255,.62)}
:root[data-theme="light"] #lightbox .viewer-more[aria-expanded="true"]{color:#171b20;border-color:rgba(27,31,37,.16);background:rgba(255,255,255,.82)}
:root[data-theme="light"] #lightbox .viewer-more::after{border-color:#f4f2ed}
:root[data-theme="light"] #lightbox .viewer-action-menu,
:root[data-theme="light"] #lightbox .details-panel{border-color:rgba(27,31,37,.1);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,242,236,.96));box-shadow:0 28px 80px rgba(55,50,45,.2),inset 0 1px 0 #fff}
:root[data-theme="light"] #lightbox .details-heading{color:#20242a}
:root[data-theme="light"] #lightbox .viewer-action-menu .download,
:root[data-theme="light"] #lightbox .viewer-action-menu .info,
:root[data-theme="light"] #lightbox .viewer-action-menu .recommendations{color:rgba(28,32,38,.72)}
:root[data-theme="light"] #lightbox .details-panel dt{color:rgba(28,32,38,.46)}
:root[data-theme="light"] #lightbox .details-panel dd{color:rgba(28,32,38,.76)}
:root[data-theme="light"] #lightbox .detail-copy.copied{color:#397252}
:root[data-theme="light"] #lightbox .detail-copy:focus-visible{background:rgba(27,31,37,.055);box-shadow:0 0 0 2px rgba(27,31,37,.1)}
:root[data-theme="light"] #lightbox .detail-copy:hover{color:#171b20;background:rgba(27,31,37,.045)}
:root[data-theme="light"] #lightbox.edge-hover-prev::after,
:root[data-theme="light"] #lightbox.edge-hover-next::after{color:rgba(35,43,52,.38);text-shadow:0 1px 6px rgba(255,255,255,.82)}
:root[data-theme="light"] #lightbox .viewer-more:hover{color:#171b20;border-color:rgba(27,31,37,.16);background:rgba(255,255,255,.78)}
:root[data-theme="light"] #lightbox .close:hover,
:root[data-theme="light"] #lightbox .close:focus-visible{color:rgba(27,31,37,.76);border-color:transparent;background:transparent;box-shadow:none;filter:drop-shadow(0 0 5px rgba(255,255,255,.72))}
:root[data-theme="light"] #lightbox .nav:hover,
:root[data-theme="light"] #lightbox .nav:focus-visible{color:rgba(27,31,37,.76);border-color:rgba(27,31,37,.12);background:rgba(255,255,255,.3);box-shadow:0 8px 26px rgba(55,50,45,.08)}

@keyframes viewer-edge-hover-in{from{opacity:0}to{opacity:1}}
@keyframes viewer-popover-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes viewer-details-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

@media(max-width:650px){
#lightbox figure{padding:1.2vh 0}
#lightbox .stage{border-radius:4px;box-shadow:0 0 0 1px rgba(238,246,255,.46),0 0 0 2px rgba(0,0,0,.34),0 0 28px rgba(185,213,240,.17),0 3px 5px rgba(0,0,0,.78),0 10px 22px -3px rgba(0,0,0,.68),0 30px 60px -12px rgba(0,0,0,.58),0 68px 128px -28px rgba(0,0,0,.4)}
:root[data-theme="light"] #lightbox .stage{box-shadow:0 0 0 1px rgba(255,255,255,.72),0 2px 3px rgba(62,55,47,.36),0 9px 20px -3px rgba(62,55,47,.28),0 28px 56px -12px rgba(62,55,47,.22),0 64px 120px -28px rgba(62,55,47,.13)}
#lightbox .nav{display:none}
#lightbox .close{top:calc(-9px + env(safe-area-inset-top,0px));right:calc(-9px + env(safe-area-inset-right,0px))}
#lightbox .viewer-count{top:calc(20px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px));height:auto;padding:0}
#lightbox .viewer-actions{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
#lightbox .details-panel{left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom,0px));width:auto;padding:18px;border-radius:20px;animation-name:viewer-details-in}
}

@media(prefers-reduced-motion:reduce){
#lightbox *,#lightbox *::before,#lightbox *::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
#lightbox::after{animation-duration:.01ms!important}
}