[data-lightbox]{cursor:zoom-in}
html:has(dialog.lightbox[open]){overflow:hidden}
dialog.lightbox{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--bg);color:var(--text);overflow:hidden;touch-action:none;overscroll-behavior:contain;hyphens:manual;
  opacity:0;transition:opacity var(--t-slow),overlay var(--t-slow) allow-discrete,display var(--t-slow) allow-discrete}
dialog.lightbox[open]{opacity:1}
@starting-style{ dialog.lightbox[open]{opacity:0} }
dialog.lightbox::backdrop{background:transparent}
dialog.lightbox:focus-visible{outline:none}
.lightbox-stage{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;
  padding:calc(var(--h-touch) + 2*var(--float-top)) calc(var(--h-touch) + 2*var(--float)) calc(var(--h-touch) + 2*var(--float-bottom));
  touch-action:none;user-select:none;-webkit-user-select:none}
.lightbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:var(--radius-s);
  touch-action:none;transform-origin:center;transition:transform var(--t-slow) var(--ease),opacity var(--t-fast);-webkit-user-drag:none;cursor:zoom-in}
dialog.lightbox[data-zoomed] .lightbox-stage img{cursor:grab}
dialog.lightbox[data-dragging] .lightbox-stage img{cursor:grabbing}
.lightbox-count{position:absolute;left:50%;top:var(--float-top);display:flex;align-items:center;height:var(--h-touch);margin:0;
  font-size:var(--fs-dense);color:var(--text-2);font-variant-numeric:tabular-nums;transform:translateX(-50%);pointer-events:none}
.lightbox button{position:absolute;display:grid;place-items:center;width:var(--h-touch);height:var(--h-touch);min-height:0;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.lightbox button .icon{width:var(--icon);height:var(--icon)}
.lightbox-close{top:var(--float-top);right:var(--float)}
.lightbox-prev,.lightbox-next{top:calc(50% - var(--h-touch)/2)}
.lightbox-prev{left:var(--float)}
.lightbox-next{right:var(--float)}
.lightbox button:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){ .lightbox button:hover{background:var(--fill)} }
@media (pointer:coarse){ .lightbox :is(.lightbox-prev,.lightbox-next){display:none} }
@media (max-width:40rem){ .lightbox-stage{padding:calc(var(--h-touch) + 2*var(--float-top)) 0 var(--float-bottom)} .lightbox-stage img{border-radius:0} }