/* Чтение на сайте (change web-reader-spike). Палитры и пресеты — как в приложении (ReaderColors, ReaderSettings). */

@font-face { font-family: "Literata"; src: url("core/fonts/literata/Literata.ttf") format("truetype"); font-weight: 200 900; font-display: block; }
@font-face { font-family: "Literata"; src: url("core/fonts/literata/Literata-Italic.ttf") format("truetype"); font-weight: 200 900; font-style: italic; font-display: block; }
@font-face { font-family: "Source Serif"; src: url("core/fonts/source_serif/SourceSerif4.ttf") format("truetype"); font-weight: 200 900; font-display: block; }
@font-face { font-family: "Source Serif"; src: url("core/fonts/source_serif/SourceSerif4-Italic.ttf") format("truetype"); font-weight: 200 900; font-style: italic; font-display: block; }
@font-face { font-family: "PT Serif"; src: url("core/fonts/pt_serif/Regular.ttf"); font-display: block; }
@font-face { font-family: "PT Serif"; src: url("core/fonts/pt_serif/Italic.ttf"); font-style: italic; font-display: block; }
@font-face { font-family: "PT Serif"; src: url("core/fonts/pt_serif/Bold.ttf"); font-weight: 700; font-display: block; }
@font-face { font-family: "PT Serif"; src: url("core/fonts/pt_serif/BoldItalic.ttf"); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: "STIX Two Math"; src: url("core/fonts/stix/STIXTwoMath.otf"); font-display: block; }
@font-face { font-family: "PT Sans"; src: url("core/fonts/pt_sans/Regular.ttf"); font-display: block; }
@font-face { font-family: "PT Sans"; src: url("core/fonts/pt_sans/Italic.ttf"); font-style: italic; font-display: block; }
@font-face { font-family: "PT Sans"; src: url("core/fonts/pt_sans/Bold.ttf"); font-weight: 700; font-display: block; }
@font-face { font-family: "PT Sans"; src: url("core/fonts/pt_sans/BoldItalic.ttf"); font-weight: 700; font-style: italic; font-display: block; }

