/* =====================================================================
   Reader: Kindle-style book reading for interactive (HTML) and PDF books.
   Two-page spread on wide screens, single page on phones; 3D page turns
   (curl / slide / none), bookmark ribbons, highlights, read aloud,
   warm light, brightness, reading lamp and a line-focus ruler.
   ===================================================================== */

.reader {
  --page: #FFFFFF; --text: #1D1D1F; --muted: #6E6E73; --stage: #E9E8E4; --chrome: rgba(255, 255, 255, .86); --chrome-ink: #1D1D1F; --chrome-line: rgba(0, 0, 0, .08);
  --rfont: var(--font-read); --rfs: 18px; --rlh: 1.65; --rmargin: 46px; --ralign: left;
  --warm: 0; --dim: 0; --lw: 520px; --lh: 720px;
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); background: var(--stage); color: var(--chrome-ink);
  transition: background .4s var(--ease);
  -webkit-user-select: none; user-select: none;
}
.reader.t-sepia { --page: #F5ECD9; --text: #3B3022; --muted: #8A7A60; --stage: #E4D8BF; --chrome: rgba(245, 236, 217, .9); --chrome-ink: #3B3022; --chrome-line: rgba(59, 48, 34, .12); }
.reader.t-slate { --page: #2B2C30; --text: #E4E4E7; --muted: #9A9AA2; --stage: #1E1F22; --chrome: rgba(30, 31, 34, .9); --chrome-ink: #E4E4E7; --chrome-line: rgba(255, 255, 255, .08); }
.reader.t-night { --page: #121212; --text: rgba(255, 255, 255, .86); --muted: rgba(255, 255, 255, .5); --stage: #070707; --chrome: rgba(10, 10, 10, .9); --chrome-ink: rgba(255, 255, 255, .86); --chrome-line: rgba(255, 255, 255, .07); }

/* chrome */
.r-top, .r-foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--chrome); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--chrome-line); z-index: 5; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.r-foot { border-bottom: 0; border-top: 1px solid var(--chrome-line); padding: 8px 14px; }
.reader.immersive .r-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.reader.immersive .r-foot { opacity: 0; transform: translateY(100%); pointer-events: none; }
.r-title { flex: 1; min-width: 0; line-height: 1.25; padding: 0 8px; }
.r-title b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-title span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.r-btn { width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--chrome-ink); display: grid; place-items: center; flex: none; transition: background .15s, transform .12s var(--ease); }
.r-btn:hover { background: color-mix(in srgb, var(--chrome-ink) 9%, transparent); }
.r-btn:active { transform: scale(.94); }
.r-btn[aria-pressed="true"] { background: var(--chrome-ink); color: var(--page); }
.r-btn svg { width: 19px; height: 19px; }
.r-btn.on-brand[aria-pressed="true"] { background: var(--brand); color: #fff; }
.r-sep { width: 1px; height: 22px; background: var(--chrome-line); margin: 0 4px; }
.r-scrub { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.r-scrub input[type="range"] { flex: 1; accent-color: var(--chrome-ink); height: 4px; }
.r-progress { font-size: 12.5px; color: var(--muted); white-space: nowrap; border: 0; background: none; padding: 6px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; min-width: 160px; text-align: right; }
.r-progress:hover { color: var(--chrome-ink); background: color-mix(in srgb, var(--chrome-ink) 7%, transparent); }

/* stage */
.r-stage { position: relative; display: grid; place-items: center; overflow: hidden; perspective: 2400px; outline: none; touch-action: pan-y; }
.r-book { position: relative; width: calc(var(--lw) * 2); height: var(--lh); }
.r-book.single { width: var(--lw); }
.r-book::after { /* spine */ content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 40px; transform: translateX(-50%); pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, .1) 54%, transparent); }
.r-book.single::after { display: none; }
.r-leaf { position: absolute; top: 0; width: var(--lw); height: var(--lh); background: var(--page); color: var(--text); overflow: hidden; transition: background .4s var(--ease), color .4s var(--ease);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(0, 0, 0, .45); }
.r-leaf.l { left: 0; border-radius: 6px 2px 2px 6px; }
.r-leaf.r { left: var(--lw); border-radius: 2px 6px 6px 2px; }
.r-book.single .r-leaf { left: 0; border-radius: 6px; }
.r-leaf.l::before, .r-leaf.r::before { content: ''; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }
.r-leaf.l::before { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .08), transparent); }
.r-leaf.r::before { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .08), transparent); }
.r-leaf.blank { background: color-mix(in srgb, var(--page) 92%, var(--stage)); }

