.book-reading-area{margin-top:48px}.book-reading-area>.book-reader{max-width:1100px;margin-inline:auto}.flip-section{width:100%}
.flipbook{background:var(--surface-soft);border:1px solid var(--border);border-radius:18px;padding:20px;margin:20px 0;position:relative}.flipbook:focus-visible{outline:3px solid var(--brand)}
.flip-toolbar,.flip-controls{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.flip-toolbar{margin-bottom:20px}.flip-toolbar label{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.flip-toolbar select{font:inherit;padding:10px;max-width:360px;min-width:0;flex:1;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px}
.flip-stage{height:min(740px,75vh);min-height:280px;overflow:hidden;position:relative;padding:16px 12px 24px;isolation:isolate;overscroll-behavior:contain}
.flip-volume{width:100%;max-width:520px!important;min-width:0!important;min-height:0!important;height:100%;margin:auto;filter:drop-shadow(4px 8px 10px var(--border))}.flip-volume[hidden],.flip-reading[hidden]{display:none!important}
.flip-page{position:relative;background:var(--surface);color:var(--text);border:1px solid var(--border);overflow:hidden}.flip-page[hidden]{display:none}
.flip-page__body{height:calc(100% - 36px);position:relative;overflow:hidden}.flip-paper{width:480px;padding:26px;box-sizing:border-box;transform-origin:top left;overflow-wrap:anywhere}.flip-page--cover .flip-paper{padding:0}.flip-page img{display:block;width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.flip-page h3{font-size:1.35rem;line-height:1.5;margin:14px 0}.flip-page p,.flip-page li{font-size:1rem;line-height:1.8}.flip-page li{margin-bottom:10px}.flip-page ol,.flip-page ul{padding-left:24px}.flip-page ol{list-style:decimal}.flip-page ul{list-style:disc}.flip-page small{display:block;color:var(--text-secondary)}.flip-page footer{height:36px;padding:7px;text-align:center;border-top:1px solid var(--border);font-size:var(--fs-small)}.flip-brand{color:var(--brand);font-weight:600;font-size:var(--fs-small)}.flip-page .flip-note{font-size:.85rem;color:var(--text-secondary)}
.flip-controls{margin-top:20px}.flip-controls span{min-width:70px;text-align:center}.flip-help{text-align:center;font-size:var(--fs-small)}
.flipbook.is-zoomed .flip-stage{overflow:auto;touch-action:pan-x pan-y pinch-zoom}.flip-reading{width:850px;max-width:none;margin:auto}.flip-reading .flip-page{width:100%;height:auto}.flip-reading .flip-page__body{height:auto;overflow:visible}.flip-reading .flip-paper{width:100%;transform:none!important;margin:0!important;padding:32px}.flip-reading .flip-page--cover .flip-paper{padding:0}.flip-reading .flip-page p,.flip-reading .flip-page li{font-size:1.18rem}
.flipbook:fullscreen,.flipbook.is-expanded{background:var(--surface-soft);padding:20px;overflow:auto;border-radius:0}.flipbook:fullscreen .flip-stage,.flipbook.is-expanded .flip-stage{height:calc(100dvh - 200px);max-height:none}.flipbook.is-expanded{position:fixed;inset:0;z-index:100;margin:0}.flip-open{overflow:hidden}
/* A readable static fallback when the local page engine cannot load. */
.flipbook:not(.has-page-engine) .flip-stage{overflow:auto}.flipbook:not(.has-page-engine) .flip-paper{width:100%}.flipbook:not(.has-page-engine) .flip-page__body{height:auto}
@media(max-width:600px){.flipbook{padding:10px}.flip-stage{height:min(620px,68vh);padding:8px 2px 16px}.flip-toolbar{gap:8px}.flip-toolbar label{flex-basis:100%}.flip-toolbar select{width:100%;max-width:none}.flip-controls{gap:8px}.flip-controls .btn{padding:10px}.flipbook:fullscreen .flip-stage,.flipbook.is-expanded .flip-stage{height:calc(100dvh - 260px)}.flip-reading{width:650px}.book-reading-area{margin-top:28px}}

.flip-volume .stf__wrapper{width:100%;height:100%;position:relative}
/* Mobile reading: keep text at device width and gestures predictable. */
.flip-stage{touch-action:pan-y pinch-zoom}
@media(pointer:coarse){.flip-volume,.flip-volume .stf__block{touch-action:pan-y pinch-zoom!important}}
.flip-toolbar button,.flip-toolbar select,.flip-controls button{min-height:48px}
.flipbook button:focus-visible,.flipbook select:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.flipbook button:disabled{opacity:.45;cursor:default}
@media(max-width:600px){
 .flip-toolbar{display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px}
 .flip-toolbar label{grid-column:1/-1;display:block;font-size:16px}
 .flip-toolbar select{display:block;margin-top:6px;font-size:16px;width:100%}
 .flip-toolbar .btn{width:100%;padding:10px 8px;font-size:16px}
 .flip-stage{height:min(580px,65svh);min-height:240px;padding:8px 0}
 .flip-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:12px}
 .flip-controls .btn{font-size:15px;padding:10px 6px;min-width:0}
 .flip-controls span{min-width:48px;font-size:14px}
 .flip-help{margin-top:12px;line-height:1.6}
 .flip-reading{width:100%;max-width:100%}
 .flip-reading .flip-paper{padding:18px}
 .flip-reading .flip-page p,.flip-reading .flip-page li{font-size:16px;line-height:1.8}
 .flip-reading .flip-page h3{font-size:20px}
 .flipbook:fullscreen,.flipbook.is-expanded{padding: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;height:100dvh;box-sizing:border-box;overflow:hidden}
 .flipbook:fullscreen .flip-stage,.flipbook.is-expanded .flip-stage{height:auto;flex:1;min-height:0}
 .flipbook:fullscreen .flip-toolbar,.flipbook.is-expanded .flip-toolbar,.flipbook:fullscreen .flip-controls,.flipbook.is-expanded .flip-controls{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.flipbook *{scroll-behavior:auto!important}}