html:has(.com-flipbook--embedded), body:has(.com-flipbook--embedded) { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.com-flipbook { position: relative; max-width: 1500px; margin-inline: auto; padding: 1rem; overflow: clip; contain: layout paint; }
.com-flipbook__status { margin-block: 1rem; padding: 1rem; border: 1px solid currentColor; border-radius: .4rem; }
.com-flipbook__book-list { display: grid; gap: .5rem; }
.com-flipbook__viewer { position: relative; isolation: isolate; contain: layout paint; overflow: hidden; border: 1px solid rgb(0 0 0 / .2); border-radius: .65rem; background: #20262d; box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / .2); }
.com-flipbook__loading { min-height: 65vh; display: grid; place-content: center; gap: .75rem; color: #fff; text-align: center; }
.com-flipbook__spinner { width: 2rem; height: 2rem; margin-inline: auto; border: .25rem solid rgb(255 255 255 / .25); border-top-color: #fff; border-radius: 50%; animation: flipbook-spin .8s linear infinite; }
@keyframes flipbook-spin { to { transform: rotate(360deg); } }
.com-flipbook__shell { width: 100%; height: clamp(600px, 78vh, 1050px); min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.com-flipbook__toolbar { isolation: isolate; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .3rem; padding: .35rem .45rem; overflow-x: auto; overflow-y: hidden; white-space: nowrap; color: #fff; background: #11151a; border-bottom: 1px solid rgb(255 255 255 / .12); position: relative; z-index: 1000; }
.com-flipbook__toolbar-group { display: flex; align-items: center; gap: .3rem; }
.com-flipbook__tool { flex: 0 0 auto; min-width: 2.25rem; min-height: 2.25rem; padding: .25rem .45rem; border: 1px solid rgb(255 255 255 / .25); border-radius: .35rem; color: #fff; background: #252d35; cursor: pointer; }
.com-flipbook__tool:hover:not(:disabled), .com-flipbook__tool:focus-visible { background: #394653; }
.com-flipbook__tool:disabled { opacity: .4; cursor: not-allowed; }
.com-flipbook__page-control { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; color: #fff; }
.com-flipbook__page-control input { width: 3.75rem; min-height: 2.25rem; padding: .25rem; text-align: center; }
.com-flipbook__zoom { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.com-flipbook__viewport { position: relative; z-index: 0; width: 100%; min-width: 0; min-height: 0; overflow: hidden; overscroll-behavior: contain; background: var(--flipbook-viewport-background, radial-gradient(circle at 50% 42%, #f5f6f7 0%, #eceff1 48%, #dde1e4 100%)); contain: layout paint; }
.com-flipbook__stage { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.com-flipbook__scale { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.com-flipbook__scale[hidden] { display: none !important; }
.com-flipbook__book { width: 100%; height: auto; min-width: 0; min-height: 0; max-width: 100%; display: block; margin: auto; image-rendering: auto; backface-visibility: hidden; }
.com-flipbook__book canvas { max-width: 100%; max-height: 100%; }
.com-flipbook__detail { position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: stretch; justify-content: center; overflow: hidden; backface-visibility: hidden; }
.com-flipbook__detail[hidden] { display: none !important; }
.com-flipbook__detail img { display: block; width: 100%; height: 100%; min-width: 0; max-width: none !important; max-height: none !important; flex: 1 1 0; object-fit: fill; image-rendering: auto; user-select: none; pointer-events: none; }
/* v1.3.2: keep the resting two-page gutter visually consistent with
   the shadow rendered by StPageFlip during a page turn. */
.com-flipbook__detail.is-spread img:first-child { box-shadow: none; }
.com-flipbook__detail.is-spread::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    z-index: 2;
    width: clamp(24px, 3%, 64px);
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(90deg,
        rgb(0 0 0 / 0) 0%,
        rgb(0 0 0 / .06) 22%,
        rgb(0 0 0 / .18) 43%,
        rgb(0 0 0 / .34) 49%,
        rgb(0 0 0 / .42) 50%,
        rgb(0 0 0 / .34) 51%,
        rgb(0 0 0 / .18) 57%,
        rgb(0 0 0 / .06) 78%,
        rgb(0 0 0 / 0) 100%);
}
.com-flipbook__pan-layer { position: absolute; inset: 0; z-index: 40; display: none; pointer-events: none; touch-action: none; }
.com-flipbook__pan-layer.is-active { display: block; cursor: grab; }
.com-flipbook__viewport.is-pannable { cursor: grab; touch-action: none; }
.com-flipbook__viewport.is-dragging, .com-flipbook__viewport.is-dragging .com-flipbook__pan-layer { cursor: grabbing; }
.com-flipbook__viewport.is-pannable { user-select: none; }
.com-flipbook__viewer.is-fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.com-flipbook__viewer.is-fullscreen .com-flipbook__shell { height: 100%; min-height: 0; }
.com-flipbook__viewer.is-fullscreen .com-flipbook__viewport { min-height: 0; }
.com-flipbook--embedded { width: 100%; height: 100vh; max-width: none; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.com-flipbook--embedded .com-flipbook__viewer { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.com-flipbook--embedded .com-flipbook__loading { min-height: 100vh; }
.com-flipbook--embedded .com-flipbook__shell { height: 100%; min-height: 0; }
.com-flipbook--embedded .com-flipbook__viewport { width: 100%; min-height: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 575.98px) {
    .com-flipbook { padding: .25rem; }
    /* v1.2.4: Start an overflowing mobile toolbar at its true left edge so
       Previous/First remain fully reachable. Keep Fit visible on mobile. */
    .com-flipbook__toolbar {
        justify-content: flex-start !important;
        gap: .2rem !important;
        padding: .3rem .35rem !important;
        scroll-padding-inline: .35rem;
        -webkit-overflow-scrolling: touch;
    }
    .com-flipbook__toolbar-group { gap: .2rem !important; }
    .com-flipbook__tool { min-width: 2.25rem; min-height: 2.25rem; padding-inline: .4rem; }
    .com-flipbook__tool--text { display: inline-flex !important; align-items: center; justify-content: center; }
    .com-flipbook__shell { height: 72vh; min-height: 460px; }
    .com-flipbook--embedded .com-flipbook__shell,
    .com-flipbook__viewer.is-fullscreen .com-flipbook__shell { height: 100%; min-height: 0; }
}

.com-flipbook__detail.is-turning-next { transform-origin: left center; animation: flipbook-detail-next 650ms ease-in-out both; }
.com-flipbook__detail.is-turning-previous { transform-origin: right center; animation: flipbook-detail-previous 650ms ease-in-out both; }
@keyframes flipbook-detail-next {
    0% { transform: perspective(1400px) rotateY(0deg); opacity: 1; }
    55% { transform: perspective(1400px) rotateY(-82deg); opacity: .72; }
    100% { transform: perspective(1400px) rotateY(-96deg); opacity: 0; }
}
@keyframes flipbook-detail-previous {
    0% { transform: perspective(1400px) rotateY(0deg); opacity: 1; }
    55% { transform: perspective(1400px) rotateY(82deg); opacity: .72; }
    100% { transform: perspective(1400px) rotateY(96deg); opacity: 0; }
}


/* 0.5.54: reserve toolbar space physically and capture zoom input on the viewport. */
.com-flipbook__shell {
    --flipbook-toolbar-height: 48px;
    position: relative;
    display: block !important;
    isolation: isolate;
    overflow: hidden !important;
}
.com-flipbook__toolbar {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: var(--flipbook-toolbar-height);
    box-sizing: border-box;
    z-index: 10 !important;
    transform: none !important;
}
.com-flipbook__viewport {
    position: absolute !important;
    inset: var(--flipbook-toolbar-height) 0 0 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: strict !important;
    isolation: isolate;
}
.com-flipbook__stage,
.com-flipbook__scale { z-index: 1; }
.com-flipbook__pan-layer {
    display: none !important;
    pointer-events: none !important;
}
.com-flipbook__viewport.is-pannable {
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.com-flipbook__viewport.is-dragging { cursor: grabbing !important; }


/* 0.5.54: true two-row layout and active pan input surface. */
.com-flipbook__shell {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.com-flipbook__toolbar {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    z-index: 2147483647 !important;
    background: #fff !important;
    opacity: 1 !important;
    isolation: isolate !important;
    pointer-events: auto !important;
    transform: translateZ(1px) !important;
}
.com-flipbook__viewport {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 1 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: layout paint !important;
    isolation: isolate !important;
}
.com-flipbook__pan-layer {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 2147483646 !important;
    background: transparent !important;
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.com-flipbook__pan-layer.is-active {
    pointer-events: auto !important;
    cursor: grab !important;
}
.com-flipbook__viewport.is-dragging .com-flipbook__pan-layer {
    cursor: grabbing !important;
}


/* 0.5.54: zoom uses a dedicated static spread confined to the viewport. */
.com-flipbook__toolbar {
    background: #11151a !important;
    color: #fff !important;
    transform: none !important;
}
.com-flipbook__viewport {
    overflow: clip !important;
    contain: paint layout !important;
}
.com-flipbook__stage {
    overflow: clip !important;
    contain: paint layout !important;
}
.com-flipbook__detail {
    left: 50% !important;
    top: 50% !important;
    z-index: 2 !important;
    overflow: hidden !important;
    will-change: transform;
}
.com-flipbook__pan-layer {
    z-index: 3 !important;
}

/* 0.5.54: correctly center and clip the dedicated zoom layer. */
.com-flipbook__shell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}
.com-flipbook__toolbar {
    position: relative !important;
    grid-row: 1 !important;
    z-index: 100 !important;
    transform: none !important;
    background: #11151a !important;
}
.com-flipbook__viewport {
    position: relative !important;
    grid-row: 2 !important;
    z-index: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: layout paint !important;
}
.com-flipbook__stage {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: layout paint !important;
}
.com-flipbook__detail {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    will-change: transform;
}

/* 0.5.54: definitive zoom/pan layout. */
.com-flipbook__shell {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.com-flipbook__toolbar {
    position: relative !important;
    grid-row: 1 !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #11151a !important;
    color: #fff !important;
    opacity: 1 !important;
    transform: none !important;
    isolation: isolate !important;
    pointer-events: auto !important;
}
.com-flipbook__viewport {
    position: relative !important;
    grid-row: 2 !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: layout paint !important;
    isolation: isolate !important;
}
.com-flipbook__stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
    contain: layout paint !important;
}
.com-flipbook__detail {
    position: absolute !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
    will-change: left, top, width, height;
}
.com-flipbook__detail[hidden] { display: none !important; }
.com-flipbook__detail img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    flex: 1 1 0 !important;
    object-fit: fill !important;
    user-select: none !important;
    pointer-events: none !important;
}
.com-flipbook__pan-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    background: transparent !important;
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.com-flipbook__pan-layer.is-active {
    pointer-events: auto !important;
    cursor: grab !important;
}
.com-flipbook__viewport.is-dragging .com-flipbook__pan-layer {
    cursor: grabbing !important;
}


/* 0.5.54: keep the zoom percentage readable in fullscreen and dark toolbars. */
.com-flipbook__zoom,
.com-flipbook__viewer.is-fullscreen .com-flipbook__zoom,
:fullscreen .com-flipbook__zoom {
    color: #fff !important;
    background: transparent !important;
    opacity: 1 !important;
}


/* 0.5.54: zoom value is always visible, including narrow and fullscreen layouts. */
.com-flipbook__zoom,
.com-flipbook__viewer.is-fullscreen .com-flipbook__zoom,
:fullscreen .com-flipbook__zoom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 3.5rem !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #11151a !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.com-flipbook__viewport,
.com-flipbook__pan-layer.is-active {
    touch-action: none !important;
}

/* 0.5.54: make the zoom value unmistakably visible in every toolbar state. */
.com-flipbook__toolbar .com-flipbook__zoom,
.com-flipbook__viewer.is-fullscreen .com-flipbook__toolbar .com-flipbook__zoom,
:fullscreen .com-flipbook__toolbar .com-flipbook__zoom {
    display: inline-flex !important;
    flex: 0 0 4.25rem !important;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    min-height: 2.25rem !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    background: #fff !important;
    border: 1px solid rgb(255 255 255 / .65) !important;
    border-radius: .35rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* StPageFlip can still render its DOM shadow layers during a turn even when
   drawShadow is disabled. Keep animation and resting-page appearance consistent. */
.com-flipbook .stf__outerShadow,
.com-flipbook .stf__innerShadow,
.com-flipbook .stf__hardShadow,
.com-flipbook .stf__hardInnerShadow {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
}


/* 1.1.5: optional catalog PDF download control. */
.com-flipbook__tool--download {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .25rem !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.com-flipbook__tool--download:hover,
.com-flipbook__tool--download:focus { text-decoration: none !important; }
.com-flipbook__download-label { font-size: .78rem; font-weight: 700; }
@media (max-width: 575.98px) {
    .com-flipbook__download-label { display: none; }
}

/* 1.1.5: direct component fullscreen must not depend on the JS class timing.
   Apply the same full-viewport, toolbar-first layout through the browser's
   native fullscreen pseudo-class as soon as fullscreen begins. */
.com-flipbook__viewer:fullscreen,
.com-flipbook__viewer.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #20262d !important;
}
.com-flipbook__viewer:fullscreen .com-flipbook__shell,
.com-flipbook__viewer.is-fullscreen .com-flipbook__shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}
.com-flipbook__viewer:fullscreen .com-flipbook__toolbar,
.com-flipbook__viewer.is-fullscreen .com-flipbook__toolbar {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    margin: 0 !important;
}
.com-flipbook__viewer:fullscreen .com-flipbook__viewport,
.com-flipbook__viewer.is-fullscreen .com-flipbook__viewport {
    position: relative !important;
    inset: auto !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}


/* 1.2.4: responsive toolbar without clipped or off-screen controls.
   Remove dependence on horizontal scrolling on phones; wrap compact control
   groups while retaining the single-row desktop toolbar. */
.com-flipbook__toolbar {
    justify-content: safe center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
.com-flipbook__toolbar-group,
.com-flipbook__page-control {
    flex: 0 0 auto !important;
}
@media (max-width: 575.98px) {
    .com-flipbook__toolbar {
        display: flex !important;
        flex-flow: row wrap !important;
        justify-content: center !important;
        align-content: center !important;
        gap: .2rem !important;
        padding: .3rem !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    .com-flipbook__toolbar-group {
        display: inline-flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: .2rem !important;
    }
    .com-flipbook__page-control {
        display: inline-flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: .2rem !important;
    }
    .com-flipbook__tool {
        min-width: 2.15rem !important;
        min-height: 2.15rem !important;
        padding-inline: .35rem !important;
    }
    .com-flipbook__toolbar .com-flipbook__zoom,
    .com-flipbook__toolbar [data-flipbook-build] {
        display: none !important;
    }
    .com-flipbook__tool--text {
        display: inline-flex !important;
    }
    .com-flipbook__tool--download {
        display: inline-flex !important;
    }
}


/* 1.2.4: explicit toolbar rows. */
.com-flipbook__toolbar-row { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.com-flipbook__toolbar [data-flipbook-build] { color:#000; background:#fff; padding:.1rem .25rem; border-radius:3px; font-size:10px; }
@media (max-width: 575.98px) {
  .com-flipbook__toolbar { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; justify-content:center !important; align-items:center !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding:.25rem !important; gap:.25rem !important; }
  .com-flipbook__toolbar-row { width:100%; justify-content:center; gap:.2rem !important; }
  .com-flipbook__toolbar-row--pages { order:1; }
  .com-flipbook__toolbar-row--view { order:2; }
  .com-flipbook__viewport { inset:auto !important; }
  .com-flipbook__tool { min-width:2.05rem !important; min-height:2rem !important; padding:.2rem .3rem !important; }
  .com-flipbook__page-control input { width:3.25rem !important; min-height:2rem !important; }
  .com-flipbook__toolbar .com-flipbook__zoom { display:inline-block !important; min-width:3rem !important; padding:.1rem .2rem !important; }
  .com-flipbook__toolbar [data-flipbook-build] { display:none !important; }
  .com-flipbook__tool--download, .com-flipbook__tool--text { display:inline-flex !important; align-items:center; justify-content:center; }
}


/* 1.4.0: give the book viewport a light neutral presentation surface by default.
   A validated manifest `background` hex color overrides this custom property. */
.com-flipbook__viewer {
    --flipbook-viewport-background: radial-gradient(circle at 50% 42%, #f5f6f7 0%, #eceff1 48%, #dde1e4 100%);
}
.com-flipbook__viewport {
    background: var(--flipbook-viewport-background) !important;
}