.r-pagebody { position: absolute; inset: 0; padding: calc(var(--rmargin) * .9) var(--rmargin) calc(var(--rmargin) + 14px); display: flex; flex-direction: column; }
.r-running { font: 600 10.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; display: flex; justify-content: space-between; gap: 12px; padding-right: 26px; }
.r-running span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-folio { position: absolute; left: 0; right: 0; bottom: calc(var(--rmargin) * .55); text-align: center; font: 500 11.5px/1 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.r-text { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; font-family: var(--rfont); font-size: var(--rfs); line-height: var(--rlh); text-align: var(--ralign); hyphens: auto; -webkit-user-select: text; user-select: text; overflow-wrap: break-word;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.r-text::-webkit-scrollbar { display: none; }
.r-text.fits { -webkit-mask-image: none; mask-image: none; }
.r-text h2 { font-family: var(--font-ui); font-size: calc(var(--rfs) * 1.45); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 .9em; color: var(--text); }
.r-text h3 { font-family: var(--font-ui); font-size: calc(var(--rfs) * 1.02); font-weight: 650; letter-spacing: -.01em; margin: 1.3em 0 .45em; }
.r-text h2 + h3 { margin-top: .2em; }
.r-text p { margin: 0 0 .85em; }
.r-text ul, .r-text ol { margin: 0 0 .9em; padding-left: 1.2em; }
.r-text li { margin-bottom: .35em; }
.r-text li::marker { color: var(--muted); }
.r-text blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 2px solid var(--muted); font-style: italic; }
.r-text mark.hl { color: inherit; border-radius: 2px; padding: 0; cursor: pointer; transition: background .2s; }
.r-text mark.hl-yellow { background: rgba(250, 204, 21, .38); } .r-text mark.hl-green { background: rgba(74, 222, 128, .32); }
.r-text mark.hl-blue { background: rgba(96, 165, 250, .32); } .r-text mark.hl-pink { background: rgba(244, 114, 182, .32); }
.reader.t-night .r-text mark.hl-yellow, .reader.t-slate .r-text mark.hl-yellow { background: rgba(250, 204, 21, .26); }
.r-text mark.hl.has-note { border-bottom: 1.5px dotted currentColor; }
.r-text mark.hl.flash { animation: hlFlash 1.2s var(--ease); }
@keyframes hlFlash { 30% { box-shadow: 0 0 0 4px rgba(250, 204, 21, .45); } }
::highlight(tts-sent) { background-color: rgba(250, 204, 21, .28); }
::highlight(tts-word) { background-color: rgba(250, 204, 21, .6); color: #111; }
::highlight(search-hit) { background-color: rgba(96, 165, 250, .45); }
.reader.f-hyper { --rfont: var(--font-hyper); }
.reader.f-sans { --rfont: var(--font-ui); }

/* PDF pages */
.r-pdf { position: absolute; inset: 0; display: grid; place-items: center; }
.r-pdf canvas { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter .4s var(--ease); }
.reader.t-sepia .r-pdf canvas { filter: sepia(.32) saturate(.9) brightness(.98); }
.reader.t-slate .r-pdf canvas { filter: invert(.86) hue-rotate(180deg) contrast(.9); }
.reader.t-night .r-pdf canvas { filter: invert(.92) hue-rotate(180deg) brightness(.9) contrast(.92); }
.r-pdf .tl { position: absolute; inset: 0; overflow: hidden; line-height: 1; -webkit-user-select: text; user-select: text; }
.r-pdf .tl span { position: absolute; white-space: pre; color: transparent; transform-origin: 0 0; cursor: text; }
.r-pdf .tl ::selection { background: rgba(96, 165, 250, .35); }
.r-pdf .tl mark.hl { color: transparent; }
.r-pdf .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 500 13px var(--font-ui); }

/* bookmark ribbon */
.r-ribbon { position: absolute; top: 0; right: 22px; z-index: 4; width: 26px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; }
.r-ribbon::before { content: ''; position: absolute; inset: 0 2px 0; background: var(--muted); opacity: .25; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transition: opacity .2s, transform .35s var(--spring), background .2s; transform-origin: top; transform: scaleY(.45); }
.r-ribbon:hover::before { opacity: .5; transform: scaleY(.65); }
.r-ribbon[aria-pressed="true"]::before { background: var(--brand-2, #EB1C25); opacity: 1; transform: scaleY(1); }
.r-ribbon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the turning leaf */
.r-flip { position: absolute; top: 0; width: var(--lw); height: var(--lh); transform-style: preserve-3d; z-index: 6; will-change: transform; pointer-events: none; }
.r-flip.fwd { left: var(--lw); transform-origin: left center; }
.r-flip.back { left: 0; transform-origin: right center; }
.r-book.single .r-flip.fwd, .r-book.single .r-flip.back { left: 0; transform-origin: left center; }
.r-flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--page); color: var(--text); }
.r-flip .face.b { transform: rotateY(180deg); }
.r-flip .face::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--shade, 0); }
.r-flip.fwd .face.f::after { background: linear-gradient(90deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .28) 100%); }
.r-flip.fwd .face.b::after { background: linear-gradient(270deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .3) 100%); }
.r-flip.back .face.f::after { background: linear-gradient(270deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .28) 100%); }
.r-flip.back .face.b::after { background: linear-gradient(90deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .3) 100%); }
.r-cast { position: absolute; top: 0; width: var(--lw); height: var(--lh); pointer-events: none; z-index: 5; opacity: var(--cast, 0); }
.r-cast.on-r { left: var(--lw); background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 60%); }
.r-cast.on-l { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .3), transparent 60%); }
.r-book.single .r-cast { left: 0; }
/* slide mode */
.r-slide-out-l { animation: slOutL .32s var(--ease) forwards; } .r-slide-in-r { animation: slInR .32s var(--ease) both; }
.r-slide-out-r { animation: slOutR .32s var(--ease) forwards; } .r-slide-in-l { animation: slInL .32s var(--ease) both; }
@keyframes slOutL { to { transform: translateX(-36px); opacity: 0; } } @keyframes slInR { from { transform: translateX(36px); opacity: 0; } }
@keyframes slOutR { to { transform: translateX(36px); opacity: 0; } } @keyframes slInL { from { transform: translateX(-36px); opacity: 0; } }

