.artwork-open{display:block;cursor:zoom-in}
.artwork-open:focus-visible{outline-offset:8px}
body.artwork-viewer-open{position:fixed;width:100%;overflow:hidden}
.artwork-viewer{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--paper);overflow:hidden;overscroll-behavior:contain}
.artwork-viewer::backdrop{background:transparent}
.viewer-scrim{position:absolute;inset:0;background:#151515d9}
.viewer-sheet{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 6vw 38px;pointer-events:none}
.viewer-image{display:block;width:min(100%,calc((100dvh - 130px) * var(--art-ratio)));height:auto;aspect-ratio:var(--art-ratio);max-width:100%;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);object-fit:contain;transform-origin:center;pointer-events:auto;user-select:none;-webkit-user-select:none}
.viewer-caption{margin:18px 0 0;font-size:9px;letter-spacing:1.5px;opacity:.65}
.viewer-toolbar{position:absolute;top:0;left:0;right:0;height:64px;z-index:1;pointer-events:none}
.viewer-close{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;padding:0;color:inherit;pointer-events:auto}
.viewer-close:before,.viewer-close:after{content:"";position:absolute;top:21px;left:14px;width:17px;height:1px;background:currentColor;transform:rotate(45deg)}
.viewer-close:after{transform:rotate(-45deg)}
.viewer-close:focus,.viewer-close:focus-visible{outline:none;box-shadow:none}
.viewer-close:hover,.viewer-close:focus-visible{opacity:.65}
.viewer-handle{display:none}
@media(max-width:600px){
  .artwork-viewer{color:var(--ink)}
  .viewer-sheet{background:var(--paper);padding:calc(68px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));pointer-events:auto;touch-action:pinch-zoom}
  .viewer-image{width:min(100%,calc((100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--art-ratio)));max-height:calc(100vh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .viewer-toolbar{height:calc(64px + env(safe-area-inset-top))}
  .viewer-handle{display:block;position:absolute;top:env(safe-area-inset-top);left:calc(50% - 38px);width:76px;height:44px;padding:0;color:inherit;pointer-events:auto;touch-action:none}
  .viewer-handle:before{content:"";position:absolute;top:14px;left:19px;width:38px;height:3px;border-radius:2px;background:currentColor;opacity:.25}
  .viewer-handle:focus,.viewer-handle:focus-visible{outline:none;box-shadow:none}
  .viewer-handle:hover:before,.viewer-handle:focus-visible:before{opacity:.55}
  .viewer-close{display:none}
  .viewer-caption{font-size:8px}
}