/* LocalBooks reader — full screen, chrome fades while reading (ported from Zayvay's reader).
   Settings live on <html> (set before first paint): data-r-theme paper|sepia|gray|dark|black,
   data-r-font literata|garamond|sans|easy, data-r-spacing tight|normal|loose, data-r-margins narrow|normal|wide,
   data-r-justify 1|0, data-r-indent 1|0 (book-style paragraphs), data-r-opening both|caps|plain, data-r-layout scroll|pages. Text size: --r-size. */

:root {
  --serif: 'Literata', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r-size: 19px;
  --r-measure: 34em; /* line length; margins setting */
  --r-pad: 22px;     /* side padding on narrow screens; margins setting */
  --r-lh: 1.62;      /* line spacing setting */
  --r-face: 'Literata', 'Iowan Old Style', Georgia, serif;
  --r-scale: 1;      /* some faces look small at the same size */
  --r-bar: 52px;
  --page: #fbf8f2; --ink: #26201a; --muted: #75695b; --rule: #e4dacb; --chrome: rgb(251 248 242 / .94);
  --accent: #9a4a1f; --accent-ink: #fffaf3; --link: #2b5a85; --mark: #9a4a1f; --hl: rgb(154 74 31 / .10);
  color-scheme: light;
}
html[data-r-theme='sepia'] {
  --page: #f1e6d0; --ink: #3b2f22; --muted: #7d6a52; --rule: #dccbab; --chrome: rgb(241 230 208 / .95);
  --accent: #8f4519; --link: #6a4a2a; --mark: #8f4519; --hl: rgb(143 69 25 / .12);
}
html[data-r-theme='gray'] {
  --page: #48484a; --ink: #ecebe8; --muted: #b4b1ab; --rule: #5c5c5f; --chrome: rgb(72 72 74 / .95);
  --accent: #f0b48c; --accent-ink: #2a2522; --link: #bcd4ea; --mark: #f0b48c; --hl: rgb(240 180 140 / .16);
  color-scheme: dark;
}
html[data-r-theme='black'] {
  --page: #000; --ink: #c9c2b6; --muted: #857d71; --rule: #222; --chrome: rgb(0 0 0 / .94);
  --accent: #d8895a; --accent-ink: #000; --link: #9db8d0; --mark: #d8895a; --hl: rgb(216 137 90 / .16);
  color-scheme: dark;
}
html[data-r-theme='dark'] {
  --page: #1b1713; --ink: #d6cbb8; --muted: #9b8e7b; --rule: #352d25; --chrome: rgb(27 23 19 / .94);
  --accent: #d8895a; --accent-ink: #1b1713; --link: #a9c6e0; --mark: #e0a07a; --hl: rgb(216 137 90 / .14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body.reader { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Chrome ── */
.r-top, .r-bottom {
  position: fixed; inset-inline: 0; z-index: 20; display: flex; align-items: center; gap: 6px;
  padding: 0 max(10px, env(safe-area-inset-left)); background: var(--chrome); backdrop-filter: blur(8px);
  transition: transform .25s ease, opacity .25s ease;
}
.r-top { top: 0; height: calc(var(--r-bar) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--rule); }
.r-bottom { bottom: 0; height: calc(var(--r-bar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--rule); }
.chrome-hidden .r-top { transform: translateY(-100%); opacity: 0; }
.chrome-hidden .r-bottom { transform: translateY(100%); opacity: 0; }
.r-icon-btn {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-size: 20px; line-height: 1; text-decoration: none; cursor: pointer;
}
.r-icon-btn:hover { background: var(--hl); }
.r-aa { font: 600 16px var(--serif); }
.r-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.r-book { font-size: 12px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-ch { font: 600 14px var(--sans); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.r-bar { width: 100%; max-width: 520px; height: 3px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.r-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.r-status { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; border: 0; background: none; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.r-status:hover { background: var(--hl); }
.r-bar { position: relative; overflow: visible; }
.r-fill { border-radius: 3px; }
/* The bar doubles as a scrubber over the whole book: an invisible range input with a big hit area. */
.r-scrub { position: absolute; inset: -12px 0; width: 100%; height: 27px; margin: 0; opacity: 0; cursor: pointer; }
.r-scrub-tip {
  position: fixed; z-index: 25; bottom: calc(var(--r-bar) + env(safe-area-inset-bottom) + 10px); transform: translateX(-50%);
  max-width: min(320px, calc(100vw - 24px)); padding: 7px 12px; border-radius: 10px; background: var(--ink); color: var(--page);
  font-size: 13px; text-align: center; box-shadow: 0 8px 24px rgb(0 0 0 / .25); pointer-events: none;
}
.r-scrub-tip b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-backpill {
  position: fixed; z-index: 24; left: 50%; transform: translateX(-50%); bottom: calc(var(--r-bar) + env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; max-width: calc(100vw - 24px); border-radius: 999px; background: var(--ink); color: var(--page);
  box-shadow: 0 8px 24px rgb(0 0 0 / .25); font-size: 13px;
}
.r-backpill button { border: 0; background: none; color: inherit; cursor: pointer; padding: 9px 14px; }
.r-backpill-go { max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.r-backpill-x { padding-inline: 10px 14px !important; opacity: .7; font-size: 16px; }
.chrome-hidden .r-backpill { opacity: 0; pointer-events: none; }

/* Chapter to chapter: a quick page-slide between documents where supported (Chrome, Safari 18.2+). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
html:active-view-transition-type(fwd)::view-transition-old(root) { animation: .26s cubic-bezier(.4, 0, .2, 1) both r-out-start; }
html:active-view-transition-type(fwd)::view-transition-new(root) { animation: .26s cubic-bezier(.4, 0, .2, 1) both r-in-end; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: .26s cubic-bezier(.4, 0, .2, 1) both r-out-end; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: .26s cubic-bezier(.4, 0, .2, 1) both r-in-start; }
@keyframes r-out-start { to { transform: translateX(-30%); opacity: 0; } }
@keyframes r-in-end { from { transform: translateX(30%); opacity: 0; } }
@keyframes r-out-end { to { transform: translateX(30%); opacity: 0; } }
@keyframes r-in-start { from { transform: translateX(-30%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }

/* ── Panels ── */
.r-panel {
  position: fixed; z-index: 30; top: calc(var(--r-bar) + env(safe-area-inset-top) + 6px); inset-inline-end: 10px;
  width: min(340px, calc(100vw - 20px)); padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--page); box-shadow: 0 12px 32px rgb(0 0 0 / .18);
}
.r-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.r-row > span:first-child { color: var(--muted); font-size: 13px; }
.r-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.r-seg button { border: 0; background: transparent; padding: 7px 11px; cursor: pointer; font-size: 13px; }
.r-seg button + button { border-inline-start: 1px solid var(--rule); }
.r-seg button.on { background: var(--accent); color: var(--accent-ink); }
.r-panel { max-height: calc(100dvh - var(--r-bar) - env(safe-area-inset-top) - 20px); overflow-y: auto; }
.r-seg button { display: inline-grid; place-items: center; min-width: 40px; min-height: 34px; }
.r-seg button.on svg { color: var(--accent-ink); }
.r-size-val { display: inline-grid; place-items: center; min-width: 40px; font-size: 13px; color: var(--muted); border-inline-start: 1px solid var(--rule); }
.r-themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 2px 0 10px; }
.r-theme, .r-font { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.r-theme span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 600 15px var(--serif); box-shadow: inset 0 0 0 1px rgb(127 127 127 / .35); }
.r-theme small, .r-font small { font-size: 11px; white-space: nowrap; }
.r-theme.on span, .r-font.on span { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.r-theme.on small, .r-font.on small { color: var(--ink); font-weight: 600; }
.r-theme-paper span { background: #fbf8f2; color: #26201a; }
.r-theme-sepia span { background: #f1e6d0; color: #3b2f22; }
.r-theme-gray span { background: #48484a; color: #ecebe8; }
.r-theme-dark span { background: #1b1713; color: #d6cbb8; }
.r-theme-black span { background: #000; color: #c9c2b6; }
.r-theme-auto span { background: linear-gradient(135deg, #fbf8f2 50%, #1b1713 50%); color: #8a7d6c; }
.r-fonts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 0 6px; border-top: 1px solid var(--rule); margin-top: 4px; }
.r-font span { display: grid; place-items: center; width: 100%; height: 44px; border-radius: 10px; font-size: 22px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.r-font-literata span { font-family: 'Literata', serif; }
.r-font-garamond span { font-family: 'EB Garamond', serif; font-size: 25px; }
.r-font-sans span { font-family: var(--sans); }
.r-font-easy span { font-family: 'Atkinson Hyperlegible', sans-serif; }
.r-muted { color: var(--muted); }
.r-small { font-size: 12px; margin: 8px 0 0; }

.r-drawer {
  position: fixed; z-index: 40; inset-block: 0; inset-inline-start: 0; width: min(380px, 88vw); overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 8px) 0 24px; background: var(--page); border-inline-end: 1px solid var(--rule);
  box-shadow: 0 0 40px rgb(0 0 0 / .2);
}
.r-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 6px 18px; }
.r-drawer > p { padding: 0 18px; }
.r-drawer ol { list-style: none; margin: 6px 0 0; padding: 0; }
.r-drawer li a { display: flex; gap: 10px; align-items: baseline; padding: 9px 18px; color: var(--ink); text-decoration: none; font-size: 14px; }
.r-drawer li a:not([href]) { color: var(--muted); cursor: default; }
.r-drawer li a[href]:hover { background: var(--hl); }
.r-drawer li.current a { background: var(--hl); font-weight: 600; }
.r-dot { flex: 0 0 1.1em; color: var(--accent); font-size: 12px; text-align: center; }
.r-scrim { position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .35); }

/* ── Text ── */
.r-viewport { padding: calc(var(--r-bar) + env(safe-area-inset-top) + 28px) var(--r-pad) calc(var(--r-bar) + env(safe-area-inset-bottom) + 48px); }
html[data-r-spacing='tight'] { --r-lh: 1.45; }
html[data-r-spacing='loose'] { --r-lh: 1.85; }
html[data-r-margins='narrow'] { --r-measure: 40em; --r-pad: 14px; }
html[data-r-margins='wide'] { --r-measure: 28em; --r-pad: 36px; }
html[data-r-font='garamond'] { --r-face: 'EB Garamond', Garamond, 'Times New Roman', serif; --r-scale: 1.1; }
html[data-r-font='sans'] { --r-face: var(--sans); --r-scale: .96; }
html[data-r-font='easy'] { --r-face: 'Atkinson Hyperlegible', Verdana, sans-serif; --r-scale: 1; }
.r-text {
  max-width: var(--r-measure); margin: 0 auto; font: 400 calc(var(--r-size) * var(--r-scale))/var(--r-lh) var(--r-face); color: var(--ink);
  overflow-wrap: break-word; font-variant-numeric: oldstyle-nums; text-align: start; hyphens: manual; -webkit-hyphens: manual;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
html[data-r-font='sans'] .r-text, html[data-r-font='easy'] .r-text { font-variant-numeric: normal; }
html[data-r-font='easy'] .r-text { letter-spacing: .01em; word-spacing: .04em; }
/* Justified needs hyphenation (the article carries the book's language) or it leaves rivers. */
html[data-r-justify='1'] .r-text { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 2; }
/* Whole-paragraph line breaking where the browser has it (Safari 26 weighs every line of the paragraph,
   Knuth–Plass style; Chrome avoids a stranded last word), and quotes and periods hung into the margin
   so a justified edge looks straight (Safari). The app does both itself (ios LineBreaker.swift). */
.r-text p { text-wrap: pretty; }
html[data-r-justify='1'] .r-text { hanging-punctuation: first allow-end last; }
.r-text p { margin-block: 0 .9em; widows: 2; orphans: 2; }
/* Book-style paragraphs: indent, no gap; no indent after a heading, a scene break or at the start. */
html[data-r-indent='1'] .r-text p { margin-block: 0; text-indent: 1.5em; }
html[data-r-indent='1'] .r-text :is(p:first-child, :is(h1, h2, h3, h4, h5, h6, hr, blockquote, figure, ul, ol, table, pre, [hidden], .r-ch-title) + p, p.r-open) { text-indent: 0; }
html[data-r-indent='1'] .r-text :is(hr, blockquote, figure, ul, ol, table, pre) { margin-block: 1em; }
html[data-r-indent='1'] .r-text :is(blockquote, li) p { text-indent: 0; margin-bottom: .5em; }
/* The chapter's opening paragraph (Chapter openings setting, data-r-opening): both = two-line drop cap
   and small-caps first line, as in printed books; caps = small-caps first line only; plain = nothing. */
html[data-r-opening='both'] .r-text p.r-open::first-letter { -webkit-initial-letter: 2; initial-letter: 2; font-weight: 600; margin-inline-end: .1em; color: var(--ink); }
html:is([data-r-opening='both'], [data-r-opening='caps']) .r-text p.r-open::first-line { font-variant-caps: small-caps; letter-spacing: .03em; }
/* Japanese: emphasis is sesame dots over the characters (傍点), not italics; readings (ruby) small and quiet. */
.r-text:lang(ja) em { font-style: normal; -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; }
.r-text rt { font-size: .5em; font-variant-numeric: normal; color: var(--muted); }
.r-text h1, .r-text h2, .r-text h3, .r-text h4 { font-family: var(--r-face); font-weight: 600; line-height: 1.25; color: var(--ink); text-align: center; hyphens: manual; text-indent: 0; }
.r-text .r-ch-title { font-size: 1.55em; margin: .4em 0 1.4em; }
.r-text h1:not(.r-ch-title), .r-text h2 { font-size: 1.3em; margin: 1.4em 0 .9em; }
.r-text h3, .r-text h4 { font-size: 1.08em; margin: 1.3em 0 .7em; }
/* The book's own chapter heading usually repeats ours: keep it, quieter. */
.r-text .r-ch-title + h1, .r-text .r-ch-title + h2, .r-text .r-ch-title + h3 { font-size: 1em; color: var(--muted); font-weight: 500; margin-top: -1em; }
.r-text blockquote { margin: 1em 0; padding-inline-start: 1.2em; border-inline-start: 2px solid var(--rule); }
.r-text hr { border: 0; margin: 1.6em auto; width: 30%; border-top: 1px solid var(--rule); }
.r-text img { display: block; max-width: 100%; max-height: 70vh; height: auto; margin: 1em auto; border-radius: 2px; }
.r-text figure { margin: 1.2em 0; text-align: center; }
/* Line art (reader.js marks it): ink on paper themes, light on dark ones; ornaments stay modest. */
html:is([data-r-theme='dark'], [data-r-theme='gray'], [data-r-theme='black']) .r-text img.r-ink { filter: invert(1) brightness(.86); }
html[data-r-theme='sepia'] .r-text img.r-ink { opacity: .85; }
.r-text img.r-orn { width: min(36%, 8em); max-height: 2em; object-fit: contain; margin: 1em auto; }
html[data-r-indent='1'] .r-text p:has(> img:only-child) + p { text-indent: 0; }
html[data-r-indent='1'] .r-text p:has(> img:only-child) { text-indent: 0; text-align: center; }
.r-text figcaption { font-size: .85em; color: var(--muted); }
.r-text ul, .r-text ol { padding-inline-start: 1.4em; }
.r-text a { color: var(--link); }
.r-text [data-b] { border-radius: 4px; transition: background-color .2s; }
.r-text [data-b].picking { background: var(--hl); box-shadow: 0 0 0 6px var(--hl); }

/* Highlights (CSS Highlight API: painted over the text, no extra elements). */
::highlight(lb-yellow) { background-color: rgb(255 210 0 / .36); }
::highlight(lb-green) { background-color: rgb(70 200 110 / .30); }
::highlight(lb-blue) { background-color: rgb(70 150 255 / .28); }
::highlight(lb-pink) { background-color: rgb(255 95 170 / .28); }
::highlight(lb-note) { text-decoration: underline dotted; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
::highlight(lb-search) { background-color: rgb(255 140 0 / .45); }
.r-text ::selection { background: rgb(70 150 255 / .3); }

/* Echo marks in the margin */
.r-text [data-b].echoed { position: relative; }
.echo-mark {
  position: absolute; inset-inline-end: -30px; top: .15em; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--mark); cursor: pointer;
}
.echo-mark svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .echo-mark { inset-inline-end: -18px; } }

/* End-of-chapter box */
.r-end { margin: 3em 0 1em; padding-top: 1.6em; border-top: 1px solid var(--rule); text-align: center; font-family: var(--sans); font-size: 15px; }
.r-end h2 { font-family: var(--serif); font-size: 1.3em; margin: 0 0 .8em; }
.r-cta {
  display: inline-block; margin: .4em 0; padding: 12px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 600 15px var(--sans); text-decoration: none;
}
.r-cta-sm { padding: 9px 16px; font-size: 14px; }
.buy { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.buy-btn { background: var(--accent); color: var(--accent-ink); text-decoration: none; padding: 9px 16px; border-radius: 6px; font: 600 14px var(--sans); }

/* ── Echo picker ── */
.r-echo {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 16px);
  padding: 10px; border: 1px solid var(--rule); border-radius: 14px; background: var(--page); box-shadow: 0 12px 36px rgb(0 0 0 / .25);
}
.r-echo-row { display: flex; gap: 2px; }
.r-echo-row button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 54px; padding: 8px 6px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 11px;
}
.r-echo-row button:hover, .r-echo-row button:focus-visible { background: var(--hl); }
.r-echo-row button.on { background: var(--accent); color: var(--accent-ink); }
.r-echo-row svg { width: 22px; height: 22px; }
.r-echo-foot { display: flex; justify-content: space-between; gap: 12px; padding: 6px 6px 0; font-size: 12px; color: var(--muted); }
.r-link { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; font-size: inherit; text-decoration: underline; }
@media (max-width: 420px) { .r-echo-row button { min-width: 46px; font-size: 10px; } }

.r-toast {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(var(--r-bar) + env(safe-area-inset-bottom) + 14px);
  display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: var(--page); font-size: 13px; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}
.r-toast .r-link { color: var(--page); font-weight: 600; }

/* ── Pages layout (CSS columns, one screen per page) ── */
html[data-r-layout='pages'] body.reader { overflow: hidden; height: 100dvh; }
html[data-r-layout='pages'] .r-viewport {
  position: fixed; inset: 0; overflow: hidden;
  padding: calc(var(--r-bar) + env(safe-area-inset-top) + 20px) 0 calc(var(--r-bar) + env(safe-area-inset-bottom) + 20px);
}
html[data-r-layout='pages'] .r-text {
  max-width: none; margin: 0; height: 100%; padding: 0;
  column-width: var(--r-colw, 100vw); column-gap: 0; column-fill: auto; transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
html[data-r-layout='pages'] .r-text > * { margin-inline: var(--r-gutter, 24px); }
html[data-r-layout='pages'] .r-text img { max-height: 60vh; }
html[data-r-layout='pages'] .echo-mark { inset-inline-end: -22px; }
[dir='rtl'] .r-back span { display: inline-block; transform: scaleX(-1); }

/* ── Trailer break (10 s, no skipping) ── */
.r-trailer { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 12px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: #0b0a09; color: #f4efe8; font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; }
.r-trailer[hidden] { display: none; }
body.r-trailer-open { overflow: hidden; }
.r-trailer-label { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.r-trailer-frame { position: relative; overflow: hidden; border-radius: 10px; background: #111; aspect-ratio: 16 / 9; width: min(calc(100vw - 32px), 960px, calc((100dvh - 190px) * 16 / 9)); box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
@media (max-aspect-ratio: 4/5) { .r-trailer-frame { aspect-ratio: 9 / 16; width: min(calc(100vw - 32px), calc((100dvh - 210px) * 9 / 16)); } }
.r-trailer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.r-trailer-actions button { min-height: 44px; padding: 10px 20px; border-radius: 999px; font: 600 15px/1.2 inherit; font-family: inherit; cursor: pointer; }
.r-trailer-save { border: 1px solid rgb(255 255 255 / .35); background: transparent; color: inherit; }
.r-trailer-save:disabled { opacity: 1; border-color: transparent; background: rgb(255 255 255 / .12); cursor: default; }
.r-trailer-go { border: 0; background: #f4efe8; color: #1b1713; min-width: 220px; }
.r-trailer-go:disabled { background: rgb(255 255 255 / .14); color: rgb(244 239 232 / .75); cursor: default; }
.r-trailer-visit { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: #2f7558; color: #fff; font: 600 15px/1.2 inherit; font-family: inherit; text-decoration: none; }
.r-trailer-visit[hidden] { display: none; }
.r-trailer-visit:hover { background: #378563; }
.r-trailer-coupon { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.r-trailer-coupon[hidden] { display: none; }
.r-trailer-why { margin: 0; max-width: 34em; font-size: 12px; text-align: center; opacity: .55; }
html[dir='rtl']:active-view-transition-type(fwd)::view-transition-old(root) { animation-name: r-out-end; }
html[dir='rtl']:active-view-transition-type(fwd)::view-transition-new(root) { animation-name: r-in-start; }
html[dir='rtl']:active-view-transition-type(back)::view-transition-old(root) { animation-name: r-out-start; }
html[dir='rtl']:active-view-transition-type(back)::view-transition-new(root) { animation-name: r-in-end; }

/* ── Selection toolbar, note editor, dictionary, bookmark ribbon ── */
.r-sel {
  position: fixed; z-index: 55; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 12px;
  background: var(--ink); color: var(--page); box-shadow: 0 10px 30px rgb(0 0 0 / .35); font: 600 13px var(--sans);
}
.r-sel button { border: 0; background: none; color: inherit; cursor: pointer; padding: 8px 10px; border-radius: 8px; font: inherit; display: inline-grid; place-items: center; }
.r-sel button:hover, .r-sel button.on { background: color-mix(in srgb, var(--page) 16%, transparent); }
.r-sel .r-sw { width: 30px; height: 30px; padding: 0; margin: 0 2px; border-radius: 50%; }
.r-sel .r-sw::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.r-sel .r-sw.on::after { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--page); }
.r-sw-yellow { --sw: #ffd23f; } .r-sw-green { --sw: #5cc97a; } .r-sw-blue { --sw: #5aa0ff; } .r-sw-pink { --sw: #ff6fb2; }
.r-note {
  position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 24px));
  padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--page); box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
.r-note blockquote { margin: 0 0 10px; padding-inline-start: 10px; border-inline-start: 3px solid var(--accent); color: var(--muted); font: italic 400 14px/1.45 var(--r-face); max-height: 7em; overflow: auto; }
.r-note textarea { width: 100%; padding: 10px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); font: 15px/1.45 var(--sans); resize: vertical; }
.r-note-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 10px; }
.r-define {
  position: fixed; z-index: 56; width: min(360px, calc(100vw - 16px)); max-height: 50vh; overflow: auto; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--page); color: var(--ink); box-shadow: 0 12px 36px rgb(0 0 0 / .28); font-size: 14px;
}
.r-define-word { margin: 0 0 4px; font: 600 17px var(--serif); }
.r-define-pos { margin: 8px 0 2px; color: var(--muted); font-size: 12px; font-style: italic; }
.r-define ol { margin: 0; padding-inline-start: 1.3em; }
.r-define li { margin: 3px 0; }
.r-define-src { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.r-bm-btn[aria-pressed='true'] svg { fill: var(--accent); stroke: var(--accent); }
.r-ribbon {
  position: fixed; z-index: 15; top: 0; inset-inline-end: 28px; width: 16px; height: 30px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); opacity: .9; pointer-events: none;
}

/* Drawer tabs */
.r-tabs { display: flex; gap: 2px; padding: 4px 12px 8px; border-bottom: 1px solid var(--rule); }
.r-tabs button { flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 8px; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; }
.r-tabs button[aria-selected='true'] { background: var(--hl); color: var(--ink); }
.r-tab > p { padding: 0 18px; }
.r-tab-empty { padding: 18px !important; color: var(--muted); font-size: 14px; }
.r-tab-foot { padding: 8px 18px 0 !important; font-size: 14px; }
.r-ann { display: flex; align-items: flex-start; border-bottom: 1px solid var(--rule); }
.r-ann-go, .r-hit { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; border: 0; background: none; color: var(--ink); text-align: start; cursor: pointer; font: 14px/1.4 var(--sans); }
.r-ann-go:hover, .r-hit:hover { background: var(--hl); }
.r-ann-go small, .r-hit small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.r-ann-q { font: 15px/1.45 var(--r-face); padding-inline-start: 8px; border-inline-start: 3px solid var(--rule); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.r-ann-yellow .r-ann-q { border-color: #ffd23f; } .r-ann-green .r-ann-q { border-color: #5cc97a; } .r-ann-blue .r-ann-q { border-color: #5aa0ff; } .r-ann-pink .r-ann-q { border-color: #ff6fb2; }
.r-ann-n { color: var(--muted); white-space: pre-wrap; }
.r-ann-x { border: 0; background: none; color: var(--muted); font-size: 18px; padding: 10px 14px; cursor: pointer; }
.r-hit { border-bottom: 1px solid var(--rule); }
.r-hit mark { background: rgb(255 140 0 / .4); color: inherit; border-radius: 2px; }
.r-search { padding: 12px 18px 4px; }
.r-search input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: transparent; color: var(--ink); font: 15px var(--sans); }

/* ── Read aloud ── */
::highlight(lb-speak) { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.r-listen {
  position: fixed; z-index: 22; left: 50%; transform: translateX(-50%); bottom: calc(var(--r-bar) + env(safe-area-inset-bottom) + 10px);
  width: min(460px, calc(100vw - 16px)); padding: 6px 8px; border-radius: 16px; background: var(--ink); color: var(--page);
  box-shadow: 0 10px 30px rgb(0 0 0 / .3); font: 600 13px var(--sans); transition: bottom .25s ease;
}
.chrome-hidden .r-listen { bottom: calc(env(safe-area-inset-bottom) + 12px); }
.r-listen-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.r-listen button, .r-listen select { border: 0; background: none; color: inherit; cursor: pointer; border-radius: 10px; font: inherit; }
.r-listen button { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; }
.r-listen button:hover { background: color-mix(in srgb, var(--page) 15%, transparent); }
.r-listen-play { width: 48px; height: 48px !important; border-radius: 50% !important; background: color-mix(in srgb, var(--page) 14%, transparent) !important; }
.r-listen .i-play { display: none; }
.r-listen.paused .i-play { display: block; }
.r-listen.paused .i-pause { display: none; }
.r-listen-rate { min-width: 46px !important; font-variant-numeric: tabular-nums; }
.r-listen select { max-width: 120px; padding: 8px 4px; appearance: none; text-overflow: ellipsis; }
.r-listen select option { color: #222; }
.r-listen-where { margin: 2px 6px 4px; font-weight: 400; font-size: 12px; text-align: center; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-listen-where a { color: inherit; font-weight: 600; }
body.r-listening .r-backpill { display: none; }
.r-offline { padding: 4px 18px 8px; font-size: 14px; }

/* An author's preview of an uploaded draft: the banner, and where the free sample ends. */
.r-preview { max-width: var(--r-measure); margin: 0 auto 1em; padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--accent, #c9852f) 18%, transparent); color: var(--ink); font: 500 .9rem/1.4 var(--sans, system-ui); }
.r-preview a { color: inherit; text-decoration: underline; }
.r-sample-mark { margin: 1.6em 0; padding: 8px 0; border-block: 1px dashed var(--rule); text-align: center; font: 500 .8rem var(--sans, system-ui); color: var(--muted); text-indent: 0; }