.fs-preview-reader {
    position: fixed;
    inset: 0;
    z-index: 6000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    background: rgba(19, 16, 10, .97);
    color: #fff;
    overscroll-behavior: contain;
}
.fs-preview-reader[hidden] { display: none; }
.fs-preview-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: max(.65rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left));
}
.fs-preview-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--fs-heading-font, Georgia, serif);
    font-weight: 700;
}
.fs-preview-count { flex: 0 0 auto; color: rgba(255,255,255,.78); font-size: .82rem; white-space: nowrap; }
.fs-preview-tools { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.fs-preview-tool,
.fs-preview-close,
.fs-preview-nav {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 .55rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.15);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
.fs-preview-tool:hover,
.fs-preview-tool:focus-visible,
.fs-preview-close:hover,
.fs-preview-close:focus-visible,
.fs-preview-nav:hover,
.fs-preview-nav:focus-visible { background: rgba(255,255,255,.29); outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.fs-preview-zoom-reset { min-width: 60px; font-size: .76rem; }
.fs-preview-close { flex: 0 0 auto; font-size: 1.55rem; line-height: 1; }
.fs-preview-stage { position: relative; min-height: 0; padding: .35rem 4.7rem; overflow: hidden; }
.fs-preview-canvas {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    touch-action: none;
    cursor: zoom-in;
}
.fs-preview-canvas[data-zoomed="true"] { place-items: start; cursor: grab; }
.fs-preview-canvas[data-zoomed="true"] img { margin-inline: auto; }
.fs-preview-canvas[data-dragging="true"] { cursor: grabbing; }
.fs-preview-canvas img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 22px 55px rgba(0,0,0,.52);
    user-select: none;
    -webkit-user-drag: none;
}
.fs-preview-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 1.85rem; line-height: 1; }
.fs-preview-prev { left: 1rem; }
.fs-preview-next { right: 1rem; }
.fs-preview-thumbs {
    display: flex;
    justify-content: safe center;
    gap: .48rem;
    min-height: 62px;
    max-width: 100%;
    overflow-x: auto;
    padding: .45rem max(1rem, env(safe-area-inset-right)) .55rem max(1rem, env(safe-area-inset-left));
    scrollbar-width: thin;
}
.fs-preview-thumb {
    flex: 0 0 auto;
    width: 50px;
    height: 62px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    line-height: 0;
}
.fs-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-preview-thumb[aria-current="true"] { border-color: var(--fs-accent, #d8ad4f); box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.fs-preview-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fs-preview-meta {
    min-height: 34px;
    padding: .2rem max(1rem, env(safe-area-inset-right)) max(.7rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    color: rgba(255,255,255,.76);
    text-align: center;
    font-size: .82rem;
}
.fs-preview-meta[hidden] { display: none; }
.fs-preview-meta a { margin-left: .45rem; color: #f4d589; font-weight: 700; text-decoration: underline; }

@media (max-width: 620px) {
    .fs-preview-bar { gap: .38rem; padding-inline: .55rem; }
    .fs-preview-title { font-size: .86rem; }
    .fs-preview-count { font-size: .72rem; }
    .fs-preview-tool,
    .fs-preview-close,
    .fs-preview-nav { min-width: 44px; width: 44px; height: 44px; padding: 0; }
    .fs-preview-zoom-reset { min-width: 52px; width: 52px; font-size: .7rem; }
    .fs-preview-stage { padding: .2rem .4rem 3.65rem; }
    .fs-preview-nav { top: auto; bottom: .3rem; transform: none; }
    .fs-preview-prev { left: .65rem; }
    .fs-preview-next { right: .65rem; }
    .fs-preview-thumbs { justify-content: flex-start; min-height: 58px; padding-block: .35rem .45rem; }
    .fs-preview-thumb { width: 46px; height: 56px; }
    .fs-preview-meta { font-size: .75rem; }
}

@media (max-width: 390px) {
    .fs-preview-bar { gap: .28rem; }
    .fs-preview-title { font-size: .78rem; }
    .fs-preview-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fs-preview-reader *, .fs-preview-reader *::before, .fs-preview-reader *::after { scroll-behavior: auto !important; }
}