.rl-image-preview{position:relative;display:grid;grid-template-rows:minmax(0,1fr);width:100%;height:100%;min-width:0;min-height:0}
.rl-image-preview[data-toolbar-placement=footer]{grid-template-rows:minmax(0,1fr) 44px;gap:12px}
.rl-image-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:auto;user-select:none}
.rl-image-viewport::-webkit-scrollbar{display:none;width:0;height:0}
.rl-image-viewport[data-pannable=true]{cursor:grab;touch-action:none}
.rl-image-viewport[data-dragging=true]{cursor:grabbing}
.rl-image-viewport:focus-visible{outline:2px solid #62695f;outline-offset:2px}
.rl-image-canvas{display:grid;place-items:center;min-width:100%;min-height:100%}
.rl-image-content{position:relative;line-height:0}
.rl-image-overlay{position:absolute;inset:0}
.rl-image-overlay[data-moving=true]{pointer-events:none}
.rl-image-content>img{display:block;max-width:none;max-height:none;object-fit:contain;transform:none;transition:none;user-select:none}
.rl-image-failed{position:absolute;inset:0;display:grid;place-items:center;color:#62695f;pointer-events:none}
.rl-image-zoom-controls{position:absolute;z-index:1;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;display:flex;align-items:center;gap:2px;padding:3px;border:0;border-radius:10px;background:rgb(255 255 255 / .94);color:#62695f;max-width:calc(100% - 16px);box-sizing:border-box}
.rl-image-preview[data-toolbar-placement=footer]>.rl-image-zoom-controls{position:static;left:auto;bottom:auto;transform:none;justify-self:center;align-self:center}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;min-width:36px;min-height:36px;padding:8px;border:0;border-radius:8px;background:transparent;color:#62695f;box-shadow:none;transform:none;transition:color 160ms ease;cursor:pointer}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button>svg{display:block;flex:none;transition:transform 180ms cubic-bezier(.2,.8,.2,1);transform-origin:center}
.rl-image-zoom-value{display:flex;align-items:center;justify-content:center;gap:1px;min-width:58px;color:#62695f;font-variant-numeric:tabular-nums;transform:none}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls input{display:block;box-sizing:border-box;width:34px;min-width:0;height:36px;margin:0;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;text-align:center;box-shadow:none;appearance:textfield;transform:none!important;transition:none!important}
.rl-image-zoom-controls input::-webkit-inner-spin-button,.rl-image-zoom-controls input::-webkit-outer-spin-button{appearance:none;margin:0}
.rl-image-zoom-value:is(:hover,:focus-within,:active){color:#000}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls input:focus-visible{outline:1px solid #62695f;outline-offset:2px}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button:is(:hover,:focus-visible,:active):not(:disabled){background:transparent;color:#000;transform:none}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button:focus-visible{outline:2px solid #62695f;outline-offset:0}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button:disabled{opacity:.35;cursor:default}
@media(hover:hover) and (pointer:fine){:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button:hover:not(:disabled)>svg{transform:scale(1.12)}}
@media(hover:hover) and (pointer:fine){
 .rl-viewer .rl-image-preview[data-toolbar-placement=floating]>.rl-image-zoom-controls{opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 0s linear 180ms}
 /* Use the actual image bounds, not the viewport's empty contain-fit margins.
    Keep controls reachable during fade-out and while keyboard users edit zoom. */
 .rl-viewer .rl-image-preview[data-toolbar-placement=floating]:has(.rl-image-content:hover,:focus-visible)>.rl-image-zoom-controls,
 .rl-viewer .rl-image-preview[data-toolbar-placement=floating]>.rl-image-zoom-controls:hover{opacity:1;visibility:visible;transition-delay:0s}
}
:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button:active:not(:disabled)>svg{transform:scale(.88);transition-duration:90ms}
@media(prefers-reduced-motion:reduce){:is(.rl-viewer,.iw-viewer) .rl-image-zoom-controls .rl-image-zoom-button>svg{transform:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.rl-viewer .rl-image-preview[data-toolbar-placement=floating]>.rl-image-zoom-controls{transition:none}}