.picture-viewer{--picture-zoom:1;box-sizing:border-box;width:min(1100px,96vw);height:94vh;height:94dvh;max-width:96vw;max-height:94dvh;padding:16px;border:1px solid #d9d0df;border-radius:20px;background:#faf8f6;color:#302b3e;box-shadow:0 20px 90px #0006;overflow:hidden;margin:auto}
.picture-viewer[open]{display:flex;flex-direction:column;gap:12px}
.picture-viewer::backdrop{background:#17131dc9}
.picture-viewer header,.picture-viewer footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none}
.picture-viewer header{justify-content:space-between}.picture-viewer h2{font-size:18px;line-height:1.4;margin:0;letter-spacing:0}
.picture-viewer button{min-height:44px;cursor:pointer}.picture-viewer button:focus-visible,.picture-viewer-viewport:focus-visible{outline:3px solid #78558e;outline-offset:2px}
.picture-viewer footer{justify-content:center}.picture-viewer output{min-width:60px;text-align:center;font-variant-numeric:tabular-nums}
.picture-viewer-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#eae4de;border-radius:12px;touch-action:pan-x pan-y pinch-zoom}
.picture-viewer-canvas{width:calc(100% * var(--picture-zoom));height:calc(100% * var(--picture-zoom));min-height:100%;min-width:100%}
.picture-viewer img{display:block;width:100%;height:100%;object-fit:contain;max-width:none}
.picture-viewer-error{margin:0;color:#8c2939}.picture-viewer-open{overflow:hidden}
@media(max-width:620px){.picture-viewer{padding:10px;border-radius:14px;gap:8px}.picture-viewer h2{font-size:15px;max-width:58%}.picture-viewer header,.picture-viewer footer{gap:8px}.picture-viewer .secondary{padding:9px 12px;font-size:13px}}