.card-preview-button.book-preview-trigger {
    opacity: 1;
    pointer-events: auto;
    width: 52px;
    height: 52px;
    min-height: 52px;
    background: #211b1ae0;
}

.card-preview-button.book-preview-trigger svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
}

.book-preview {
    position: fixed;
    inset: 0;
    width: min(920px, calc(100vw - 32px));
    height: min(1000px, calc(100dvh - 32px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #57504b;
    border-radius: 12px;
    background: #262321;
    color: #fffaf1;
    box-shadow: 0 24px 80px #0008;
}

.book-preview[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.book-preview::backdrop { background: #130f0ee0; }
html:has(.book-preview[open]) { overflow: hidden; }

.book-preview-header,
.book-preview-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #302a27;
}

.book-preview-header {
    justify-content: space-between;
    padding: 8px 16px;
}

.book-preview-heading { min-width: 0; }
.book-preview-heading span {
    color: #e0c4a2;
    font-size: .69rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.book-preview-heading h2 {
    margin: 0;
    color: inherit;
    font-family: var(--serif);
    font-size: clamp(.9rem, 2vw, 1.18rem);
    line-height: 1.2;
}

.book-preview-stage {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: clamp(8px, 2vw, 20px);
    overflow: hidden;
    background: radial-gradient(ellipse, #4b433c, #272321 75%);
}

.book-preview-stage img {
    display: block;
    width: min(100%, calc((min(1000px, 100dvh - 32px) - 130px) * .7));
    height: 100%;
    min-height: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px #0008);
}

.book-preview-controls {
    justify-content: center;
    padding: 6px 12px;
    font-variant-numeric: tabular-nums;
}

.book-preview-controls span {
    min-width: 5ch;
    text-align: center;
    font-size: .88rem;
}

.book-preview button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.book-preview button:not(:disabled):hover,
.book-preview button:focus-visible {
    background: #51453c;
    border-color: #a78a6a;
}

.book-preview button:disabled {
    opacity: .28;
    cursor: default;
}

.book-preview button svg { width: 22px; height: 22px; }
.book-preview [data-book-preview-prev] svg { transform: rotate(180deg); }

.cd-booklet-link { margin-block: 12px 0; }
.book-preview[data-cd-booklet] .book-preview-stage img {
    width: min(100%, calc(min(1000px, 100dvh - 32px) - 130px));
}

@media (max-width: 520px) {
    .book-preview {
        width: calc(100vw - 16px);
        height: min(1000px, calc(100dvh - 16px));
    }
    .book-preview-stage img { width: 100%; }
}