.pdf-magazine-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.pdf-magazine-block-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0.5rem;
}

.pdf-magazine-block-lead {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.pdf-magazine-host {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    min-height: 360px;
}

.pdf-magazine-skeleton {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: stretch;
    min-height: 360px;
    padding: 1.5rem 1rem;
    background: color-mix(in srgb, var(--surface-bg, #222) 88%, transparent);
    border-radius: var(--radius-md, 8px);
}

.pdf-magazine-skeleton-page {
    flex: 1 1 40%;
    max-width: 280px;
    min-height: 320px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-primary, #ccc) 12%, transparent);
}

.pdf-magazine-loading {
    text-align: center;
    margin-top: 0.75rem;
}

.pdf-magazine-actions {
    margin-top: 0.75rem;
}

.pdf-magazine {
    --mag-height: 900px;
    --mag-bg: #2b2b2b;
    --mag-accent: #f5b335;
    --mag-page-bg: #1a1a1a;
    --mag-chrome-ms: 0.32s;
    --mag-book-shadow: 0 20px 44px rgba(0, 0, 0, 0.2), 0 6px 14px rgba(0, 0, 0, 0.1);
    --mag-book-glow: 0 0 36px color-mix(in srgb, var(--mag-accent) 20%, transparent);
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.pdf-magazine--flipbook {
    position: relative;
    --mag-flip-ms: 720ms;
}

.pdf-magazine-body {
    display: flex;
    flex-direction: column;
    height: var(--mag-height);
    max-height: min(var(--mag-height), 92vh);
    background: transparent;
}

.pdf-magazine-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: visible;
    padding: 1.25rem 0 0.35rem;
    background: transparent;
}

.pdf-magazine-book-scaler {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    transition: transform 0.2s ease;
    z-index: 1;
    overflow: visible;
}

.pdf-magazine-book-viewport {
    position: relative;
    z-index: 1;
    flex: none;
    overflow: hidden;
    margin: 0;
    background: var(--mag-page-bg);
    box-shadow: var(--mag-book-shadow), var(--mag-book-glow);
    transition:
        width var(--mag-chrome-ms) cubic-bezier(0.22, 1, 0.36, 1),
        min-width var(--mag-chrome-ms) cubic-bezier(0.22, 1, 0.36, 1),
        max-width var(--mag-chrome-ms) cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

.pdf-magazine-book-viewport.is-cover-slide-animated {
    transition:
        width var(--mag-flip-ms) cubic-bezier(0.42, 0.04, 0.2, 1),
        min-width var(--mag-flip-ms) cubic-bezier(0.42, 0.04, 0.2, 1),
        max-width var(--mag-flip-ms) cubic-bezier(0.42, 0.04, 0.2, 1),
        box-shadow var(--mag-flip-ms) ease;
}

.pdf-magazine-book.is-cover-slide-animated {
    transition: transform var(--mag-flip-ms) cubic-bezier(0.42, 0.04, 0.2, 1);
}

.pdf-magazine-book-viewport.is-layout-instant,
.pdf-magazine-book.is-layout-instant {
    transition: none !important;
}

.pdf-magazine.is-flipping .pdf-magazine-book-viewport,
.pdf-magazine.is-folding .pdf-magazine-book-viewport {
    overflow: visible;
}

.pdf-magazine.is-flipping .pdf-magazine-book-scaler,
.pdf-magazine.is-folding .pdf-magazine-book-scaler {
    overflow: visible;
}

.pdf-magazine.is-flipping .pdf-magazine-book-viewport,
.pdf-magazine.is-folding .pdf-magazine-book-viewport {
    --mag-book-shadow: 0 24px 52px rgba(0, 0, 0, 0.24), 0 8px 18px rgba(0, 0, 0, 0.12);
    --mag-book-glow: 0 0 44px color-mix(in srgb, var(--mag-accent) 28%, transparent);
}

.pdf-magazine-book,
.pdf-magazine-book.stf__parent {
    flex: none;
    margin: 0;
    will-change: transform;
    background: var(--mag-page-bg) !important;
}

.pdf-magazine-book .stf__block,
.pdf-magazine-book .stf__item,
.pdf-magazine-book .stf__outer,
.pdf-magazine-book .stf__inner,
.pdf-magazine-book .stf__hard,
.pdf-magazine-book .stf__wrapper {
    background: var(--mag-page-bg) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.pdf-magazine-book canvas,
.pdf-magazine-book img {
    background: var(--mag-page-bg) !important;
    image-rendering: auto;
}

.pdf-magazine-loading {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--surface-bg) 88%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pdf-mag-loading-progress {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}

.pdf-mag-hitzone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    width: min(22%, 9rem);
    padding: 0 0.85rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

.pdf-mag-hitzone--prev {
    left: 0;
    justify-content: flex-start;
}

.pdf-mag-hitzone--next {
    right: 0;
    justify-content: flex-end;
}

.pdf-mag-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-bg) 90%, transparent);
    border: 1px solid var(--border-color);
    color: var(--text-primary, #1a1a1a);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 0.55;
    transition:
        opacity var(--mag-chrome-ms) ease,
        background var(--mag-chrome-ms) ease,
        color var(--mag-chrome-ms) ease,
        transform 0.15s ease;
}

.pdf-mag-arrow svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: currentColor;
}

.pdf-mag-hitzone:hover .pdf-mag-arrow {
    opacity: 1;
    background: color-mix(in srgb, var(--mag-accent) 16%, var(--surface-bg));
    color: var(--text-primary, #1a1a1a);
    transform: scale(1.05);
}

.pdf-mag-hitzone:active .pdf-mag-arrow {
    transform: scale(0.97);
}

.pdf-magazine.is-flipping .pdf-mag-hitzone,
.pdf-magazine.is-folding .pdf-mag-hitzone {
    pointer-events: none;
}

.pdf-magazine.is-flipping .pdf-mag-arrow,
.pdf-magazine.is-folding .pdf-mag-arrow {
    opacity: 0.25;
}

.pdf-magazine-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: auto;
    padding: 0.85rem 0 0.15rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    transition: opacity var(--mag-chrome-ms) ease;
}

.pdf-magazine.is-flipping .pdf-magazine-toolbar,
.pdf-magazine.is-folding .pdf-magazine-toolbar {
    opacity: 0.35;
    pointer-events: none;
}

.pdf-mag-toolbar-nav,
.pdf-mag-toolbar-utilities {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.pdf-mag-toolbar-btn,
.pdf-mag-toolbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--mag-chrome-ms) ease, color var(--mag-chrome-ms) ease;
}

.pdf-mag-toolbar-btn svg,
.pdf-mag-toolbar-link svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.pdf-mag-toolbar-btn:hover,
.pdf-mag-toolbar-link:hover {
    background: color-mix(in srgb, var(--mag-accent) 14%, var(--surface-bg));
    color: var(--text-primary, inherit);
}

.pdf-mag-toolbar-divider {
    width: 1px;
    height: 1.25rem;
    margin: 0 0.15rem;
    background: var(--border-color);
}

.pdf-mag-zoom-label {
    min-width: 2.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
    user-select: none;
}

.pdf-mag-page-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0 0.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, inherit);
}

