.book-reader-open { overflow:hidden; }
.book-reader { --reader-ink:#30372e; --page-width:360px; --page-height:540px; width:min(1440px,calc(100vw - 48px)); height:calc(100dvh - 48px); max-width:none; max-height:none; border:1px solid #d7d9cb; padding:0; margin:auto; background:#ecebe3; color:var(--reader-ink); overflow:hidden; box-shadow:0 25px 100px #0005; }
.book-reader[open] { display:flex; flex-direction:column; }
.book-reader::backdrop { background:#18201bd9; backdrop-filter:blur(8px); }
.book-reader button,.book-reader select,.book-reader input { font:inherit; color:inherit; }
.book-reader button { cursor:pointer; background:none; }
.book-reader button:disabled { opacity:.3; cursor:default; }
.book-reader :is(button,select,input,a):focus-visible { outline:2px solid #657750; outline-offset:4px; }
.reader-header { padding:20px 28px 17px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; border-bottom:1px solid #cfd1c5; }
.reader-header>div>span { font-size:8px; letter-spacing:2px; color:#727968; }
.reader-header h2 { font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:-.6px; margin:3px 0 0; }
.reader-close { display:flex; align-items:center; gap:18px; font-size:11px!important; padding:9px 0 9px 15px; }
.reader-close span { font:26px var(--sans); font-weight:300; }
.reader-tools { display:flex; align-items:center; gap:20px; padding:11px 28px; font-size:11px; flex-shrink:0; }
.reader-tools select { width:240px; max-width:100%; padding:8px 26px 8px 0; border:0; background:transparent; cursor:pointer; }
.reader-zoom { display:flex; gap:8px; align-items:center; margin-left:auto; }
.reader-zoom button { width:30px; height:30px; font-size:19px; }
.reader-zoom output { width:42px; font-size:10px; text-align:center; font-variant-numeric:tabular-nums; }
.reader-stage { min-height:0; flex:1; overflow:auto; scrollbar-gutter:stable both-edges; overflow-anchor:none; scroll-behavior:auto; padding:22px 24px; overscroll-behavior:contain; scrollbar-color:#a8ae9a #e3e4da; position:relative; outline:0; }
.reader-stage:focus-visible { box-shadow:inset 0 0 0 2px #aeb79b; }
.reader-spread { width:calc(var(--page-width) * 2); height:var(--page-height); position:relative; margin:0 auto; perspective:2200px; overflow:clip; box-shadow:0 2px 1px #c3c3b3,0 5px 0 #d9d8cc,0 7px 1px #bdbdaf,0 12px 0 #deded2,0 25px 35px #343d3426; }
.reader-pages { display:flex; width:100%; height:100%; background:#fffefa; }
.reader-leaf { flex-shrink:0; position:relative; background:#fffefa; overflow:hidden; }
.reader-leaf canvas { display:block; max-width:none; }
.reader-leaf::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 88%,#6263470c 96%,#282c201a); pointer-events:none; }
.reader-leaf+ .reader-leaf::after { background:linear-gradient(90deg,#282c2022,#62634709 4%,transparent 12%); }
.reader-cover,.reader-turn { position:absolute; z-index:5; top:0; left:50%; width:var(--page-width); height:var(--page-height); transform-origin:left center; transform-style:preserve-3d; pointer-events:none; }
.reader-cover-front,.reader-cover-back,.turn-front,.turn-back { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; background:#fffefa; }
.reader-cover-front img,.reader-turn canvas { display:block; width:100%; height:100%; max-width:none; object-fit:fill; }
.reader-cover-front { box-shadow:10px 12px 30px #0003; }
.reader-cover-back,.turn-back { transform:rotateY(180deg); background:linear-gradient(90deg,#eeeee2,#f9f8ef 80%,#bdbdaf); }
.reader-turn.backward { left:0; transform-origin:right center; }
.reader-turn .turn-front::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#413c2014,transparent 20%,#413c2010); }
.reader-message { flex-shrink:0; min-height:22px; padding:3px 24px; text-align:center; font-size:10px; color:#7b816f; }
.reader-footer { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:10px 28px; border-top:1px solid #cfd1c5; }
.reader-footer>button { padding:8px 0; display:flex; gap:14px; align-items:center; font-size:12px; }
#reader-page-form { display:flex; align-items:center; gap:7px; font-size:10px; color:#7b816f; }
#reader-page { width:45px; background:transparent; border:0; border-bottom:1px solid #a5ad94; text-align:center; padding:5px 0; border-radius:0; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
#reader-page::-webkit-inner-spin-button,#reader-page::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.reader-bottom { display:flex; justify-content:space-between; padding:0 28px 14px; font-size:9px; color:#7b816f; flex-shrink:0; }
.is-opening .reader-tools,.is-opening .reader-footer { pointer-events:none; }
.reader-leaf .textLayer { color-scheme:only light; position:absolute; text-align:initial; inset:0; overflow:clip; line-height:1; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; z-index:1; --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size)); }
.textLayer :is(span,br) { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0 0; }
.textLayer>:not(.markedContent),.textLayer .markedContent span:not(.markedContent) { z-index:1; --font-height:0; font-size:calc(var(--text-scale-factor) * var(--font-height)); --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display:contents; }
.textLayer ::selection { background:#879b6166; }
@media(max-width:900px) { .reader-tools { gap:12px; }.reader-tools select { width:195px; } }
@media(max-width:700px) {
  .book-reader { width:100vw; height:100dvh; border:0; }
  .reader-header { padding:16px 20px 13px;  border-bottom:1px solid #cfd1c5; }.reader-header h2 { font-size:23px; }
  .reader-tools { padding:8px 16px; gap:12px; flex-wrap:wrap; }
  .reader-tools>label { flex:1; min-width:0; }.reader-tools select { width:100%; font-size:11px; }
  .reader-stage { padding:22px 24px; }.reader-spread { width:var(--page-width); }
  .reader-cover,.reader-turn { left:0; }
  .reader-leaf::after { background:linear-gradient(90deg,#282c2015,transparent 4%); }
  .reader-footer { padding:10px 20px;  border-top:1px solid #cfd1c5; }.reader-footer>button { font-size:11px; gap:7px; }
  .reader-bottom { padding:0 20px 14px; font-size:8px;  color:#7b816f; }.reader-message { font-size:9px;  color:#7b816f; }
}
@media(prefers-reduced-motion:reduce) { .book-object[data-open-book] { transition:none; } }