.lightbox{--lb-ink:oklch(94% .006 357);--lb-muted:oklch(74% .015 357);--lb-edge:oklch(94% .006 357/.22);width:100%;max-width:100%;height:100%;max-height:100%;color:var(--lb-ink);background:0 0;border:0;margin:0;padding:clamp(.5rem,1.6vw,1.25rem);display:none}.lightbox[open]{grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(.5rem,1.2vw,.85rem);display:grid}.lightbox::backdrop{opacity:0;transition:opacity .22s var(--ease-out);background:oklch(13% .01 357/.96)}.lightbox[open]::backdrop{opacity:1}@starting-style{.lightbox[open]::backdrop{opacity:0}}.lightbox[data-closing]::backdrop{opacity:0}.lightbox[open] :is(.lightbox-bar,.lightbox-foot){opacity:1;transition:opacity .22s var(--ease-out)}@starting-style{.lightbox[open] :is(.lightbox-bar,.lightbox-foot){opacity:0}}.lightbox[data-closing] :is(.lightbox-bar,.lightbox-foot){opacity:0}:root:has(.lightbox[open]){overflow:hidden}.lightbox-bar{align-items:center;gap:1rem;min-height:2.25rem;display:flex}.lightbox-count,.lightbox-keys{font-family:var(--font-mono);color:var(--lb-muted);font-variant-numeric:tabular-nums;font-size:.72rem;line-height:1.4}.lightbox-count{color:var(--lb-ink)}.lightbox-keys{flex:1;min-width:0}.lightbox-keys-touch{display:none}@media (hover:none){.lightbox-keys-mouse{display:none}.lightbox-keys-touch{display:inline}}.lightbox-close,.lightbox-step{border:1px solid var(--lb-edge);color:var(--lb-ink);font-family:var(--font-mono);cursor:pointer;transition:background .16s var(--ease-out), border-color .16s var(--ease-out);background:oklch(20% .012 357);border-radius:999px;flex:none;font-size:.72rem}.lightbox-close{margin-left:auto;padding:.4rem .95rem}.lightbox-close:hover,.lightbox-step:hover{background:oklch(27% .015 357);border-color:oklch(94% .006 357/.4)}.lightbox-foot{justify-content:center;align-items:center;gap:1rem;min-height:2.25rem;display:flex}.lightbox-caption{max-width:70ch;color:var(--lb-muted);text-align:center;font-size:.85rem;line-height:1.45}.lightbox-step{place-items:center;width:2.5rem;height:2.5rem;font-size:.95rem;display:inline-grid}.lightbox-stage{justify-content:safe center;align-items:safe center;min-width:0;min-height:0;display:flex;overflow:hidden}.lightbox-stage[data-zoomed]{overscroll-behavior:contain;cursor:grab;scrollbar-width:thin;scrollbar-color:oklch(94% .006 357/.35) transparent;overflow:auto}.lightbox-stage[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}.lightbox-zoom{cursor:default;background:0 0;border:0;border-radius:10px;flex:none;padding:0;display:block}.lightbox-zoom[data-can-zoom]{cursor:zoom-in}.lightbox-stage[data-zoomed] .lightbox-zoom{cursor:inherit}.lightbox-zoom:focus-visible{outline-offset:3px;outline:2px solid oklch(74% .17 357)}.lightbox-img{transform-origin:0 0;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:10px;max-width:none;height:auto;display:block}.lightbox-stage[data-zoomed] .lightbox-img{border-radius:0}.shot{min-width:0;margin:0}.shot-frame{background:var(--shot-placeholder) center / cover no-repeat, var(--shot-color,var(--surface));box-shadow:0 0 0 1px var(--hairline), 0 14px 36px -18px oklch(18% .015 357/.28);cursor:zoom-in;border-radius:.4rem;text-decoration:none;display:block;position:relative;overflow:hidden}:root:is([data-theme=dark],[data-theme=dusk]) .shot-frame{box-shadow:0 0 0 1px var(--hairline), 0 14px 40px -18px oklch(0% 0 0/.6)}.shot-frame:focus-visible{outline-offset:4px;border-radius:.4rem}.shot-frame img{width:100%;height:auto;display:block}.shot-hint{color:oklch(97% .004 357);font-family:var(--font-mono);opacity:0;transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);pointer-events:none;background:oklch(18% .015 357/.82);border-radius:999px;padding:.25rem .6rem;font-size:.68rem;line-height:1.4;position:absolute;bottom:.6rem;right:.6rem;transform:translateY(2px)}.shot-frame:hover .shot-hint,.shot-frame:focus-visible .shot-hint{opacity:1;transform:none}@media (hover:none){.shot-hint{opacity:1;transform:none}}.shot figcaption{color:var(--muted);margin-top:.75rem;font-size:.75rem;line-height:1.5}
