.screen-viewer {
  width: min(1440px, calc(100vw - 64px), calc((100dvh - 200px) * 1.6 + 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 24px;
  color: var(--ink);
  background: rgb(245 243 234 / 95%);
  box-shadow: 0 24px 80px rgb(25 23 19 / 22%);
  overflow: hidden;
}
.screen-viewer[open] { display: flex; flex-direction: column; animation: screen-viewer-enter 200ms ease-out; }
.screen-viewer::backdrop { background: rgb(25 23 19 / 23%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.screen-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 12px; flex: 0 0 auto; }
.screen-viewer-header h2 { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; text-transform: none; }
.screen-viewer button { font: inherit; cursor: pointer; min-height: 44px; white-space: nowrap; }
.screen-viewer-close { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 72%); color: var(--ink); }
.screen-viewer-close span { font-size: 22px; line-height: 1; }
.screen-viewer-stage { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; border-radius: 12px; background: #ecece7; }
.screen-viewer-stage img { display: block; width: 100%; height: auto; max-width: none; cursor: zoom-in; }
.screen-viewer.is-zoomed .screen-viewer-stage img { width: max(1440px, 160%); cursor: zoom-out; }
.screen-viewer-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 8px 0; flex: 0 0 auto; color: var(--secondary); }
.screen-viewer-footer p { margin: 0; font-size: 13px; line-height: 1.5; }
.screen-viewer-footer p span { font-size: 11px; }
.screen-viewer-zoom { padding: 8px; border: 0; background: transparent; color: var(--secondary); font-size: 13px !important; }
.screen-viewer-zoom:hover, .screen-viewer-close:hover { background: var(--invitation-green); color: var(--ink); }
.screen-viewer :focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.screen-viewer-error { font-size: 14px; padding: 12px 8px; }
.screen-viewer-error a { text-decoration: underline; }
@keyframes screen-viewer-enter { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 719px) {
  .screen-viewer { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; padding: max(16px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .screen-viewer-header { padding-inline: 4px; }
  .screen-viewer-header h2 { font-size: 16px; }
  .screen-viewer-stage { display: grid; align-items: center; }
  .screen-viewer.is-zoomed .screen-viewer-stage { display: block; }
  .screen-viewer-footer { padding-inline: 4px; gap: 8px; }
  .screen-viewer-footer p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .screen-viewer[open] { animation: none; } }

/* The screenshot is an accessible second entry to its full-screen viewer. */
.reveal-image-open { display: block; border: 0; padding: 0; background: transparent; cursor: zoom-in; color: inherit; border-radius: 10px; }
.reveal-image-inline { width: 100%; }
.reveal-stage .reveal-mat { position: relative; }
.reveal-image-pinned { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.reveal-image-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }