.image-viewer{width:calc(100% - 32px);height:calc(100dvh - 32px);max-width:80rem;max-height:none;margin:auto;padding:8px;border:0;color:var(--ink);background:var(--paper);overflow:hidden;overscroll-behavior:contain}.image-viewer[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)auto;gap:16px}.image-viewer::backdrop{background:var(--paper)}.viewer-image{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.viewer-controls{display:flex;align-items:center;gap:8px;width:100%;max-width:24rem;margin-inline:auto;font-size:.75rem;line-height:1.5}.viewer-controls button,.viewer-original{display:grid;flex:none;place-items:center;width:var(--control-size);height:var(--control-size);padding:0}.viewer-original{margin-inline-end:auto}.viewer-close{margin-inline-start:auto}.viewer-controls button:disabled{color:var(--muted);opacity:.4;cursor:default}.viewer-count{min-width:0;width:4em;text-align:center;font-variant-numeric:tabular-nums}@media(pointer:coarse){.image-viewer{--control-size:44px}}@media(max-width:40rem),(pointer:coarse) and (max-height:30rem){.image-viewer{--control-size:44px;width:100%;height:100dvh;max-width:none;margin:0;padding:max(8px,env(safe-area-inset-top))max(12px,env(safe-area-inset-right))max(12px,env(safe-area-inset-bottom))max(12px,env(safe-area-inset-left))}.image-viewer[open]{gap:8px}}