dialog[data-image-viewer]:not(.inline-viewer) {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(8px, 2vw, 24px);
    border: 0;
    background: transparent;
    color: #e9e6df;
    overflow: hidden;
}

dialog[data-image-viewer]:not(.inline-viewer)[open] {
    display: grid;
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
    gap: 8px;
}

dialog[data-image-viewer]::backdrop {
    background: #090908ed;
}

[data-image-viewer] > button {
    justify-self: end;
    font: inherit;
    color: inherit;
    background: #343431;
    border: 1px solid #66665d;
    padding: 8px 16px;
    cursor: pointer;
}

[data-image-viewer] button {
    min-height: 44px;
}

[data-image-viewer]:not(.inline-viewer) > img,
[data-image-viewer]:not(.inline-viewer) > .iv-stage > img {
    display: block;
    place-self: center;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0;
}

[data-image-viewer]:not(.inline-viewer) > .iv-stage {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

[data-image-viewer].iv-actual > .iv-stage,
[data-image-viewer]:not(.inline-viewer) > .iv-stage.actual-size {
    display: block;
    overflow: auto;
}

[data-image-viewer].iv-actual > .iv-stage > img,
[data-image-viewer]:not(.inline-viewer) > .iv-stage.actual-size > img {
    max-width: none;
    max-height: none;
}

[data-image-viewer] > p {
    justify-self: center;
    text-align: center;
}

[data-image-viewer]:not(.inline-viewer) > .iv-stage > [hidden] {
    display: none;
}

[data-image-viewer] > .iv-stage > [role="status"] {
    place-self: center;
    text-align: center;
}

a[data-image-link] {
    cursor: zoom-in;
}