.r-zone { position: absolute; top: 0; bottom: 0; width: 14%; z-index: 4; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--chrome-ink); opacity: 0; transition: opacity .2s; }
.r-zone:hover, .r-zone:focus-visible { opacity: .55; }
.r-zone svg { width: 28px; height: 28px; }
.r-zone.prev { left: 0; } .r-zone.next { right: 0; }
.r-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 500 12px var(--font-ui); color: var(--muted); pointer-events: none; transition: opacity .6s; }

/* light effects */
.r-warm, .r-dim, .r-lamp { position: fixed; inset: 0; pointer-events: none; z-index: 30; transition: opacity .4s var(--ease), background .4s; }
.r-warm { background: rgb(255, 147, 41); mix-blend-mode: multiply; opacity: calc(var(--warm) * .55); }
.r-dim { background: #000; opacity: var(--dim); }
.r-lamp { opacity: 0; background: radial-gradient(520px circle at var(--lx, 50%) var(--ly, 40%), rgba(255, 214, 160, .14), transparent 70%), radial-gradient(1400px circle at var(--lx, 50%) var(--ly, 40%), transparent 30%, rgba(0, 0, 0, .45)); }
.reader.lamp .r-lamp { opacity: 1; }
.r-ruler { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 29; display: none; }
.reader.ruler .r-ruler { display: block; }
.r-ruler::before, .r-ruler::after { content: ''; position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, .5); }
.r-ruler::before { top: 0; height: var(--rt, 0); }
.r-ruler::after { top: calc(var(--rt, 0) + var(--rh, 30px)); bottom: 0; }