:root {
  /* Маркер цитаты — охра «Форзаца», на тёмных темах чуть прозрачнее; выделение — цвет текста, нейтрально */
  --marker: rgb(196 154 82 / .32);
  --paper: #FAFAFA; --ink: #1C1C1C; --muted: #6E6E6E; --line: #E5E5E5; --sheet: #FFFFFF; --link: #94621F;
  --ui: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --book: "Literata", serif;
  --size: 18px; --leading: 1.62; --justify: justify;
}
body[data-theme="sepia"]  { --paper: #F4ECD8; --ink: #5B4636; --muted: #7A6650; --line: #E2D6BC; --sheet: #FBF5E8; --link: #8A5A1C; }
body[data-theme="dark"], body[data-theme="wave"], body[data-theme="forest"] { --marker: rgb(196 154 82 / .30); }
body[data-theme="dark"]   { --paper: #121212; --ink: #CFCFCF; --muted: #8E8E8E; --line: #333333; --sheet: #1E1E1E; --link: #C49A52; }
body[data-theme="dawn"]   { --paper: #FAF4ED; --ink: #575279; --muted: #6E6A86; --line: #E6DDD6; --sheet: #FFFAF3; --link: #8F5E1D; }
body[data-theme="wave"]   { --paper: #1F1F28; --ink: #DCD7BA; --muted: #9A9585; --line: #363646; --sheet: #2A2A37; --link: #DCA561; }
body[data-theme="forest"] { --paper: #2D353B; --ink: #D3C6AA; --muted: #9DA9A0; --line: #475258; --sheet: #343F44; --link: #DBBC7F; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: var(--ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
/* Тексты обоих языков в разметке, виден один — как на главной */
html[lang="ru"] [data-lang="en"], html:not([lang="ru"]) [data-lang="ru"] { display: none !important; }

/* Библиотека — в стиле главной сайта: Literata в заголовках, Golos Text в интерфейсе */
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("/fonts/noto-serif.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Noto Serif"; src: url("/fonts/noto-serif-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: block; }

.library { max-width: 1120px; min-height: 100vh; margin: 0 auto; padding: 20px clamp(20px, 4vw, 48px) 64px; display: flex; flex-direction: column; }
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 0; margin: -4px 0; color: var(--ink); text-decoration: none; font: 700 22px/1 "Literata", serif; }
.brand img { border-radius: 9px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .08); }
.open-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer; font: 500 15px/1 var(--ui); transition: transform .15s, opacity .15s; }
.open-button:hover { opacity: .88; }
.open-button:active { transform: scale(.97); }
.open-button.big { min-height: 50px; padding: 0 30px; font-size: 17px; }

.no-wasm-gc .open-button, .no-wasm-gc .empty .hint { display: none !important; }
.empty .unsupported { margin: 0; }
.unsupported { margin: 20px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--line); font: 400 15px/1.5 var(--ui); max-width: 46em; }

/* Пустая библиотека: слева приглашение, справа — страница книги; на узком экране — одно под другим */
.empty { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 7vw, 112px); align-items: center; padding: clamp(32px, 6vh, 96px) 0; }
.empty h1 { font: 700 clamp(34px, 3.7vw, 52px)/1.08 "Literata", serif; letter-spacing: -0.01em; margin: 0; max-width: 14em; text-wrap: balance; }
.empty .lead { font: 400 clamp(18px, 1.6vw, 21px)/1.55 "Literata", serif; margin: 24px 0 36px; max-width: 30em; }
.empty .hint { color: var(--muted); font: 400 15px/1.4 var(--ui); margin: 14px 0 0; }
@media (hover: none) { .empty .hint { display: none; } }
.empty .privacy { color: var(--muted); font: 400 14px/1.55 var(--ui); margin: 48px 0 0; max-width: 34em; padding-top: 18px; border-top: 1px solid var(--line); }
.empty-book { position: relative; width: clamp(280px, 26vw, 360px); aspect-ratio: 360 / 520; container-type: inline-size; }
.empty-book .page { position: absolute; inset: 0; background: var(--sheet); border-radius: 6px; padding: 9% 9% 7%; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 48px rgb(0 0 0 / .12);
  /* Кегль — от ширины страницы: иллюстрация масштабируется целиком */
  font: 400 3.55cqw/1.6 "Literata", serif; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.empty-book .page.under { transform: rotate(3.2deg) translate(4%, 1%); opacity: .7; }
.empty-book .page-head { text-align: center; font: 400 0.78em/1 var(--ui); color: var(--muted); margin-bottom: 2.2em; }
.empty-book .page-title { text-align: center; font-weight: 700; font-size: 1.15em; line-height: 1.35; margin-bottom: 1.4em; }
.empty-book .page-title span { font-weight: 400; font-style: italic; font-size: 0.87em; }
.empty-book p { margin: 0; text-indent: 1.5em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.empty-book .page-folio { margin-top: auto; text-align: center; font: 400 0.72em/1 var(--ui); color: var(--muted); padding-top: 1em; }
@media (max-width: 860px) {
  .empty { grid-template-columns: 1fr; justify-items: start; }
  .empty-book { justify-self: center; width: min(320px, 80vw); }
}

/* Полка */
.books { padding-top: 8px; }
.lib-note { color: var(--muted); font: 400 14px/1.5 var(--ui); margin: 12px 0 36px; max-width: 46em; }
.shelf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 13vw, 176px), 1fr)); gap: 36px clamp(20px, 2.4vw, 32px); }
.shelf li { cursor: pointer; }
.cover { aspect-ratio: 2 / 3; border-radius: 3px 6px 6px 3px; background: var(--line) center / cover no-repeat; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 6px 18px rgb(0 0 0 / .10);
  display: flex; align-items: flex-end; padding: 12px; font: 600 15px/1.25 "Literata", serif; color: var(--ink); overflow: hidden; transition: transform .2s; }
