.flippage-activity {
    max-width: 1180px;
    margin: 0 auto 2rem;
}

.flippage-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.flippage-counter {
    min-width: 9rem;
    text-align: center;
    font-weight: 600;
}

.flippage-status {
    margin: 1rem auto;
    padding: .75rem 1rem;
    max-width: 720px;
    border: 1px solid #d8e2ef;
    border-radius: .5rem;
    background: #f8fbff;
    text-align: center;
}

.flippage-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.flippage-exit[hidden] {
    display: none;
}

.flippage-icon-button {
    min-width: 2.35rem;
    font-weight: 700;
}

.flippage-zoom-value {
    min-width: 3.5rem;
    text-align: center;
    font-weight: 600;
}

.flippage-book-viewport {
    overflow: hidden;
    padding: 1rem;
    border: 1px solid #e4ebf3;
    background: #f8fafc;
}

.flippage-book {
    margin: 0 auto;
    width: 100%;
    min-height: 520px;
    --flippage-zoom: 1;
}

.flippage-book.is-zoomed {
    min-height: calc(520px * var(--flippage-zoom, 1));
}

.flippage-book .stf__wrapper {
    transform: scale(var(--flippage-zoom, 1));
    transform-origin: top center;
    transition: transform .12s ease-out;
}

.flippage-book .stf__parent,
.flippage-book .stf__wrapper,
.flippage-book .stf__block {
    overflow: visible;
}

.flippage-page {
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfd8e3;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}

.flippage-page img,
.flippage-page canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

@media (max-width: 768px) {
    .flippage-toolbar {
        flex-wrap: wrap;
    }

    .flippage-book {
        min-height: 360px;
    }
}