#bg-image-viewer {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
    margin: 0; padding: max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border: 0; color: #f7f7fa; background: #17181c; box-sizing: border-box; font-family: inherit;
}
#bg-image-viewer[open] { display: grid; grid-template-rows: 44px minmax(0,1fr) auto; gap: 12px; }
#bg-image-viewer::backdrop { background: #17181c; }
#bg-image-viewer:focus { outline: none; }
#bg-image-viewer .bg-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#bg-image-viewer .bg-viewer-count { color: #c4c5ce; font-size: 13px; font-variant-numeric: tabular-nums; }
#bg-image-viewer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: #f7f7fa; background: #303138; cursor: pointer; flex-shrink: 0; }
#bg-image-viewer button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#bg-image-viewer button:focus-visible, #bg-image-viewer a:focus-visible { outline: 2px solid #bf9dff; outline-offset: 3px; }
#bg-image-viewer .bg-viewer-stage { min-height: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; justify-items: center; gap: 16px; }
#bg-image-viewer img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; cursor: zoom-out; touch-action: pan-y pinch-zoom; user-select: none; }
#bg-image-viewer .bg-viewer-caption { margin: 0 auto; max-width: 72ch; text-align: center; color: #c4c5ce; font-size: 13px; line-height: 1.5; }
#bg-image-viewer .bg-viewer-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(420px,80vw); padding: 24px; background: #303138; border-radius: 12px; text-align: center; }
#bg-image-viewer .bg-viewer-error[hidden] { display: none; }
#bg-image-viewer a { color: #bf9dff; text-underline-offset: 4px; }
@media (hover:hover) and (pointer:fine) { #bg-image-viewer button:hover { background: #494a54; } }
@media (max-width:600px) {
    #bg-image-viewer { padding-left: 8px; padding-right: 8px; }
    #bg-image-viewer .bg-viewer-stage { position: relative; display: flex; justify-content: center; gap: 0; }
    #bg-image-viewer .bg-viewer-stage button { position: fixed; top: max(12px,env(safe-area-inset-top)); bottom: auto; z-index: 1; }
    #bg-image-viewer [data-step="-1"] { right: 112px; }
    #bg-image-viewer [data-step="1"] { right: 60px; }
    #bg-image-viewer .bg-viewer-caption { padding: 0 8px; }
}