:root {
--white: #fff;
    }
    .flipbook-viewport {
        position: fixed;
        inset: 0;
        overflow: hidden;
        background: #fcfcfc;
        touch-action: none;
        transition: background-color .25s ease;
    }
    .flipbook-viewport .container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        transform: none;
    }
    .flipbook-viewport .flipbook {
        position: absolute;
        margin: 0;
    }
    .flipbook > div { overflow: hidden; }
    .magazine-page {
        position: relative;
        overflow: hidden;
        background: var(--paper, #f5f5f5);
    }
    .magazine-page::before {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: var(--paper-accent, transparent);
        content: "";
        opacity: .5;
    }
    .magazine-page::after {
        position: absolute;
        z-index: 2;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        content: "";
        pointer-events: none;
        transition: background-color .25s ease;
    }
    .magazine-tile {
        position: absolute;
        z-index: 1;
        overflow: hidden;
        border: var(--frame-width, 0px) solid var(--frame, transparent);
        border-radius: var(--shape, 0);
        box-sizing: border-box;
        box-shadow: var(--tile-shadow, none);
        clip-path: var(--clip, inset(0));
        filter: var(--photo-filter, none);
    }
    .magazine-tile img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .28s ease;
    }
    .magazine-double-page__tile img { object-fit: contain; }
    .magazine-tile__link {
        display: block;
        width: 100%;
        height: 100%;
        cursor: zoom-in;
        touch-action: none;
    }
    .flipbook.is-over-page-corner .magazine-tile__link { cursor: grab; }
    .magazine-tile.is-ready img { opacity: 1; }
    .magazine-page--cover .magazine-tile {
        border-width: 0;
        box-shadow: none;
    }
    .magazine-page--cover .magazine-tile img {
        object-fit: contain;
    }
    .magazine-page__corner-hit-area {
        position: absolute;
        z-index: 4;
        width: 120px;
        height: 120px;
        pointer-events: none;
    }
    .magazine-page__corner-hit-area--top-left { top: 0; left: 0; }
    .magazine-page__corner-hit-area--bottom-left { bottom: 0; left: 0; }
    .magazine-page__corner-hit-area--top-right { top: 0; right: 0; }
    .magazine-page__corner-hit-area--bottom-right { right: 0; bottom: 0; }
    .magazine-page--inside-cover::before {
        opacity: .18;
    }
    .magazine-page__loader {
        position: absolute;
        z-index: 3;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 20%;
        box-sizing: border-box;
        background: linear-gradient(135deg, #f8f8f8, #ececec);
        color: #777;
        font: 13px/1.4 sans-serif;
        pointer-events: none;
        opacity: 1;
        transition: opacity .28s ease, visibility .28s ease;
    }
    .magazine-page.is-ready .magazine-page__loader {
        visibility: hidden;
        opacity: 0;
    }
    .magazine-page__progress {
        position: relative;
        width: 100%;
        max-width: 150px;
        height: 3px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(0, 0, 0, .08);
    }
    .magazine-page__progress::after {
        position: absolute;
        top: 0;
        left: -40%;
        width: 40%;
        height: 100%;
        border-radius: inherit;
        background: var(--theme-color);
        content: "";
        animation: magazine-progress 1.15s ease-in-out infinite;
    }
    .magazine-page.is-error .magazine-page__loader { color: #a15a5a; }
    .magazine-page.is-error .magazine-page__progress::after {
        left: 0;
        width: 100%;
        background: #c97b7b;
        animation: none;
    }
    @keyframes magazine-progress {
        0% { transform: translateX(0); }
        100% { transform: translateX(350%); }
    }
    .magazine-menu {
        position: fixed;
        z-index: 1001;
    }
    .magazine-theme-toggle {
        position: fixed;
        z-index: 100100;
        bottom: max(18px, env(safe-area-inset-bottom));
        left: 50%;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 20px;
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
        color: #383838;
        cursor: pointer;
        font: 13px/1 sans-serif;
        transform: translateX(-50%);
        transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    }
    .magazine-theme-toggle:hover { background: #fff; }
    .magazine-theme-toggle__icon { font-size: 16px; line-height: 1; }
    .magazine-reader-controls {
        position: fixed;
        z-index: 100100;
        bottom: max(18px, env(safe-area-inset-bottom));
        left: 50%;
        display: inline-flex;
        gap: 10px;
        transform: translateX(-50%);
        transition: opacity .2s ease, visibility .2s ease;
    }
    .magazine-reader-controls.is-hidden { visibility: hidden; opacity: 0; }
    .magazine-reader-controls .magazine-theme-toggle {
        position: static;
        transform: none;
    }
    .magazine-layout-options {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        box-sizing: border-box;
        margin: 0;
        padding: 0 12px;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 20px;
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
        color: #383838;
        font: 13px/1 sans-serif;
    }
    .magazine-layout-options__label { display: none; }
    .magazine-layout-options label {
        display: inline-flex;
        align-items: center;
        height: 100%;
        gap: 4px;
        cursor: pointer;
        white-space: nowrap;
    }
    .magazine-layout-options input { margin: 0; accent-color: var(--theme-color); }
    .magazine-page-navigator {
        position: fixed;
        z-index: 100099;
        bottom: calc(max(18px, env(safe-area-inset-bottom)) + 42px);
        left: 50%;
        width: var(--magazine-book-width, min(922px, calc(100vw - 32px)));
        max-width: calc(100vw - 32px);
        height: 38px;
        transform: translateX(-50%);
    }
    .magazine-page-navigator__panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        padding: 9px 12px 7px;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 14px;
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
        visibility: hidden;
        pointer-events: none;
    }
    .magazine-page-navigator.is-visible .magazine-page-navigator__panel {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
    .magazine-page-navigator__value {
        position: absolute;
        bottom: 20px;
        padding: 3px 7px;
        border-radius: 10px;
        background: #383838;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        color: #fff;
        font: 12px/1 sans-serif;
        pointer-events: none;
        transform: translateX(-50%);
    }
    .magazine-page-navigator__range {
        display: block;
        width: 100%;
        height: 2px;
        margin: 0;
        padding: 0;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 999px;
        background: linear-gradient(to right, var(--theme-color) 0 var(--page-progress, 0%), rgba(56, 56, 56, .18) var(--page-progress, 0%) 100%);
        cursor: pointer;
    }
    .magazine-page-navigator__range::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        appearance: none;
        -webkit-appearance: none;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--theme-color);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    }
    .magazine-page-navigator__range::-moz-range-track {
        height: 2px;
        border-radius: 999px;
        background: transparent;
    }
    .magazine-page-navigator__range::-moz-range-thumb {
        width: 8px;
        height: 8px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--theme-color);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    }
    .magazine-page-navigator.is-hidden .magazine-page-navigator__panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .magazine-reader-thumbnail-navigation-wrap {
        position: fixed;
        z-index: 100101;
        top: 0;
        left: 50%;
        width: var(--magazine-book-width, min(922px, calc(100vw - 32px)));
        max-width: calc(100vw - 32px);
        height: 72px;
        padding-top: max(8px, env(safe-area-inset-top));
        box-sizing: border-box;
        transform: translateX(-50%);
    }
    .magazine-reader-thumbnail-navigation {
        display: flex;
        height: 58px;
        gap: 6px;
        padding: 7px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 8px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
        opacity: 0;
        transform: translateY(-60px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
        visibility: hidden;
    }
    .magazine-reader-thumbnail-navigation-wrap:hover .magazine-reader-thumbnail-navigation,
    .magazine-reader-thumbnail-navigation:focus-within {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
    .magazine-reader-thumbnail-navigation.is-hidden {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .magazine-reader-thumbnail-navigation__item {
        flex: 0 0 64px;
        height: 42px;
        padding: 0;
        overflow: hidden;
        border: 2px solid transparent;
        border-radius: 3px;
        background: #d9dce0;
        cursor: pointer;
        transition: border-color .16s ease, opacity .16s ease, transform .16s ease;
    }
    .magazine-reader-thumbnail-navigation__item:hover { transform: translateY(-1px); }
    .magazine-reader-thumbnail-navigation__item.is-active {
        border-color: var(--theme-color);
        opacity: 1;
    }
    .magazine-reader-thumbnail-navigation__item:not(.is-active) { opacity: .68; }
    .magazine-reader-thumbnail-navigation__item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .magazine-reader-thumbnail-navigation__viewport {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .magazine-reader-thumbnail-navigation__viewport::-webkit-scrollbar { display: none; }
    .magazine-reader-thumbnail-navigation__track {
        display: flex;
        width: max-content;
        gap: 7px;
    }
    .magazine-reader-thumbnail-navigation__arrow {
        flex: 0 0 26px;
        width: 26px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: rgba(56, 56, 56, .1);
        color: #383838;
        cursor: pointer;
        font: 25px/1 sans-serif;
    }
    .magazine-reader-thumbnail-navigation__arrow:hover { background: rgba(56, 56, 56, .2); }
    .magazine-reader-thumbnail-navigation__arrow:disabled { cursor: default; opacity: .3; }
    .fancybox-active .magazine-reader-controls,
    .fancybox-active .magazine-page-navigator { pointer-events: none; }
    .magazine-return-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 20px;
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
        color: #383838;
        cursor: pointer;
        font: 13px/1 sans-serif;
    }
    .night .flipbook-viewport { background: #171a1f; }
    .night .flipbook .page,
    .night .flipbook-viewport .shadow { box-shadow: none; }
    .night .magazine-page::after { background: rgba(0, 0, 0, .26); }
    .night .magazine-page__loader {
        background: linear-gradient(135deg, #262c34, #191d23);
        color: #c5ccd5;
    }
    .night .magazine-page__progress { background: rgba(255, 255, 255, .14); }
    .night .magazine-theme-toggle {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(37, 42, 50, .9);
        color: #edf2f7;
    }
    .night .magazine-theme-toggle:hover { background: #303741; }
    .night .magazine-return-button {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(37, 42, 50, .9);
        color: #edf2f7;
    }
    .night .magazine-layout-options {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(37, 42, 50, .9);
        color: #edf2f7;
    }
    .night .magazine-layout-options__label { color: #b8c2cc; }
    .night .magazine-page-navigator__panel {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(37, 42, 50, .92);
    }
    .night .magazine-page-navigator__range {
        background: linear-gradient(to right, var(--theme-color) 0 var(--page-progress, 0%), rgba(255, 255, 255, .22) var(--page-progress, 0%) 100%);
    }
    .night .magazine-reader-thumbnail-navigation {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(37, 42, 50, .92);
    }
    .night .magazine-reader-thumbnail-navigation__arrow { background: rgba(255, 255, 255, .12); color: #edf2f7; }
    .night .magazine-reader-thumbnail-navigation__arrow:hover { background: rgba(255, 255, 255, .22); }
    .magazine-empty-state {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
        color: #777;
        font: 15px/1.5 sans-serif;
        text-align: center;
    }
    .night .magazine-empty-state { color: #c5ccd5; }
    .magazine-shelf {
        min-height: 100vh;
        padding: 56px max(24px, calc((100% - 800px) / 2)) 80px;
        box-sizing: border-box;
        /* background: linear-gradient(145deg, #f7f4ed, #e8edf2); */
        color: #28313b;
    }
    body.magazine-shelf-active { overflow-y: auto; }
    .magazine-shelf__header { margin-bottom: 36px; }
    .magazine-shelf__title {
        margin: 0 0 20px;
        font: 700 clamp(28px, 4vw, 42px)/1.2 Georgia, "Times New Roman", serif;
        letter-spacing: .04em;
    }
    .magazine-shelf__filters {
        display: inline-flex;
        padding: 4px;
        border: 1px solid rgba(40, 49, 59, .1);
        /* border-radius: 999px; */
        background: rgba(255, 255, 255, .72);
        /* box-shadow: 0 6px 20px rgba(44, 57, 71, .08); */
    }
    .magazine-shelf__filter {
        padding: 9px 18px;
        border: 0;
        border-radius: inherit;
        background: transparent;
        color: #65707b;
        cursor: pointer;
        font: 14px/1 sans-serif;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .magazine-shelf__filter.is-active {
        background: var(--theme-color);
        box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
        color: #fff;
    }
    .magazine-shelf__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 50px 60px;
        /* max-width: 590px; */
        margin: 0 auto;
        padding: 0 40px;
    }
    .magazine-shelf__grid[hidden],
    .magazine-shelf__empty[hidden] { display: none; }
    .magazine-shelf__book {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
    }
    .magazine-shelf__book[hidden] { display: none !important; }
    .magazine-shelf__book.is-shelf-revealing {
        animation: magazine-shelf-reveal .32s ease both;
    }
    @keyframes magazine-shelf-reveal {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .magazine-shelf__cover {
        position: relative;
        display: block;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        /* border-radius: 3px 8px 8px 3px; */
        /* background: #d8dde2; */
                        box-shadow: 1px 1px 0 rgba(21, 34, 43, .13), 5px 5px 0 rgba(21, 34, 43, .08), 5px 5px 0 rgba(21, 34, 43, .04);
                   border-radius: 1px;
     border:1px solid rgba(21, 34, 43, .05);
        transform: perspective(850px) rotateY(-3deg);
        transition: box-shadow .25s ease, transform .25s ease;
    }
    .magazine-shelf__cover::after {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: inherit;
        content: "";
        pointer-events: none;
    }
    .magazine-shelf__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .magazine-shelf__name {
        display: block;
        overflow: hidden;
        margin-top: 15px;
        color: #616161 !important;
    
        font: 500 13px/1.35 'Source Han Serif CN VF', sans-serif;
        text-overflow: ellipsis;
        white-space: nowrap;
       
        font-size: 13px;
    
    }
    .magazine-shelf__book:hover .magazine-shelf__cover,
    .magazine-shelf__book:focus-visible .magazine-shelf__cover {
        box-shadow: 1px 1px 0 rgba(21, 34, 43, .13), 5px 5px 0 rgba(21, 34, 43, .08), 5px 5px 0 rgba(21, 34, 43, .04);
        transform: perspective(850px) translateY(-6px) rotateY(-7deg);
    }
    .magazine-shelf__empty {
        display: grid;
        min-height: 230px;
        place-items: center;
        border: 1px dashed rgba(40, 49, 59, .2);
        border-radius: 12px;
        color: #73808c;
        font: 15px/1.5 sans-serif;
    }
    .magazine-shelf__load { margin-top: 24px; }
    .magazine-shelf__load[hidden] { display: none; }
    .night .magazine-shelf { background: linear-gradient(145deg, #1d232b, #15191f); color: #e6ebf0; }
    .night .magazine-shelf__filters { border-color: rgba(255, 255, 255, .12); background: rgba(32, 39, 48, .8); }
    .night .magazine-shelf__filter { color: #b8c2cc; }
    .night .magazine-shelf__name { color: #e6ebf0; }
    .night .magazine-shelf__empty { border-color: rgba(255, 255, 255, .18); color: #aab5c0; }
    .magazine-shelf.is-transitioning { opacity: 0; transition: opacity .42s cubic-bezier(.22, .61, .36, 1); }
    .magazine-reader { opacity: 1; }
    .magazine-reader.is-transitioning { opacity: 0; }
    .magazine-book-transition {
        position: fixed;
        z-index: 1100;
        overflow: hidden;
        border-radius: 3px 8px 8px 3px;
        box-shadow: none;
        opacity: 1;
        pointer-events: none;
        transform-origin: top left;
        will-change: transform, opacity;
        transition: transform .82s cubic-bezier(.16, 1, .3, 1);
    }
    .magazine-book-transition img { display: block; width: 100%; height: 100%; object-fit: cover; }
    @media (prefers-reduced-motion: reduce) {
        .magazine-shelf,
        .magazine-reader,
        .magazine-book-transition { transition-duration: .01ms; }
    }
    @media screen and (max-width: 600px) {
        .magazine-shelf { padding: 36px 30px 56px; }
        .magazine-shelf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; max-width: none; padding: 0; }
        .magazine-reader-thumbnail-navigation-wrap {
            top: auto;
            bottom: calc(max(18px, env(safe-area-inset-bottom)) + 44px);
            height: 52px;
            padding-top: 0;
        }
        .magazine-reader-thumbnail-navigation {
            visibility: visible;
            opacity: 1;
            transform: none;
        }
        .magazine-page-navigator {
            top: max(8px, env(safe-area-inset-top));
            bottom: auto;
        }
    }
    @media screen and (max-width: 480px) {
        .magazine-reader-thumbnail-navigation-wrap { width: calc(100vw - 20px); }
        .magazine-reader-thumbnail-navigation {
            width: calc(100vw - 20px);
            height: 52px;
            gap: 5px;
            padding: 5px;
        }
        .magazine-reader-thumbnail-navigation__item { flex-basis: 56px; height: 38px; }
        .magazine-reader-thumbnail-navigation__arrow { flex-basis: 22px; width: 22px; height: 38px; }
    }

    .magazine-page-main .magazine-shelf {
        min-height: 0;
        padding: 40px 60px 64px;
    }
    .magazine-page-main .magazine-shelf__filters {
        margin-bottom: 36px;
    }
    .magazine-reader {
        position: fixed;
        z-index: 100200;
        inset: 0;
    }
    .menu.active.magazine-context-menu { z-index: 100201; }
    .fancybox-container { z-index: 100300; }
    body.fancybox-active:has(.magazine-reader:not([hidden])) .fancybox-navigation .fancybox-button {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    @media screen and (max-width: 600px) {
        .magazine-page-main .magazine-shelf { padding: 28px 30px; }
    }