.pinyu-viewer{position:relative;isolation:isolate;z-index:7;display:block;width:100%;height:100%;min-height:180px;pointer-events:none}
.pinyu-viewer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;animation:none;pointer-events:none;transition:opacity .2s}
.pinyu-viewer>canvas{position:absolute;inset:0;z-index:7;display:block;width:100%;height:100%;opacity:0;touch-action:pan-y;cursor:grab;pointer-events:auto;outline-offset:-5px}
.pinyu-viewer>canvas:active{cursor:grabbing}.pinyu-viewer>canvas:focus-visible{outline:1px solid rgba(255,255,255,.55);border-radius:20px}
.pinyu-viewer[data-ready=true]>canvas{opacity:1}.pinyu-viewer[data-ready=true]>img{opacity:0;visibility:hidden}
.pinyu-viewer[data-status=fallback]>canvas{opacity:0;pointer-events:none}.pinyu-viewer[data-status=fallback]>img{opacity:1;visibility:visible}
.pinyu-viewer[data-pinyu-passive]>canvas{pointer-events:none;cursor:default}
.pigne-visual:has([data-pinyu-viewer]){position:relative;z-index:7;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pinyu-viewer>img{transition:none}}