.viewer{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:calc(var(--s-3) + var(--safe-top)) var(--gutter) calc(var(--s-3) + var(--safe-bottom));background:var(--c-charcoal);color:var(--c-parchment);overscroll-behavior:contain;opacity:0;transition:opacity var(--dur-ui) var(--ease-signature),overlay var(--dur-ui) allow-discrete,display var(--dur-ui) allow-discrete}.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--s-3);opacity:1}.viewer[data-closing]{opacity:0}@starting-style{.viewer[open]{opacity:0}}.viewer::backdrop{background:var(--c-charcoal)}.viewer__top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s-4);font-size:var(--fs-small)}.viewer__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer__count{color:var(--c-paper-60);font-size:var(--fs-caption);font-variant-numeric:tabular-nums}.viewer__tools{display:flex;justify-content:flex-end;gap:var(--s-2)}.viewer button{min-width:var(--touch-target);min-height:var(--touch-target);padding-inline:var(--s-3);background:none;color:inherit}.viewer__tools button{font-size:var(--fs-caption)}.viewer__tools button[aria-pressed=true]{text-decoration:underline;text-underline-offset:var(--s-1)}.viewer :focus-visible{outline:var(--border-width) solid var(--c-parchment);outline-offset:var(--s-1)}.viewer__stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:0}.viewer__nav{width:var(--s-8);height:var(--s-8);border:var(--border-width) solid var(--c-paper-20);border-radius:50%;font-size:var(--fs-h4);transition:border-color var(--dur-micro) var(--ease-signature),background-color var(--dur-micro) var(--ease-signature)}.viewer__nav:hover{border-color:var(--c-parchment);background:var(--c-paper-14)}.viewer__nav[hidden]{display:none}.viewer__figure{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--s-3);height:100%;min-width:0;min-height:0;margin:0}.viewer__frame{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;cursor:zoom-in;touch-action:none;user-select:none}.viewer__frame.is-zoomed{cursor:grab}.viewer__frame.is-panning{cursor:grabbing}.viewer__frame picture{display:contents}.viewer__frame img{width:100%;height:100%;min-height:0;object-fit:contain;transition:transform var(--dur-ui) var(--ease-signature);-webkit-user-drag:none}.viewer__frame.is-panning img{transition:none}.viewer__frame.is-loading:after{content:"";position:absolute;width:var(--s-6);height:var(--s-6);border:var(--border-width) solid var(--c-paper-20);border-top-color:var(--c-parchment);border-radius:50%;animation:viewer-spin .9s linear infinite}@keyframes viewer-spin{to{transform:rotate(1turn)}}.viewer__caption{max-width:70ch;min-height:1.5em;margin-inline:auto;color:var(--c-paper-60);font-size:var(--fs-small);line-height:1.5;text-align:center}.viewer__thumbs{display:flex;justify-content:safe center;gap:var(--s-2);overflow-x:auto;padding-block:var(--s-1);scrollbar-width:thin}.viewer__thumbs[hidden]{display:none}.viewer__thumb{flex:0 0 auto;width:var(--s-9);height:var(--s-8);padding:0!important;overflow:hidden;opacity:.45;outline-offset:0!important;transition:opacity var(--dur-micro) var(--ease-signature)}.viewer__thumb img{width:100%;height:100%;object-fit:cover}.viewer__thumb:hover,.viewer__thumb[aria-current=true]{opacity:1}.viewer__thumb[aria-current=true]{box-shadow:inset 0 0 0 var(--border-width) var(--c-parchment)}@media(max-width:700px){.viewer__top{grid-template-columns:minmax(0,1fr) auto}.viewer__title{display:none}.viewer__stage{grid-template-columns:minmax(0,1fr)}.viewer__nav{position:absolute;z-index:1;bottom:calc(var(--s-6) + var(--s-3));width:var(--touch-target);height:var(--touch-target);background:var(--c-charcoal)}.viewer__nav--prev{left:0}.viewer__nav--next{right:0}.viewer__caption{padding-inline:calc(var(--touch-target) + var(--s-2))}.viewer__thumb{width:var(--s-8);height:var(--s-7)}}@media(prefers-reduced-motion:reduce){.viewer,.viewer__frame img,.viewer__nav,.viewer__thumb{transition:none}.viewer__frame.is-loading:after{animation-duration:3s}}