/* panels */
.r-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 40; background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: drawerIn .28s var(--ease); -webkit-user-select: text; user-select: text; }
.r-panel .tabs { padding: 0 12px; margin-bottom: 0; }
.r-panel .body { flex: 1; overflow-y: auto; padding: 12px 16px 20px; }
.r-panel .ph { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 16px; }
.toc-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; border: 0; background: none; text-align: left; font-size: 13.5px; color: var(--ink); }
.toc-item:hover { background: var(--surface-2); }
.toc-item.cur { background: var(--surface-2); font-weight: 600; }
.toc-item .pg { margin-left: auto; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.toc-item.topic { font-weight: 600; margin-top: 6px; }
.toc-item.sub { padding-left: 24px; color: var(--ink-2); }

.r-pop { position: fixed; z-index: 45; width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - 80px); overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); padding: 14px; animation: menuIn .18s var(--ease); }
.r-pop h4 { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 8px; }
.r-pop h4:first-child { margin-top: 2px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch { height: 52px; border-radius: 10px; border: 1px solid var(--line-2); display: grid; place-items: end center; padding-bottom: 6px; font: 600 11px var(--font-ui); cursor: pointer; position: relative; transition: transform .15s var(--ease); }
.swatch:hover { transform: translateY(-1px); }
.swatch::before { content: 'Aa'; position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 600 15px var(--font-read); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.sw-white { background: #FFFFFF; color: #1D1D1F; } .sw-sepia { background: #F5ECD9; color: #3B3022; } .sw-slate { background: #2B2C30; color: #E4E4E7; border-color: #2B2C30; } .sw-night { background: #121212; color: rgba(255, 255, 255, .86); border-color: #121212; }
.stepper-row { display: flex; align-items: center; gap: 8px; }
.stepper-row button { width: 40px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; }
.stepper-row .val { flex: 1; text-align: center; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.slider { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.slider input { flex: 1; accent-color: var(--ink); }
.r-pop .seg { width: 100%; }
.r-pop .seg button { flex: 1; justify-content: center; }
.r-pop .opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }

/* selection toolbar */
.r-sel { position: fixed; z-index: 46; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 11px; background: #1D1D1F; color: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); animation: menuIn .14s var(--ease); }
.r-sel button { height: 32px; min-width: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: #fff; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-ui); }
.r-sel button:hover { background: rgba(255, 255, 255, .12); }
.r-sel button svg { width: 15px; height: 15px; }
.r-sel .dotc { width: 16px; height: 16px; border-radius: 50%; padding: 0; min-width: 0; margin: 0 3px; border: 2px solid rgba(255, 255, 255, .25); }
.r-sel .dotc:hover { transform: scale(1.15); background: currentColor; }
.r-sel .sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .18); margin: 0 3px; }

/* read aloud bar */
.r-tts { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; background: var(--chrome); color: var(--chrome-ink); border: 1px solid var(--chrome-line); box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .55); backdrop-filter: blur(14px); animation: ttsIn .3s var(--ease); max-width: calc(100vw - 20px); }
@keyframes ttsIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.r-tts .r-btn { width: 34px; height: 34px; }
.r-tts .play { background: var(--chrome-ink); color: var(--page); }
.r-tts .play:hover { background: var(--chrome-ink); opacity: .9; }
.r-tts select { height: 32px; border-radius: 8px; border: 1px solid var(--chrome-line); background: transparent; color: var(--chrome-ink); font: 500 12.5px var(--font-ui); padding: 0 6px; max-width: 150px; }
.r-tts .wave { display: inline-flex; gap: 2px; align-items: center; height: 16px; margin: 0 6px; }
.r-tts .wave i { width: 2px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.3); }
.r-tts.speaking .wave i { animation: wave 1s ease-in-out infinite; }
.r-tts .wave i:nth-child(2) { animation-delay: .15s; } .r-tts .wave i:nth-child(3) { animation-delay: .3s; } .r-tts .wave i:nth-child(4) { animation-delay: .45s; }
@keyframes wave { 50% { transform: scaleY(1); } }

.r-toastline { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 9; padding: 7px 12px; border-radius: 99px; background: var(--chrome); color: var(--chrome-ink); border: 1px solid var(--chrome-line); font: 500 12.5px var(--font-ui); animation: toastIn .25s var(--ease); pointer-events: none; }

@media (max-width: 760px) {
  .reader { --rmargin: 26px; }
  .r-top { padding: 8px 6px; gap: 2px; }
  .r-top .hide-sm { display: none; }
  .r-progress { min-width: 0; }
  .r-tts { bottom: 70px; }
  .r-tts select { max-width: 90px; }
}