.shelf li:hover .cover { transform: translateY(-3px); }
.shelf .title { font: 500 14px/1.3 var(--ui); margin-top: 12px; }
.shelf .author { font: 400 13px/1.3 var(--ui); color: var(--muted); margin-top: 2px; }
/* «Продолжить» — размеры ContinueCard приложения */
.continue { display: flex; align-items: center; gap: 18px; max-width: 640px; cursor: pointer; }
.continue .cover { width: 92px; flex: none; padding: 8px; font-size: 12px; }
.continue:hover .cover { transform: translateY(-3px); }
.continue-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.continue-label { display: flex; justify-content: space-between; align-items: baseline; font: 500 12px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.continue-title { font: 600 21px/25px "Literata", serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.continue-sub { font: 400 14px/1.35 var(--ui); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.continue-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.continue-bar { height: 2px; border-radius: 1px; background: var(--line); }
.continue-bar i { display: block; height: 100%; border-radius: 1px; background: var(--ink); }
.continue-row { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1.3 var(--ui); color: var(--muted); }
.continue-line { border: 0; border-top: 1px solid var(--line); margin: 28px 0 36px; }
.shelf .remove, .continue .remove { position: relative; float: right; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px 4px 8px; opacity: 0; transition: opacity .15s; }
/* Рисунок «×» — 20 px, цель касания — 44 × 44 */
.shelf .remove::before, .continue .remove::before { content: ""; position: absolute; inset: -11px -12px; }
.shelf li:hover .remove, .shelf .remove:focus-visible, .continue:hover .remove, .continue .remove:focus-visible { opacity: 1; }
@media (hover: none) { .shelf .remove, .continue .remove { opacity: 1; } }
.drop { position: fixed; inset: 16px; border: 2px dashed var(--muted); border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(2px); z-index: 10; }
.drop span { font: 500 20px/1.3 var(--ui); }

/* Чтение: рамка страницы, дорожка глав; листание — сдвиг дорожки (только композитинг) */
.reader { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
.frame { position: absolute; overflow: hidden; outline: none; touch-action: pan-y; user-select: text; }
.track { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.flow { position: absolute; top: 0; height: 100%; column-fill: auto; }
.footer { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }

/* Типографика книги — как в приложении: выключка, переносы по языку, отступ абзаца, без висячих строк */
.flow { font-family: var(--book); font-size: var(--size); line-height: var(--leading); orphans: 2; widows: 2; font-kerning: normal; font-variant-ligatures: common-ligatures; }
.flow p { margin: 0; text-indent: 1.5em; text-align: var(--justify); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 2; }
.flow p.subtitle { text-align: center; text-indent: 0; font-weight: 700; margin: 0.6em 0; break-after: avoid; }
.flow p.epigraph, .flow p.author { text-indent: 0; margin-left: 30%; text-align: left; font-size: 0.92em; font-style: italic; }
.flow p.author { text-align: right; font-style: normal; font-weight: 600; margin-bottom: 1em; }
.flow p.cite { margin-left: 1.5em; font-size: 0.95em; }
.flow p.verse { text-indent: 0; text-align: left; margin-left: 12%; hyphens: manual; }
/* Пункт списка (change markdown-txt): без красной строки и выключки, висячий отступ под маркер, вложенные — правее */
.flow p.li { text-indent: 0; text-align: left; padding-left: calc(var(--lvl, 0) * 1.5em + 1.3em); margin: 0.15em 0; }
.flow p.li .mark { display: inline-block; min-width: 1.3em; margin-left: -1.3em; text-indent: 0; }
.flow p.li .mark.task { position: relative; color: transparent; }
/* Квадратик задачи — векторной маской цветом текста; середина — на высоте середины строчных */
.flow p.li .mark.task::before { content: ""; position: absolute; left: 0.04em; top: calc((var(--leading) - 1) * 0.5em + 0.14em); width: 0.8em; height: 0.8em; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.25' y='1.25' width='13.5' height='13.5' rx='3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.25' y='1.25' width='13.5' height='13.5' rx='3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.flow p.li .mark.done::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.25' y='1.25' width='13.5' height='13.5' rx='3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.7 8.2l2.3 2.4 4.4-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.25' y='1.25' width='13.5' height='13.5' rx='3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.7 8.2l2.3 2.4 4.4-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow p.li .done { color: var(--muted); }
/* Зачёркивание — тонкой линией через середину строчных букв: шрифтовая у засечных шрифтов толстая и высоко */
.flow s { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 60% / 100% 0.06em; }
.flow pre { font: 0.82em/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; margin: 0.6em 0; break-inside: avoid; }
.flow .h { text-align: center; text-indent: 0; font-weight: 700; line-height: 1.3; margin: 1.6em 0 1em; break-after: avoid; break-inside: avoid; hyphens: manual; text-wrap: balance; }
.flow .h1 { font-size: 1.45em; margin-top: 2.2em; }
.flow .h2 { font-size: 1.22em; }
.flow .h3, .flow .h4, .flow .h5, .flow .h6 { font-size: 1.06em; }
.flow .empty { height: calc(var(--leading) * 1em); }
.flow figure { margin: 0.8em 0; text-align: center; break-inside: avoid; }
.flow figure img { display: block; margin: 0 auto; max-width: 100%; max-height: calc(var(--page-h) - 2em); object-fit: contain; }
.flow a.noteref { color: var(--link); text-decoration: none; font-size: 0.7em; vertical-align: super; line-height: 0; padding: 0 0.1em; }
.flow a.link { color: var(--link); text-decoration: none; }
.flow code { font: 0.88em ui-monospace, Menlo, monospace; }
/* Растягивает скобки и черты браузер — по таблице MATH шрифта; у шрифтов книги её нет, поэтому формулы — STIX Two Math. */
.flow math, .note math { font-family: "STIX Two Math", math; font-size: 1.05em; }
.flow .formula { margin: 0.5em 0; text-align: center; break-inside: avoid; overflow-x: auto; }
.flow table { border-collapse: collapse; width: 100%; margin: 0.8em 0; font-size: 0.9em; line-height: 1.4; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.flow th, .flow td { text-align: left; vertical-align: top; padding: 0.35em 0.6em 0.35em 0; border-bottom: 0.5px solid var(--line); hyphens: auto; }
.flow thead th { border-bottom: 1px solid var(--ink); }
.flow tr { break-inside: avoid; }

/* Меню, оглавление, «Aa», сноска — интерфейс приложения (ReaderMenu, TocScreen, SettingsSheet, NoteSheet); размеры — dp приложения */
@font-face { font-family: "L Noto Serif"; src: url("/fonts/noto-serif-label.woff2") format("woff2"); }
@font-face { font-family: "L Literata"; src: url("/fonts/literata-label.woff2") format("woff2"); }
@font-face { font-family: "L PT Serif"; src: url("/fonts/pt-serif-label.woff2") format("woff2"); }
@font-face { font-family: "L Source Serif"; src: url("/fonts/source-serif-label.woff2") format("woff2"); }
@font-face { font-family: "L PT Sans"; src: url("/fonts/pt-sans-label.woff2") format("woff2"); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* Фокус на странице — для стрелок и Enter; рамка вокруг текста только мешала бы читать */
.frame:focus-visible { outline: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.icon-button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Меню с клавиатуры: кнопка видна только в фокусе */
.skip { position: absolute; z-index: 5; left: 12px; top: 8px; display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--ui); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.skip-right { left: auto; right: 12px; }
.reader.menu-open .skip { display: none; }

.bar { position: absolute; left: 0; right: 0; z-index: 3; background: var(--paper); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility 0s .15s, background-color .2s; }
.reader.menu-open .bar { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s, background-color .2s; }
.bar-top { top: 0; display: flex; align-items: center; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 4px 0; border-bottom: 1px solid var(--line); transform: translateY(-50%); }
.bar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0 8px; }
.bar-title b { font-weight: 500; font-size: 15px; line-height: 1.3; }
.bar-title span { font-size: 12px; line-height: 1.3; color: var(--muted); }
.bar-title b, .bar-title span, .bar-info span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-bottom { bottom: 0; border-top: 1px solid var(--line); padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; transform: translateY(50%); }
/* На широком экране — содержимое панели не шире колонки, как список оглавления */
.bar-bottom > * { width: 100%; max-width: 640px; margin: 0 auto; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bar-info b { font-weight: 500; font-size: 14px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.bar-info span { font-size: 12px; line-height: 1.3; color: var(--muted); }
.aa { flex: none; width: 52px; height: 44px; border-radius: 22px; border: 1px solid var(--line); color: var(--ink); font: 400 18px/1 "L Noto Serif", serif; }

/* Ползунок: трек 2 dp, бегунок 16 dp, отметки начала глав; место в панели — 28 dp, цель касания — 44 px (поле выходит за него) */
.slider-box { position: relative; height: 28px; }
.slider { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: -8px 0; background: transparent; cursor: pointer; --p: 0%; }
.slider::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) var(--p), transparent var(--p)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--ink); }
.slider::-moz-range-track { height: 2px; background: transparent; }
.slider::-moz-range-progress { height: 2px; background: var(--ink); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--ink); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.ticks { position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--line); }
.ticks i { position: absolute; top: -3px; width: 1px; height: 8px; background: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Панели — нативный <dialog>: фокус внутри, остальное недоступно, Esc закрывает */
dialog { color: var(--ink); border: 0; padding: 0; margin: 0; max-width: none; max-height: none; }
dialog::backdrop { background: transparent; }

/* «Aa» — снизу, не шире 560 dp; текст за ней виден и меняется сразу */
.sheet { position: fixed; inset: auto 0 0; width: min(560px, 100%); margin: 0 auto; background: var(--sheet); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 24px rgb(0 0 0 / .12);
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom)); flex-direction: column; gap: 18px; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(105%); transition: transform .18s, display .18s allow-discrete, overlay .18s allow-discrete, background-color .2s; }
.sheet[open] { display: flex; transform: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), display .22s allow-discrete, overlay .22s allow-discrete, background-color .2s; }
@starting-style { .sheet[open] { transform: translateY(105%); } }
.handle { flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
.sheet button { color: var(--ink); }
.themes { display: grid; grid-template-columns: repeat(6, 1fr); }
.theme { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.theme .ring { padding: 4px; border-radius: 50%; border: 2px solid transparent; }
.theme[aria-checked="true"] .ring { border-color: var(--ink); }
.theme .dot { width: min(37px, 9vw); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 16px/1 "L Noto Serif", serif; }
.theme small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.theme:focus-visible { outline: none; }
.theme:focus-visible .ring { outline: 2px solid var(--muted); outline-offset: 1px; }
.dot[data-t="light"]  { background: #FAFAFA; color: #1C1C1C; box-shadow: inset 0 0 0 1px #E5E5E5; }
.dot[data-t="sepia"]  { background: #F4ECD8; color: #5B4636; box-shadow: inset 0 0 0 1px #E2D6BC; }
.dot[data-t="dark"]   { background: #121212; color: #CFCFCF; box-shadow: inset 0 0 0 1px #333333; }
.dot[data-t="dawn"]   { background: #FAF4ED; color: #575279; box-shadow: inset 0 0 0 1px #E6DDD6; }
.dot[data-t="wave"]   { background: #1F1F28; color: #DCD7BA; box-shadow: inset 0 0 0 1px #363646; }
.dot[data-t="forest"] { background: #2D353B; color: #D3C6AA; box-shadow: inset 0 0 0 1px #475258; }
.row { display: flex; gap: 12px; }
.seg { display: flex; height: 46px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg > * { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.seg > [aria-checked="true"] { background: var(--ink); color: var(--sheet) !important; }
.seg button:focus-visible { outline-offset: -3px; border-radius: 10px; }
.seg svg { width: 20px; height: 20px; }
.size { flex: 1; }
.size button:disabled { opacity: .35; cursor: default; }
.size .num { flex: 0 0 44px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.a-small { font: 400 14px serif; } .a-large { font: 400 22px serif; }
.align { flex: none; width: 96px; }
.fonts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; }
.fonts::-webkit-scrollbar { display: none; }
.font { flex: none; height: 44px; border-radius: 22px; border: 1px solid var(--line); padding: 0 16px; font-size: 15px; white-space: nowrap; }
.font[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet) !important; }
.labeled { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.labeled > span { font-size: 12px; color: var(--muted); }

/* Сноска — та же панель снизу, текст книги */
.note { gap: 12px; max-height: 60vh; }
.note-body { font: calc(var(--size) * 0.95)/1.5 var(--book); }
.note-body p { margin: 0 0 0.4em; text-align: var(--justify); hyphens: auto; -webkit-hyphens: auto; }
.note-body .h { font-weight: 700; margin-bottom: 0.4em; }
.note-body img { max-width: 100%; }

.mark-list { list-style: none; margin: 0; padding: 0; }
.mark-list button { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; text-align: left; }
.mark-list button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mark-list .h { display: flex; align-items: center; }
.mark-list .t { flex: 1; min-width: 0; font: 400 16px/1.35 var(--book); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark-list .n { flex: none; width: 44px; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mark-list .s { font-size: 13px; line-height: 18px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Поиск: поле в оглавлении, экран поиска поверх */
.search-field { display: flex; align-items: center; gap: 10px; height: 44px; margin: 8px 20px 0; padding: 0 14px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.search-field svg { width: 18px; height: 18px; }
.search-head { display: flex; align-items: center; height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.search-head input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--ink); font: 400 17px var(--ui); outline: none; }
.search-head input::placeholder { color: var(--muted); }
.search-head input::-webkit-search-cancel-button { display: none; }
.search-status { margin: 0; padding: 14px 20px 6px; font-size: 13px; color: var(--muted); }
.search-list { list-style: none; margin: 0; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); }
.search-list button { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; text-align: left; }
.search-list button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.search-list .s { font: 400 16px/23px var(--book); color: color-mix(in srgb, var(--ink) 78%, transparent); }
.search-list .s b { color: var(--ink); }
.search-list .m { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .toc-column { display: flex; flex-direction: column; }
::highlight(search) { background-color: color-mix(in srgb, var(--ink) 18%, transparent); }

/* «← Вернуться · с. N» — на месте номера страницы, текст не закрывает */
.return-pill { position: absolute; left: 50%; bottom: 3px; z-index: 2; translate: -50% 0; padding: 10px 18px; border-radius: 20px; background: var(--ink); color: var(--paper); font: 400 14px/1.2 var(--ui); transition: opacity .15s; }
/* Рисунок — 37 px, цель касания — 47: невидимое поле выше и до края окна */
.return-pill::before { content: ""; position: absolute; inset: -7px 0 -3px; }
@starting-style { .return-pill { opacity: 0; } }
.reader.returning .footer { visibility: hidden; }

/* Оглавление — во весь экран, колонкой не шире 640 dp */
.screen-dialog { position: fixed; inset: 0; width: 100%; height: 100%; background: var(--paper); overflow: hidden; opacity: 0; transform: translateY(10%);
  transition: opacity .15s, transform .15s, display .15s allow-discrete, overlay .15s allow-discrete; }
.screen-dialog[open] { display: block; opacity: 1; transform: none; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), display .25s allow-discrete, overlay .25s allow-discrete; }
@starting-style { .screen-dialog[open] { opacity: 0; transform: translateY(10%); } }
.toc-column { max-width: 640px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.toc-head { display: flex; align-items: center; padding: 4px 4px 0 8px; }
.tabs { flex: 1; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] { flex: none; min-height: 44px; padding: 10px 12px; border-radius: 8px; font: 500 17px/1.2 var(--ui); color: var(--muted); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; }
.toc-book { display: flex; align-items: center; gap: 14px; padding: 12px 20px 22px; border-bottom: 1px solid var(--line); }
.toc-cover { flex: none; width: 44px; height: 66px; border-radius: 2px 4px 4px 2px; background: var(--line) center / cover no-repeat; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.toc-book b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 18px/1.3 var(--book); }
.toc-book span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.panel { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 8px 20px; text-align: left; }
.toc-list button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.toc-list .t { flex: 1; min-width: 0; font: 400 16px/1.35 var(--book); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toc-list [aria-current] .t { font-weight: 700; }
.toc-list [aria-current] .t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 12px; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.toc-list .n { flex: none; width: 44px; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px 80px; }
.panel-empty b { font: 400 20px/1.3 var(--book); }
.panel-empty p { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); max-width: 22em; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }

/* Ленточка-ляссе закладки: в правом поле, свисает с верхнего края окна (рамка страницы — ниже на 44 px), хвост «ласточкой» */
:root { --ribbon: #8E2F2A; }
body[data-theme="dark"], body[data-theme="wave"], body[data-theme="forest"] { --ribbon: #B5483F; }
.ribbons-clip { position: absolute; overflow: hidden; pointer-events: none; z-index: 1; }
.ribbons { position: absolute; will-change: transform; }
.ribbon { position: absolute; top: -56px; width: 16px; height: 56px; background: var(--ribbon); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); pointer-events: none; }
/* Ленточка просто выезжает сверху и уходит вверх; мышью бледная ленточка над углом при нажатии наливается цветом */
.ribbon.ghost { opacity: .28; animation: ribbon-fade .15s ease-out; }
.ribbon.fill { animation: ribbon-fill .2s ease-out; }
.reader.corner, .reader.corner .frame { cursor: pointer; }
.ribbon.drop { animation: ribbon-drop .28s cubic-bezier(.2, .8, .2, 1); }
.ribbon.leaving { animation: ribbon-up .18s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes ribbon-drop { from { translate: 0 -56px; } }
@keyframes ribbon-up { to { translate: 0 -56px; } }
@keyframes ribbon-fade { from { opacity: 0; } }
@keyframes ribbon-fill { from { opacity: .28; } }

/* Выделение и цитаты */
.flow ::selection { background: color-mix(in srgb, var(--ink) 14%, transparent); }
::highlight(quote) { background-color: var(--marker); }
.selection-bar { position: fixed; left: 0; top: 0; z-index: 4; display: flex; align-items: center; background: var(--ink); color: var(--paper); border-radius: 14px; box-shadow: 0 10px 28px rgb(0 0 0 / .22);
  transform-origin: 50% 100%; transition: opacity .12s, scale .25s cubic-bezier(.3, 1.5, .5, 1); }
.selection-bar.below { transform-origin: 50% 0; }
@starting-style { .selection-bar { opacity: 0; scale: .85; } }
.selection-bar button { color: var(--paper); font: 500 15px/1 var(--ui); padding: 14px 16px; min-height: 44px; }
.selection-bar button + button { border-left: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
.selection-bar button:focus-visible { outline-color: var(--paper); outline-offset: -4px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 6; translate: -50% 0; background: var(--ink); color: var(--paper); font: 500 14px/1.3 var(--ui); padding: 12px 18px; border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); transition: opacity .15s, translate .2s; }
@starting-style { .toast { opacity: 0; translate: -50% 8px; } }
.quote-list { list-style: none; margin: 0; padding: 0; }
.quote-list button { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 14px 37px; text-align: left; position: relative; }
.quote-list button::before { content: ""; position: absolute; left: 20px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: #C49A52; }
.quote-list button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.quote-list .q { font: 400 16px/23px var(--book); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.quote-list .m { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Финальная страница — как FinishPage приложения: обложка, «Прочитано», статистика, кнопки-«пилюли» */
.finish { position: absolute; top: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px; }
.finish-cover { flex: none; height: min(42%, 300px); aspect-ratio: 2 / 3; text-align: left; }
.finish-title { margin: 36px 0 0; font: 400 28px/1.2 "Literata", serif; }
.finish-stats { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.finish-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
/* Спасибо — тихо, у нижнего края, как выходные данные книги. */
.finish-thanks { position: absolute; left: 24px; right: 24px; bottom: 24px; margin: 0 auto; max-width: 30em; font-size: 13px; line-height: 1.5; color: var(--muted); }
.finish-thanks a { color: var(--link); text-decoration: none; }
.pill { min-height: 44px; padding: 0 22px; border-radius: 22px; border: 1px solid var(--line); font-size: 15px; }
.pill:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* Справка «Клавиши» — карточка по центру над притемнённой страницей (как help десктопа): одна колонка, от 976 px — две */
.help { width: min(472px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; display: flex; flex-direction: column; background: var(--sheet); border-radius: 22px; box-shadow: 0 12px 40px rgb(0 0 0 / .25);
  opacity: 0; transition: opacity .15s, display .15s allow-discrete, overlay .15s allow-discrete; }
.help:not([open]) { display: none; }
.help[open] { opacity: 1; transition: opacity .2s, display .2s allow-discrete, overlay .2s allow-discrete; }
@starting-style { .help[open] { opacity: 0; } }
.help::backdrop { background: rgb(0 0 0 / 0); transition: background-color .15s, display .15s allow-discrete, overlay .15s allow-discrete; }
.help[open]::backdrop { background: rgb(0 0 0 / .4); transition-duration: .2s; }
@starting-style { .help[open]::backdrop { background: rgb(0 0 0 / 0); } }
.help-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0 24px; }
.help-head h2 { margin: 0; font: 600 20px/1.3 var(--ui); }
.help-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 8px; outline: none; }
.help section { break-inside: avoid; padding-bottom: 16px; }
.help h3 { margin: 0 0 8px; font: 500 13px/1.3 var(--ui); color: var(--muted); }
.help dl { margin: 0; display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 6px 12px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.help dt { display: flex; flex-wrap: wrap; gap: 4px; }
.help dt:empty { display: none; }
.help dt:empty + dd { grid-column: 1 / -1; }
.help dd { margin: 0; }
.help kbd { display: inline-block; min-width: 24px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; text-align: center; font: 500 13px/1.4 var(--ui); white-space: nowrap; }
.help-support { flex: none; margin: 0 24px; padding: 12px 0 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.help-support a { display: inline-block; padding: 14px 0; margin: -14px 0; color: var(--link); text-decoration: none; }
@media (min-width: 976px) {
  .help { width: 928px; }
  .help-body { columns: 2; column-gap: 40px; }
}
@media (max-width: 520px) {
  .help dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .help dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar, .sheet, .screen-dialog, .selection-bar, .toast, .help, .help::backdrop { transition: none !important; }
  .ribbon { animation-duration: 1ms !important; }
}