@import url("../pageflip/page-flip.css");
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
.st-book-body { background: #f8f0e3; color: #43505b; font: 14px/1.4 system-ui, sans-serif; }
.st-book-reader { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.st-book-header { display: flex; align-items: center; gap: 20px; padding: 10px 18px; min-width: 0; flex: 0 0 auto; }
.st-book-header span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.st-book-back { white-space: nowrap; color: inherit; text-decoration: none; }
.st-book-stage { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; padding: 15px 24px; display: grid; place-items: center; touch-action: none; overscroll-behavior: contain; }
.st-book-pages { display: flex; position: relative; margin: auto; flex: none; transform-style: preserve-3d; }
.st-book-leaf { position: absolute; top: 0; display: grid; place-items: center; box-shadow: 0 3px 12px #32291718; background: white; flex: none; transform-style: preserve-3d; backface-visibility: hidden; }
.st-book-leaf canvas { display: block; }
.st-book-flip-scene { position: absolute; z-index: 10; perspective: 8000px; pointer-events: none; transform-style: preserve-3d; }
.st-book-paper { position: absolute; top: 0; transform-style: preserve-3d; will-change: transform; }
.st-book-paper > .st-book-leaf { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 5px #21190c22; }
.st-book-paper > .st-book-paper-back { transform: rotateY(180deg); }
.st-book-paper .st-book-leaf canvas { max-width: 100%; max-height: 100%; }
.st-book-stationary { position: absolute; top: 0; }
.st-book-empty-half { background: #f8f0e3; }
.st-book-paper > .st-book-leaf { left: 0 !important; }
.st-book-mobile-paper { transform-style: preserve-3d; position: absolute; inset: 0; z-index: 10; will-change: transform; pointer-events: none; }
.st-book-mobile-paper > .st-book-pages { margin: 0; }
.st-book-pages.st-book-spread .st-book-leaf:first-child::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 20px; pointer-events: none; background: linear-gradient(90deg, transparent, #21190c1c); }
.st-book-pages.st-book-spread .st-book-leaf:last-child::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 20px; pointer-events: none; background: linear-gradient(90deg, #21190c16, transparent); }
.st-book-status { text-align: center; padding: 0; margin: 0; height: 0; overflow: hidden; flex: 0 0 auto; }
.st-book-status.st-book-error { height: auto; padding: 5px 12px; color: #a52020; }
.st-book-toolbar { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; align-self: center; gap: 2px; margin: 12px 8px 18px; padding: 4px; flex: 0 0 auto; border: 1px solid #ded6cb; border-radius: 9px; background: #fffc; box-shadow: 0 2px 8px #3d302015; }
.st-book-toolbar button, .st-book-toolbar a { appearance: none; display: inline-flex; align-items: center; justify-content: center; font: inherit; color: #465563; background: transparent; border: 0; border-radius: 5px; width: 34px; height: 34px; padding: 0; cursor: pointer; text-decoration: none; }
.st-book-toolbar button:hover:not(:disabled), .st-book-toolbar a:hover { background: #eae4da; color: #253343; }
.st-book-toolbar button:disabled { opacity: .4; cursor: default; }
.st-book-toolbar label { display: flex; align-items: center; gap: 2px; white-space: nowrap; padding: 0 6px 0 2px; height: 30px; background: #eee9e1; border-radius: 4px; font-size: 12px; }
.st-book-page { appearance: textfield; width: 32px; height: 30px; padding: 0; text-align: center; border: 0; background: transparent; color: inherit; font: inherit; }
.st-book-page::-webkit-inner-spin-button, .st-book-page::-webkit-outer-spin-button { appearance: none; margin: 0; }
.st-book-divider { height: 18px; width: 1px; background: #ded6cb; margin: 0 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, .st-book-stage:focus-visible { outline: 2px solid #955521; outline-offset: 2px; }
.st-book-reader:fullscreen { width: 100%; height: 100%; background: #f8f0e3; }
.st-book-reader.st-book-expanded { position: fixed; inset: 0; z-index: 2147483646; background: #f8f0e3; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) { .st-book-header { padding: 8px 10px; gap: 12px; } .st-book-stage { padding: 8px; } .st-book-toolbar { margin: 8px 4px 12px; gap: 0; padding: 2px; } .st-book-toolbar button, .st-book-toolbar a { width: 32px; height: 42px; } .st-book-divider { margin: 0 2px; } }
@media (prefers-reduced-motion: reduce) { .st-book-leaf { animation: none !important; } }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
    .st-book-reader { height: 100vh; height: 100svh; }
    .st-book-stage { overflow: hidden; }
    .st-book-stage.st-book-zoomed { overflow: auto; }
    .st-book-pages { perspective: 8000px; transform-style: preserve-3d; }
    .st-book-leaf { transform-style: preserve-3d; }
    .st-book-mobile-paper .st-book-leaf { box-shadow: none; }
}

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
 .st-book-mobile-paper > .st-book-leaf { left: 0 !important; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: none; }
 .st-book-mobile-back { transform: rotateY(180deg); }
}

.st-book-curl-host { position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.st-book-curl-page { background: white; overflow: hidden; }
.st-book-curl-page img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Keep the soft-page reader on a phone when its width exceeds 700px. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
 .st-book-reader { display: grid; grid-template-columns: minmax(0,1fr) 64px; grid-template-rows: 26px minmax(0,1fr); }
 .st-book-header { grid-column: 1 / -1; padding: 3px 8px; gap: 10px; }
 .st-book-stage { grid-column: 1; grid-row: 2; width: 100%; height: 100%; padding: 3px 6px; }
 .st-book-toolbar { grid-column: 2; grid-row: 2; flex-direction: column; align-self: center; justify-self: center; gap: 0; margin: 2px; padding: 2px; }
 .st-book-toolbar button, .st-book-toolbar a { width: 32px; height: clamp(20px, calc((100svh - 100px) / 7), 30px); }
 .st-book-toolbar label { display: flex; flex-direction: row; width: 54px; height: 30px; padding: 0 2px; gap: 2px; font-size: 11px; white-space: nowrap; }
 .st-book-total { min-width: 18px; }
 .st-book-page { width: 22px; height: 28px; font-size: 12px; }
 .st-book-divider { width: 18px; height: 1px; margin: 3px 0; }
}

.st-book-side-nav { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.st-book-side-nav button { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: #43505b; border: 1px solid #b9b4ad; border-radius: 50%; background: #fffffff0; pointer-events: auto; cursor: pointer; }
.st-book-side-prev { left: max(8px, env(safe-area-inset-left)); }
.st-book-side-next { right: max(8px, env(safe-area-inset-right)); }
.st-book-side-nav button:disabled { opacity: .3; cursor: default; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .st-book-side-next { right: calc(72px + env(safe-area-inset-right)); } }
.st-book-curl-host.st-book-curl-reverse { transform: scaleX(-1); }
.st-book-curl-reverse .st-book-curl-page img { transform: scaleX(-1); }