.pdf-mag-page-input {
    width: 2.5rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-bg);
    color: inherit;
    text-align: center;
    font: inherit;
    -moz-appearance: textfield;
}

.pdf-mag-page-input:focus {
    border-color: color-mix(in srgb, var(--mag-accent) 45%, var(--border-color));
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mag-accent) 12%, transparent);
}

.pdf-mag-page-input::-webkit-outer-spin-button,
.pdf-mag-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdf-mag-page-total {
    color: var(--text-muted);
    white-space: nowrap;
}

.pdf-magazine-cover {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.5rem;
}

.pdf-magazine-cover[hidden] {
    display: none !important;
}

.pdf-magazine-cover img {
    max-width: min(100%, 420px);
    max-height: 58%;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow:
        var(--mag-book-shadow),
        var(--mag-book-glow);
}

.pdf-magazine-open-btn {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pdf-magazine:fullscreen {
    max-height: none;
    height: 100vh;
    overflow: hidden;
    background: var(--mag-bg);
}

.pdf-magazine:fullscreen .pdf-magazine-body {
    max-height: none;
    height: 100vh;
}

.pdf-magazine:fullscreen .pdf-magazine-stage {
    padding: 0;
    background:
        radial-gradient(ellipse 120% 85% at 50% 112%, color-mix(in srgb, #000 62%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 50% 48%, color-mix(in srgb, var(--mag-accent) 4%, transparent) 0%, transparent 100%),
        var(--mag-bg);
}

.pdf-magazine:fullscreen .pdf-magazine-toolbar {
    color: #eceae6;
    padding-bottom: 0.85rem;
}

.pdf-magazine:fullscreen .pdf-mag-toolbar-nav,
.pdf-magazine:fullscreen .pdf-mag-toolbar-utilities {
    background: color-mix(in srgb, var(--mag-bg) 82%, transparent);
    border-color: color-mix(in srgb, var(--mag-accent) 18%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.pdf-magazine:fullscreen .pdf-mag-page-input {
    background: color-mix(in srgb, var(--mag-page-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--mag-accent) 22%, transparent);
    color: #eceae6;
}

.pdf-magazine:fullscreen .pdf-mag-page-total,
.pdf-magazine:fullscreen .pdf-mag-zoom-label {
    color: color-mix(in srgb, #eceae6 65%, transparent);
}

.pdf-magazine:fullscreen .pdf-mag-arrow {
    background: color-mix(in srgb, var(--mag-bg) 72%, transparent);
    border-color: color-mix(in srgb, var(--mag-accent) 22%, transparent);
    color: #eceae6;
}

.pdf-magazine:fullscreen .pdf-mag-hitzone:hover .pdf-mag-arrow {
    background: color-mix(in srgb, var(--mag-accent) 26%, var(--mag-bg));
    color: #fff;
}

@media (max-width: 768px) {
    .pdf-magazine-body {
        min-height: 360px;
    }

    .pdf-magazine-stage {
        padding-top: 0.75rem;
    }

    .pdf-magazine-toolbar {
        flex-wrap: wrap;
        gap: 0.45rem;
        padding-top: 0.65rem;
    }

    .pdf-mag-hitzone {
        width: 26%;
        padding: 0 0.5rem;
    }

    .pdf-mag-arrow {
        width: 2.4rem;
        height: 2.4rem;
        opacity: 0.8;
    }

    .pdf-mag-arrow svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (prefers-color-scheme: dark) {
    .pdf-magazine {
        --mag-book-shadow: 0 22px 48px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.28);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pdf-magazine-toolbar {
        color: color-mix(in srgb, var(--text-muted) 92%, #fff);
    }
}