/* Mobile-aligned Web reader. Loaded after the legacy stylesheet so the home
   and import surfaces stay untouched while the reader can evolve independently. */
.reader-v2{
  --reader-bg:#f4eee4;
  --reader-paper:#fbf7ef;
  --reader-raised:#fffdf8;
  --reader-ink:#332d24;
  --reader-secondary:#6c6151;
  --reader-muted:#958876;
  --reader-line:#e5dac7;
  --reader-accent:#b45f2e;
  --reader-highlight:#f3dfca;
  --reader-focus:#2763c4;
  --reader-brightness:1;
  --reader-auto-toolbar-space:66px;
  --reader-tools-top:calc(var(--reader-toolbar-height,63px) + 18px);
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:var(--reader-bg);
  color:var(--reader-ink);
}
.reader-v2[data-theme="light"]{
  --reader-bg:#f2f3f5;
  --reader-paper:#fff;
  --reader-raised:#fff;
  --reader-ink:#24272c;
  --reader-secondary:#5c626b;
  --reader-muted:#7d848e;
  --reader-line:#e1e4e8;
  --reader-highlight:#f9e7d6;
}
.reader-v2[data-theme="night"]{
  --reader-bg:#181714;
  --reader-paper:#201e1a;
  --reader-raised:#292620;
  --reader-ink:#f2eadc;
  --reader-secondary:#d1c5b3;
  --reader-muted:#a99d8c;
  --reader-line:#39342c;
  --reader-accent:#e18b58;
  --reader-highlight:#553825;
  --reader-focus:#77a9ff;
}
@media(prefers-color-scheme:dark){
  .reader-v2[data-theme="system"]{
    --reader-bg:#181714;
    --reader-paper:#201e1a;
    --reader-raised:#292620;
    --reader-ink:#f2eadc;
    --reader-secondary:#d1c5b3;
    --reader-muted:#a99d8c;
    --reader-line:#39342c;
    --reader-accent:#e18b58;
    --reader-highlight:#553825;
    --reader-focus:#77a9ff;
  }
}
.reader-v2 button,.reader-v2 input{font:inherit}
.reader-v2 button:focus-visible,.reader-v2 input:focus-visible{
  outline:3px solid color-mix(in srgb,var(--reader-focus) 60%,transparent);
  outline-offset:2px;
}
.reader-v2__toolbar{
  height:62px;
  flex:none;
  padding:0 clamp(12px,2.4vw,28px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--reader-paper);
  border-bottom:1px solid var(--reader-line);
  position:relative;
  z-index:20;
}
/* 04-1 · the reading line runs along the bottom of the paper, not under the toolbar. */
.reader-reading-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#efe6d4;overflow:hidden;z-index:8}
.reader-v2[data-theme="night"] .reader-reading-progress{background:#3a3226}
.reader-reading-progress span{display:block;width:0;height:100%;background:var(--reader-accent);transition:width .12s linear}
.reader-v2__toolbar-left,.reader-v2__toolbar-actions{display:flex;align-items:center;gap:10px;min-width:0}
.reader-v2__source{font-size:13px;font-weight:650;color:var(--reader-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.reader-icon-button{
  width:44px;height:44px;min-width:44px;border-radius:12px;
  display:grid;place-items:center;background:color-mix(in srgb,var(--reader-line) 60%,transparent);
  color:var(--reader-secondary);font-size:22px;font-weight:700;
}
.reader-icon-button--aa{font-family:Georgia,'Source Serif 4',serif;font-size:14px}
.reader-icon-button--sentence{font-size:14px}
.reader-icon-button.is-active{background:var(--reader-accent);color:#fff9ef}
.reader-v2__body{display:flex;flex:1;min-height:0;overflow:hidden}
.reader-v2__scroll{flex:1;min-width:0;overflow:auto;padding:42px clamp(18px,4vw,52px) 110px;scroll-behavior:smooth;background:var(--reader-paper);filter:brightness(var(--reader-brightness))}
.reader-state{max-width:720px;margin:0 auto 18px;padding:11px 14px;border-radius:11px;background:var(--reader-raised);border:1px solid var(--reader-line);font-size:13px;color:var(--reader-secondary)}
.reader-state[data-kind="error"],.reader-state[data-kind="warning"]{border-color:color-mix(in srgb,var(--reader-accent) 40%,var(--reader-line));color:var(--reader-accent)}
.reader-state button{min-height:44px;margin-left:12px;padding:7px 12px;border-radius:9px;background:var(--reader-accent);color:#fff9ef;font-size:12px;font-weight:800}
.reader-network-state{max-width:720px;margin:0 auto 14px;padding:9px 13px;border-radius:10px;background:color-mix(in srgb,var(--reader-accent) 10%,var(--reader-raised));font-size:12px;color:var(--reader-accent)}
.reader-article{max-width:720px;margin:0 auto;font-family:'Source Serif 4',Georgia,'Songti SC',serif}
/* 04-1 · the meta line sits above the title, and the title is 38px on the desktop paper. */
.reader-article__title{font-size:clamp(27px,3.5vw,38px);line-height:1.2;margin:0 0 26px;color:var(--reader-ink);text-wrap:balance}
.reader-article__title--source-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 04-1 · the meta line is one run of text, so its separators take a space on each
   side rather than a flex gap. */
.reader-article__meta{display:flex;gap:0;flex-wrap:wrap;font-family:var(--ui);font-size:12px;color:var(--reader-muted);margin:0 0 10px}
.reader-article__meta span{white-space:pre}
.reader-article__body{font-size:var(--reader-font-size,20px);color:var(--reader-ink);overflow:visible}
/* 04-4b · a paragraph carrying annotations opens up to 2.3; one without stays at 1.75.
   04-1 · paragraphs sit 14px apart; 段落中文译文 is a child of its paragraph and its
   own 22px collapses through, which is the gap the frame draws under a translated one. */
.reader-paragraph{margin:0 0 14px;line-height:1.75}
.reader-paragraph--heading{font-size:1.35em;font-weight:600;line-height:1.35;margin-bottom:12px}
.reader-article--annotated .reader-paragraph:has(.word-token[data-annotated="true"]){line-height:2.3}
.reader-end{margin:54px auto 0;padding:30px 20px;border-top:1px solid var(--reader-line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;font-family:-apple-system,'PingFang SC',sans-serif;color:var(--reader-muted)}
.reader-end>span{font-size:11px;font-weight:850;letter-spacing:1px;color:var(--reader-accent)}
.reader-end>strong{font-family:Georgia,'Source Serif 4',serif;font-size:21px;color:var(--reader-secondary)}
.reader-end>div{display:flex;gap:8px;margin-top:10px}
.reader-end button{min-height:44px;padding:9px 15px;border-radius:11px;background:color-mix(in srgb,var(--reader-line) 65%,transparent);font-size:12px;font-weight:800;color:var(--reader-secondary)}
.reader-end button:last-child{background:var(--reader-accent);color:#fff9ef}
.reader-sentence{border-radius:14px;scroll-margin-top:82px;transition:background .16s}
.reader-sentence.is-speaking{background:color-mix(in srgb,var(--reader-highlight) 55%,transparent)}
.reader-sentence__source{min-width:0}
.sentence-flow{min-width:0}
/* 04-4b · the word keeps the sentence's own text flow; ruby carries the two lanes. */
.word-token{
  ruby-position:under;
  ruby-align:center;
  /* The word carries the space in front of it, so the line may break there — and
     nowhere inside the word, which has no other break opportunity. */
  white-space:pre-wrap;
  cursor:pointer;
  border-radius:5px;
  color:inherit;
  background:transparent;
}
/* Keep both ruby lanes in one atomic inline box during asynchronous updates. */
.token-unit{display:inline-block;white-space:nowrap}
.token-unit .word-token,.token-unit .token-word{white-space:nowrap}
.token-top{ruby-position:over;ruby-align:center}
.word-token:hover{background:color-mix(in srgb,var(--reader-highlight) 58%,transparent)}
.word-token.is-active,.word-token.is-speaking{background:var(--reader-highlight)}
.token-ipa,.token-gloss{
  /* 05-2 · the phonetics and the meaning are annotation, not the text: a drag across a
     sentence — and a plain Cmd-C — has to yield the sentence, not `produced/prə·ˈduːst/`. */
  user-select:none;-webkit-user-select:none;
  white-space:nowrap;
  font-family:-apple-system,'Noto Sans',sans-serif;
  line-height:1;
}
.token-ipa{font-size:.58em;font-weight:400;padding-bottom:3px;letter-spacing:.2px;color:var(--reader-muted)}
.token-word{white-space:pre-wrap;font-size:inherit;font-weight:400}
.token-gloss{font-size:.58em;font-weight:400;padding-top:3px;font-family:-apple-system,'PingFang SC','Noto Sans SC',sans-serif;color:var(--reader-secondary)}
.token-ipa:empty,.token-gloss:empty{display:none}
.token-word--missing-ipa{text-decoration-line:underline;text-decoration-style:dashed;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--reader-muted)}
.text-fragment{white-space:pre-wrap;overflow-wrap:break-word}
/* 05-2 · 划词工具条 and the four-colour lines it draws. */
.reader-selection-bar{
  user-select:none;-webkit-user-select:none;
  position:fixed;z-index:40;display:flex;align-items:center;gap:2px;
  background:#332d24;border-radius:9px;padding:6px 8px;
  box-shadow:0 12px 30px rgba(40,30,15,.35);
  /* The frame draws the bar inside a 19px/1.9 reading specimen and its labels take that
     line-height; the bar carries it itself so it is the same height over any paper. */
  font:400 19px/1.9 var(--ui);
}
.reader-selection-bar button{font:400 12.5px/1.9 var(--ui);color:#f7f1e6;padding:5px 9px;background:transparent;border:0;border-radius:6px}
.reader-selection-bar button:hover{background:#463d2e}
.reader-selection-bar__divider{width:1px;height:16px;background:#4e4638}
.reader-selection-bar__dots{display:flex;gap:4px;padding:0 6px}
.reader-selection-bar__styles{display:flex;gap:2px;padding-right:4px}
.reader-selection-bar button[data-selection-style]{display:grid;place-items:center;width:26px;height:22px;padding:0}
.reader-selection-bar button[data-selection-style] svg{width:16px;height:16px;fill:none;stroke:#a89a82;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reader-selection-bar button[data-selection-style][aria-pressed="true"]{background:#463d2e}
.reader-selection-bar button[data-selection-style][aria-pressed="true"] svg{stroke:#e8a06a}
.reader-selection-bar button.reader-selection-bar__dot{width:13px;height:13px;border-radius:50%;padding:0;background:var(--reader-mark)}
.reader-selection-bar button.reader-selection-bar__dot:hover{background:var(--reader-mark);outline:2px solid #f7f1e6;outline-offset:1px}
/* The frame draws a drag as this wash; the browser's own selection colour is the
   one thing a reader sees before the bar opens. */
.reader-article ::selection{background:#f3dcc4;color:inherit}
.reader-v2[data-theme="night"] .reader-article ::selection{background:#4a4132}
/* 03-8g · a highlight is the App's marker line: 1.6px in the mark colour along the bottom
   of the word (PhoreadParagraph._paintMark), solid or a 2.5px-step zigzag. The line hangs
   off the English word itself, so it never runs through the IPA or gloss lanes. */
.is-highlighted .token-word,.text-fragment.is-highlighted{position:relative}
.is-highlighted .token-word::after,.text-fragment.is-highlighted::after{
  content:"";position:absolute;left:var(--mark-lead,0px);right:0;bottom:0;height:1.6px;
  border-radius:1px;background:var(--reader-mark);pointer-events:none;
}
.is-highlighted[data-highlight-style="wavy"] .token-word::after,.text-fragment.is-highlighted[data-highlight-style="wavy"]::after{
  bottom:-1.5px;height:4.6px;border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='4.6'%3E%3Cpath d='M0 3.8L2.5 0.8L5 3.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/5px 4.6px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='4.6'%3E%3Cpath d='M0 3.8L2.5 0.8L5 3.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/5px 4.6px repeat-x;
}

/* 04-4b · 颜色＝声音. One palette for all three surfaces: these are the values
   `browserplugin/common/phonics.js` ships and the design draws. Consonant letters in
   the word are ink; consonant phonemes in the phonetics line are one step lighter. */
.grapheme{color:#3a332a}
.phoneme{color:#7a6e5b}
.phoneme.stress{color:#b4551e;font-weight:400}
.phoneme.separator{color:#c9bba0}
.phoneme.punctuation{color:#ac9d86}
.phoneme.silent,.grapheme.silent{color:#bcb199}
.phoneme.v-ii,.grapheme.v-ii{color:oklch(0.49 0.14 156)}
.phoneme.v-i,.grapheme.v-i{color:oklch(0.53 0.13 146)}
.phoneme.v-e,.grapheme.v-e{color:oklch(0.53 0.17 28)}
.phoneme.v-ae,.grapheme.v-ae{color:oklch(0.53 0.15 58)}
.phoneme.v-uh,.grapheme.v-uh{color:oklch(0.47 0.08 52)}
.phoneme.v-aa,.grapheme.v-aa{color:oklch(0.50 0.12 66)}
.phoneme.v-oo,.grapheme.v-oo{color:oklch(0.52 0.14 74)}
.phoneme.v-uu,.grapheme.v-uu{color:oklch(0.50 0.12 208)}
.phoneme.v-u,.grapheme.v-u{color:oklch(0.50 0.10 230)}
.phoneme.v-er,.grapheme.v-er{color:oklch(0.50 0.08 312)}
.phoneme.v-ei,.grapheme.v-ei{color:oklch(0.52 0.13 256)}
.phoneme.v-ai,.grapheme.v-ai{color:oklch(0.49 0.16 300)}
.phoneme.v-oi,.grapheme.v-oi{color:oklch(0.50 0.13 330)}
.phoneme.v-ou,.grapheme.v-ou{color:oklch(0.51 0.09 260)}
.phoneme.v-au,.grapheme.v-au{color:oklch(0.49 0.10 62)}
.phoneme.v-ie,.grapheme.v-ie{color:oklch(0.50 0.11 180)}
.phoneme.v-ea,.grapheme.v-ea{color:oklch(0.52 0.10 20)}
.phoneme.v-ue,.grapheme.v-ue{color:oklch(0.50 0.09 200)}
.phoneme.v-schwa,.grapheme.v-schwa{color:oklch(0.60 0.018 80)}
.phoneme.v-o,.grapheme.v-o{color:oklch(0.51 0.12 70)}
/* 04-8 · on the reader's dark paper the vowels move to lightness 0.74 with a touch
   more chroma, which keeps every one of them above 4.5:1 against #26221B. */
.reader-v2[data-theme="night"] .grapheme{color:#f2ede2}
.reader-v2[data-theme="night"] .phoneme{color:#b6ab96}
.reader-v2[data-theme="night"] .phoneme.stress{color:#e8a468}
.reader-v2[data-theme="night"] .phoneme.separator{color:#7b7160}
.reader-v2[data-theme="night"] .phoneme.punctuation{color:#7b7160}
.reader-v2[data-theme="night"] .phoneme.silent,.reader-v2[data-theme="night"] .grapheme.silent{color:#8c826e}
.reader-v2[data-theme="night"] .phoneme.v-ii,.reader-v2[data-theme="night"] .grapheme.v-ii{color:oklch(0.74 0.15 156)}
.reader-v2[data-theme="night"] .phoneme.v-i,.reader-v2[data-theme="night"] .grapheme.v-i{color:oklch(0.74 0.14 146)}
.reader-v2[data-theme="night"] .phoneme.v-e,.reader-v2[data-theme="night"] .grapheme.v-e{color:oklch(0.74 0.18 28)}
.reader-v2[data-theme="night"] .phoneme.v-ae,.reader-v2[data-theme="night"] .grapheme.v-ae{color:oklch(0.74 0.16 58)}
.reader-v2[data-theme="night"] .phoneme.v-uh,.reader-v2[data-theme="night"] .grapheme.v-uh{color:oklch(0.74 0.09 52)}
.reader-v2[data-theme="night"] .phoneme.v-aa,.reader-v2[data-theme="night"] .grapheme.v-aa{color:oklch(0.74 0.13 66)}
.reader-v2[data-theme="night"] .phoneme.v-oo,.reader-v2[data-theme="night"] .grapheme.v-oo{color:oklch(0.74 0.15 74)}
.reader-v2[data-theme="night"] .phoneme.v-uu,.reader-v2[data-theme="night"] .grapheme.v-uu{color:oklch(0.74 0.13 208)}
.reader-v2[data-theme="night"] .phoneme.v-u,.reader-v2[data-theme="night"] .grapheme.v-u{color:oklch(0.74 0.11 230)}
.reader-v2[data-theme="night"] .phoneme.v-er,.reader-v2[data-theme="night"] .grapheme.v-er{color:oklch(0.74 0.09 312)}
.reader-v2[data-theme="night"] .phoneme.v-ei,.reader-v2[data-theme="night"] .grapheme.v-ei{color:oklch(0.74 0.14 256)}
.reader-v2[data-theme="night"] .phoneme.v-ai,.reader-v2[data-theme="night"] .grapheme.v-ai{color:oklch(0.74 0.17 300)}
.reader-v2[data-theme="night"] .phoneme.v-oi,.reader-v2[data-theme="night"] .grapheme.v-oi{color:oklch(0.74 0.14 330)}
.reader-v2[data-theme="night"] .phoneme.v-ou,.reader-v2[data-theme="night"] .grapheme.v-ou{color:oklch(0.74 0.1 260)}
.reader-v2[data-theme="night"] .phoneme.v-au,.reader-v2[data-theme="night"] .grapheme.v-au{color:oklch(0.74 0.11 62)}
.reader-v2[data-theme="night"] .phoneme.v-ie,.reader-v2[data-theme="night"] .grapheme.v-ie{color:oklch(0.74 0.12 180)}
.reader-v2[data-theme="night"] .phoneme.v-ea,.reader-v2[data-theme="night"] .grapheme.v-ea{color:oklch(0.74 0.11 20)}
.reader-v2[data-theme="night"] .phoneme.v-ue,.reader-v2[data-theme="night"] .grapheme.v-ue{color:oklch(0.74 0.1 200)}
.reader-v2[data-theme="night"] .phoneme.v-schwa,.reader-v2[data-theme="night"] .grapheme.v-schwa{color:oklch(0.74 0.028 80)}
.reader-v2[data-theme="night"] .phoneme.v-o,.reader-v2[data-theme="night"] .grapheme.v-o{color:oklch(0.74 0.13 70)}
.reader-article--no-color .phoneme:not(.stress),.reader-article--no-color .grapheme{color:var(--reader-ink)}
/* 04-1 · 段落中文译文 sits under its paragraph on a single accent rule. */
.reader-paragraph__translation{
  /* The reference places each paragraph translation 6px below the English run.
     Although the app nests it in the paragraph for state updates, this exact
     margin keeps the following paragraph on the same visual rhythm. */
  margin:6px 0 22px;padding-left:13px;border-left:2px solid rgba(180,95,46,.38);
  font-family:-apple-system,'PingFang SC',sans-serif;font-size:15px;line-height:1.7;color:var(--reader-secondary);
}
/* The first source paragraph has no preceding paragraph margin. Its nested
   translation therefore needs the missing 8px that later paragraphs receive
   from their own rhythm. */
.reader-article__body>.reader-paragraph:first-child>.reader-paragraph__translation{margin-top:14px}
.reader-v2[data-theme="night"] .reader-paragraph__translation{border-left-color:rgba(232,201,160,.4)}
.reader-paragraph__translation--loading{color:var(--reader-muted);font-style:italic}
.reader-paragraph__translation--loading.is-failed{font-style:normal;color:var(--reader-accent)}
/* 04-5 · 逐句对照: one row per sentence, English at 1.6 and the translation 4px under it;
   the row under the pointer takes the pale accent ground. */
.reader-v2[data-mode="sideBySide"] .reader-paragraph{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.reader-v2[data-mode="sideBySide"] .reader-sentence{padding:8px 10px;margin:-8px -10px;border-radius:9px;line-height:1.6}
.reader-v2[data-mode="sideBySide"] .reader-sentence:hover{background:color-mix(in srgb,var(--reader-highlight) 55%,transparent)}
.reader-sentence__translation{
  margin-top:4px;font-family:-apple-system,'PingFang SC',sans-serif;font-size:14px;line-height:1.7;color:var(--reader-secondary);
}
.reader-sentence__translation--loading{color:var(--reader-muted);font-style:italic}
.reader-sentence__translation--loading.is-failed{font-style:normal;color:var(--reader-accent)}

.reader-rail{position:relative;width:330px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--reader-paper);border-left:1px solid var(--reader-line);z-index:16}
.reader-rail__inner{flex:1;overflow:auto;padding:24px}
.reader-rail__eyebrow{font-size:11.5px;font-weight:750;letter-spacing:.5px;color:var(--reader-muted);margin-bottom:16px}
.reader-sheet-handle{display:none;width:42px;height:5px;border-radius:99px;background:var(--reader-line);margin:0 auto 15px}
.reader-wordcard{padding:18px;border-radius:16px;background:var(--reader-raised);border:1px solid var(--reader-line);box-shadow:0 10px 28px rgba(58,42,24,.06)}
.reader-wordcard h2{font-family:Georgia,'Source Serif 4',serif;font-size:27px;margin:0 0 7px}
.reader-wordcard p{margin:0}
.reader-wordcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.reader-wordcard__close{width:44px;height:44px;flex:none;border-radius:10px;color:var(--reader-muted);font-size:23px}
.reader-wordcard__lemma{font-size:11px;color:var(--reader-muted);margin-top:-4px}
.reader-wordcard__pronunciations{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.reader-wordcard__pronunciation{min-width:44px;min-height:44px;padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--reader-accent) 10%,transparent);color:var(--reader-accent);font-size:12px;font-weight:700}
.reader-wordcard__pronunciation:disabled{color:var(--reader-muted);background:color-mix(in srgb,var(--reader-line) 55%,transparent)}
.reader-wordcard__context{padding:11px 12px;margin:0 0 12px;border-radius:11px;background:var(--reader-highlight);display:flex;flex-direction:column;gap:3px}
.reader-wordcard__context span,.reader-wordcard__section-title{font-size:10.5px;font-weight:800;letter-spacing:.35px;color:var(--reader-muted)}
.reader-wordcard__context strong{font-size:14px;color:var(--reader-ink)}
.reader-wordcard__section{padding:12px 0;border-top:1px solid var(--reader-line)}
.reader-wordcard__pos{color:var(--reader-accent);margin-left:5px}
.reader-wordcard__gloss{font-size:14px;line-height:1.7;color:var(--reader-secondary);margin-top:6px}
.reader-wordcard__definition{font-family:Georgia,'Source Serif 4',serif;font-size:13px;line-height:1.55;color:var(--reader-muted);margin-top:5px}
.reader-wordcard__relations,.reader-wordcard__senses{padding:10px 0;border-top:1px solid var(--reader-line);display:grid;gap:5px;font-size:11.5px;line-height:1.5;color:var(--reader-secondary)}
.reader-wordcard__phonics{border-top:1px solid var(--reader-line);padding:10px 0;font-size:12px;color:var(--reader-secondary)}
.reader-wordcard__phonics summary{min-height:44px;display:flex;align-items:center;font-weight:800;color:var(--reader-accent);cursor:pointer}
.reader-wordcard__phonics>div{display:flex;flex-wrap:wrap;gap:6px;padding:5px 0}
.reader-wordcard__phonic-unit{padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--reader-line) 55%,transparent);font-family:-apple-system,sans-serif}
.reader-wordcard__source{margin:0;padding:11px 0 11px 13px;border-left:2px solid var(--reader-line);font-family:Georgia,'Source Serif 4',serif;font-size:12px;line-height:1.55;color:var(--reader-muted)}
.reader-wordcard__actions{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:13px;padding-top:10px;border-top:1px solid var(--reader-line);background:var(--reader-raised)}
.reader-wordcard__actions button{min-width:44px;min-height:44px;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--reader-line) 60%,transparent);font-size:11.5px;font-weight:750;color:var(--reader-secondary)}
.reader-wordcard__actions button:first-child,.reader-wordcard__actions button.is-active{background:var(--reader-accent);color:#fff9ef}
.reader-wordcard-empty{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--reader-muted);font-size:13px;line-height:1.6}
.reader-wordcard-empty strong{color:var(--reader-secondary);font-size:14px}
.reader-wordcard-empty__icon{width:52px;height:52px;display:grid;place-items:center;border:1px dashed var(--reader-line);border-radius:16px;font-family:Georgia,serif;color:var(--reader-accent);font-weight:700;margin-bottom:5px}
.reader-playbar{min-height:72px;padding:12px 18px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--reader-line);background:var(--reader-raised)}
.reader-playbar__button{width:44px;height:44px;border-radius:50%;background:var(--reader-accent);color:#fff9ef;display:grid;place-items:center}
.reader-playbar__middle{flex:1;min-width:0}
.reader-playbar__label{font-size:12px;font-weight:750;color:var(--reader-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-playbar__track{height:4px;border-radius:99px;background:var(--reader-line);margin-top:8px;overflow:hidden}
.reader-playbar__track span{display:block;width:0;height:100%;background:var(--reader-accent);transition:width .12s linear}
.reader-playbar__stop{width:44px;height:44px;border-radius:12px;color:var(--reader-secondary);background:color-mix(in srgb,var(--reader-ink) 7%,transparent);font-size:14px}
.reader-playbar__speed{min-width:48px;height:44px;border-radius:10px;color:var(--reader-accent);font-size:12px;font-weight:800;background:color-mix(in srgb,var(--reader-accent) 10%,transparent)}

.reader-settings{
  position:absolute;right:24px;top:70px;z-index:40;width:min(390px,calc(100% - 32px));height:min(518px,calc(100% - 90px));overflow:auto;
  padding:12px 20px 18px;border:1px solid color-mix(in srgb,var(--reader-line) 75%,transparent);border-radius:22px;background:var(--reader-raised);box-shadow:0 24px 70px rgba(60,45,25,.22);
}
.reader-settings>.reader-sheet-handle{display:block;width:38px;height:4.5px;margin:0 auto 28px;background:#ddd2bc}
.reader-settings__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reader-settings__font-control{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.reader-settings__font-step{width:44px;height:44px;flex:none;margin-inline:-12px;display:grid;place-items:center;color:#a89a82;font-family:Georgia,'Source Serif 4',serif;font-size:13px;font-weight:700;border-radius:10px}
.reader-settings__font-step--large{color:#5c5343;font-size:22px}
.reader-settings__font-slider{--font-progress:71.428%;--font-offset:-26px;position:relative;flex:1;min-width:0;height:40px;border-radius:10px;background:#f1eadc}
.reader-settings__font-track{position:absolute;left:14px;right:14px;top:18px;height:4px;border-radius:99px;background:#e4d8c0;overflow:hidden}
.reader-settings__font-track span{display:block;width:var(--font-progress);height:100%;border-radius:inherit;background:#e6c79a}
.reader-settings__font-slider output{position:absolute;left:calc(var(--font-progress) + var(--font-offset));top:4px;width:40px;height:32px;display:grid;place-items:center;z-index:1;border:1.5px solid var(--reader-accent);border-radius:8px;background:var(--reader-raised);box-shadow:0 2px 6px rgba(120,90,50,.2);color:var(--reader-accent);font-size:14px;font-weight:700;pointer-events:none}
.reader-settings__font-slider input{position:absolute;inset:0;z-index:2;width:100%;height:40px;margin:0;opacity:0;cursor:pointer}
.reader-settings__section-title{margin:0 0 12px;color:#b08d6e;font-size:11px;font-weight:700;letter-spacing:.5px}
.reader-settings__row{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.reader-settings__row-label{flex:none;color:#4a4234;font-size:13.5px;font-weight:600}
.reader-settings__segments{display:flex;justify-content:flex-end;min-width:0;padding:3px;border-radius:99px;background:color-mix(in srgb,var(--reader-line) 72%,transparent);overflow-x:auto;scrollbar-width:none}
.reader-settings__segments::-webkit-scrollbar{display:none}
.reader-settings__segments button{min-height:34px;padding:5px 12px;border-radius:99px;white-space:nowrap;color:var(--reader-muted);font-size:12px;font-weight:600}
.reader-settings__segments button.is-active{background:var(--reader-accent);color:#fff9ef;font-weight:700}
.reader-settings__speech-rate{display:flex;align-items:center}
.reader-settings__speech-rate button{width:40px;height:40px;border:1px solid color-mix(in srgb,var(--reader-line) 90%,transparent);border-radius:10px;background:var(--reader-raised);color:#5c5343;font-size:18px;font-weight:700}
.reader-settings__speech-rate output{width:50px;text-align:center;color:#5c5343;font-size:13px;font-weight:700}
.reader-settings__switch{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;color:#4a4234;font-size:13.5px;font-weight:600;cursor:pointer}
.reader-settings__switch input{appearance:none;width:42px;height:25px;flex:none;margin:0;padding:2.5px;border:0;border-radius:99px;background:#e0d5be;box-shadow:none;cursor:pointer;transition:background .14s ease}
.reader-settings__switch input::after{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#fff9ef;transform:translateX(0);transition:transform .14s ease}
.reader-settings__switch input:checked{background:var(--reader-accent)}
.reader-settings__switch input:checked::after{transform:translateX(17px)}
.reader-settings__switch small{display:block;margin-top:4px;color:var(--reader-secondary);font-size:11px;font-weight:400;line-height:1.45}
.reader-v2[data-theme="night"] .reader-settings__font-step,.reader-v2[data-theme="night"] .reader-settings__font-step--large,.reader-v2[data-theme="night"] .reader-settings__row-label,.reader-v2[data-theme="night"] .reader-settings__speech-rate button,.reader-v2[data-theme="night"] .reader-settings__speech-rate output,.reader-v2[data-theme="night"] .reader-settings__switch{color:var(--reader-secondary)}
.reader-v2[data-theme="night"] .reader-settings__font-slider{background:color-mix(in srgb,var(--reader-line) 70%,transparent)}
.reader-scrim{position:absolute;inset:0;background:rgba(24,20,15,.32);backdrop-filter:blur(2px);z-index:30}
.reader-toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:80;max-width:min(420px,calc(100% - 32px));padding:10px 16px;border-radius:99px;background:#332d24;color:#fff9ef;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.reader-gateway-consent{box-sizing:border-box;width:min(520px,100%);margin:0 auto 24px;padding:18px;border:1px solid var(--reader-line);border-radius:16px;background:var(--reader-raised);color:var(--reader-ink);box-shadow:0 8px 24px rgba(35,27,17,.1);font-size:13px;line-height:1.6}
.reader-gateway-consent[hidden]{display:none}
.reader-gateway-consent strong{display:block;font-size:15px}
.reader-gateway-consent p{margin:7px 0 14px;color:var(--reader-secondary)}
.reader-gateway-consent div{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.reader-gateway-consent a{margin-right:auto;color:var(--reader-accent)}
.reader-gateway-consent button{min-height:40px;padding:8px 12px;border:1px solid var(--reader-line);border-radius:8px;color:var(--reader-ink)}
.reader-gateway-consent button[data-gateway-consent="allow"]{border-color:var(--reader-accent);background:var(--reader-accent);color:#fff}
.sentence-focus{
  --sentence-paper:#efe7d6;--sentence-card:#fffdf7;--sentence-teach:#f6eee0;--sentence-ink:#332d24;
  --sentence-muted:#8a7e6b;--sentence-muted-light:#a89a82;--sentence-line:#ece0cb;
  --sentence-rust:#b45f2e;--sentence-rust-soft:#f6e8da;--sentence-hint:#d8cdbb;
  position:absolute;inset:0;z-index:55;display:block;overflow:hidden;background:#efe7d6;color:#332d24;
  font-family:-apple-system,'PingFang SC','Noto Sans SC',sans-serif;
}
.sentence-focus[hidden]{display:none}
.sentence-focus__surface{position:relative;width:min(760px,100%);height:100%;margin:0 auto;overflow:hidden;background:var(--sentence-paper);touch-action:none}
.sentence-focus__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sentence-focus__header{position:absolute;z-index:4;left:15px;right:15px;top:max(3px,env(safe-area-inset-top));height:44px;display:flex;align-items:center;justify-content:space-between;touch-action:none}
.sentence-focus__header button,.sentence-focus__progress{min-height:34px;padding:7px 12px;border-radius:99px;background:var(--sentence-card);box-shadow:0 2px 8px rgba(80,60,30,.09);color:var(--sentence-ink);font-size:11.5px;font-weight:700}
.sentence-focus__header button{min-width:64px;display:flex;align-items:center;gap:4px}
.sentence-focus__header button>span{font-size:15px;font-weight:400;line-height:1}
.sentence-focus__progress{display:grid;place-items:center;min-width:68px;color:var(--sentence-muted);font-size:11px}
.sentence-focus__page{position:absolute;left:0;right:0;top:max(40px,calc(env(safe-area-inset-top) + 40px));bottom:max(3px,env(safe-area-inset-bottom));min-height:0;transition:transform .22s ease-out,opacity .22s ease-out;will-change:transform,opacity}
.sentence-focus[data-transition="analysis-forward"] .sentence-focus__page{animation:sentence-focus-enter-right .22s ease-out}
.sentence-focus[data-transition="analysis-back"] .sentence-focus__page{animation:sentence-focus-enter-left .22s ease-out}
.sentence-focus[data-transition="sentence-forward"] .sentence-focus__surface{animation:sentence-focus-enter-bottom .22s ease-out}
.sentence-focus[data-transition="sentence-back"] .sentence-focus__surface{animation:sentence-focus-enter-top .22s ease-out}
@keyframes sentence-focus-enter-right{from{opacity:.55;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes sentence-focus-enter-left{from{opacity:.55;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}
@keyframes sentence-focus-enter-bottom{from{opacity:.55;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes sentence-focus-enter-top{from{opacity:.55;transform:translateY(-32px)}to{opacity:1;transform:translateY(0)}}
.sentence-focus__page--translation>.sentence-focus__adjacent--previous{position:absolute;left:54px;right:54px;top:0;height:43px}
.sentence-focus__full-map{position:absolute;left:22px;right:22px;top:45px;bottom:237px;display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto}
.sentence-focus__sentence{width:100%;margin:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px 11px;font-family:Georgia,'Source Serif 4',serif;color:var(--sentence-ink)}
.sentence-focus__word{display:inline-grid;grid-template-rows:18px 32px 16px;justify-items:center;align-items:center;min-width:44px;min-height:66px;padding:0 2px;border-radius:8px;color:inherit;background:transparent}
.sentence-focus__word:hover,.sentence-focus__word:focus-visible{background:rgba(180,95,46,.08)}
.sentence-focus__token-ipa{height:18px;max-width:calc(100% + 18px);line-height:18px;white-space:nowrap;font-family:-apple-system,'Noto Sans',sans-serif;font-size:14px;color:var(--sentence-muted)}
.sentence-focus__token-word{height:32px;line-height:32px;white-space:nowrap;font-size:25px;font-weight:400;color:#3a332a}
.sentence-focus__token-gloss{height:16px;max-width:calc(100% + 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:16px;font-family:-apple-system,'PingFang SC',sans-serif;font-size:12px;color:var(--sentence-muted)}
.sentence-focus__translation-card{position:absolute;left:12px;right:12px;bottom:120px;height:101px;padding:11px 16px 10px;border:1px solid var(--sentence-line);border-radius:14px;background:var(--sentence-teach);overflow:hidden}
.sentence-focus__translation-card>div{color:var(--sentence-rust);font-size:10.5px;font-weight:700;letter-spacing:1px;line-height:1.2}
.sentence-focus__translation-card p{margin:7px 0 0;color:var(--sentence-ink);font-size:14.5px;font-weight:600;line-height:1.75}
.sentence-focus__actions{position:absolute;left:12px;right:12px;bottom:64px;height:43px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sentence-focus__actions button{min-width:0;min-height:43px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border:1px solid var(--sentence-line);border-radius:13px;background:var(--sentence-card);color:var(--sentence-muted);font-size:13px;font-weight:600}
.sentence-focus__actions button>span{font-size:16px;color:inherit}
.sentence-focus__icon svg{display:block;width:17px;height:17px}
.sentence-focus__actions button:first-child{border-color:var(--sentence-rust);background:var(--sentence-rust);box-shadow:0 4px 12px rgba(180,95,46,.22);color:#fff9ef}
.sentence-focus__page--translation>.sentence-focus__adjacent--next{position:absolute;left:54px;right:54px;bottom:7px;height:43px}
.sentence-focus__adjacent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:43px;overflow:hidden;color:var(--sentence-hint);background:transparent;font-family:Georgia,'Source Serif 4',serif;font-size:12px}
.sentence-focus__adjacent>span:not(.sentence-focus__adjacent-arrow){display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.sentence-focus__adjacent-arrow{font-family:-apple-system,sans-serif;font-size:16px;line-height:13px}
.sentence-focus__adjacent:disabled{opacity:.64}
.sentence-focus__dots{position:absolute;z-index:5;left:50%;bottom:max(0px,env(safe-area-inset-bottom));width:132px;height:44px;display:grid;grid-template-columns:repeat(3,1fr);transform:translateX(-50%);pointer-events:none}
.sentence-focus__dots button{min-width:44px;min-height:44px;display:grid;align-items:end;justify-items:center;padding:0 0 4px;background:transparent;pointer-events:auto}
.sentence-focus__dots button span{width:18px;height:4px;border-radius:99px;background:#d9ceb9;transition:width .18s ease,background .18s ease}
.sentence-focus__dots button.is-active span{width:26px;background:var(--sentence-rust)}
.sentence-focus__page--scroll{overflow-y:auto;padding:0 12px max(62px,calc(env(safe-area-inset-bottom) + 48px));scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-y}
.sentence-focus__compact-card{width:100%;height:249px;padding:10px 14px 13px;border:1px solid var(--sentence-line);border-radius:16px;background:var(--sentence-card);box-shadow:0 6px 18px rgba(90,65,30,.08)}
.sentence-focus__page--grammar .sentence-focus__compact-card{height:234px}
.sentence-focus__compact-head{height:29px;display:flex;align-items:center;gap:9px}
.sentence-focus__compact-label{flex:none;color:var(--sentence-muted-light);font-size:10px;line-height:1.2}
.sentence-focus__compact-line{height:1px;flex:1;background:var(--sentence-line)}
.sentence-focus__compact-head button{min-width:64px;min-height:29px;padding:5px 9px;border-radius:99px;background:var(--sentence-rust-soft);color:var(--sentence-rust);font-size:10px;font-weight:600}
.sentence-focus__compact-map{height:calc(100% - 38px);display:flex;align-items:center;justify-content:center;overflow:auto}
.sentence-focus__sentence--compact{gap:7px 9px}
.sentence-focus__sentence--compact .sentence-focus__word{grid-template-rows:14px 21px 12px;min-width:44px;min-height:47px;padding-inline:1px}
.sentence-focus__sentence--compact .sentence-focus__token-ipa{height:14px;line-height:14px;font-size:10px}
.sentence-focus__sentence--compact .sentence-focus__token-word{height:21px;line-height:21px;font-size:15px}
.sentence-focus__sentence--compact .sentence-focus__token-gloss{height:12px;line-height:12px;font-size:8px}
.sentence-focus__section-heading{min-height:37px;display:flex;align-items:center;gap:6px;padding:7px 2px 3px;color:var(--sentence-ink);font-size:13px}
.sentence-focus__section-heading strong{font-weight:700}
.sentence-focus__section-heading span{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sentence-muted-light);font-size:10px}
.sentence-focus__vocab-list{display:grid;gap:10px}
.sentence-focus__vocab-card{width:100%;min-height:135px;padding:12px 14px;border:1px solid var(--sentence-line);border-radius:15px;background:var(--sentence-card)}
.sentence-focus__vocab-head{display:flex;align-items:flex-start;gap:8px}
.sentence-focus__vocab-open{min-width:0;min-height:76px;flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:var(--sentence-ink)}
.sentence-focus__vocab-meta{width:100%;display:flex;align-items:center;gap:7px;min-width:0}
.sentence-focus__vocab-meta strong{font-family:Georgia,'Source Serif 4',serif;font-size:19px;line-height:1.1}
.sentence-focus__vocab-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sentence-muted);font-size:10.5px;font-style:italic}
.sentence-focus__vocab-meta em{flex:none;padding:2px 8px;border-radius:99px;background:var(--sentence-rust-soft);color:var(--sentence-rust);font-size:10px;font-style:normal;font-weight:700}
.sentence-focus__vocab-open>b{margin-top:6px;font-size:13.5px;font-weight:600}
.sentence-focus__vocab-open>small{margin-top:2px;color:var(--sentence-muted);font-size:11.5px;font-style:italic;line-height:1.35}
.sentence-focus__vocab-save{width:44px;min-width:44px;min-height:55px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--sentence-muted-light)}
.sentence-focus__vocab-save>span{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--sentence-line);border-radius:11px;background:#fbf6ec;color:var(--sentence-rust);font-size:18px}
.sentence-focus__vocab-save>small{font-size:9px;font-weight:700}
.sentence-focus__vocab-save.is-saved{color:var(--sentence-rust)}
.sentence-focus__vocab-save.is-saved>span{border-color:var(--sentence-rust);background:var(--sentence-rust);color:#fff9ef}
.sentence-focus__vocab-context{margin-top:9px;padding-top:9px;border-top:1px solid var(--sentence-line);color:var(--sentence-muted);font-size:12px;line-height:1.65}
.sentence-focus__vocab-context>span{margin-right:8px;color:var(--sentence-muted-light);font-size:9.5px;font-weight:700;letter-spacing:.5px}
.sentence-focus__vocab-context>small{color:var(--sentence-ink);font-size:inherit}
.sentence-focus__vocab-context mark{border-radius:3px;background:#ecd7b7;color:var(--sentence-ink);font-weight:700}
.sentence-focus__empty{display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--sentence-line);border-radius:14px;background:var(--sentence-card);color:var(--sentence-muted);font-size:12px}
.sentence-focus__empty strong{color:var(--sentence-ink);font-size:13px}
.sentence-focus__collocations{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 2px;color:var(--sentence-muted-light);font-size:10px}
.sentence-focus__collocations span:not(:first-child){padding:4px 11px;border-radius:99px;background:rgba(255,253,247,.55);color:var(--sentence-muted);font-size:11.5px;font-weight:600}
.sentence-focus__grammar-card,.sentence-focus__grammar-structure{padding:13px 15px;border:1px solid var(--sentence-line);border-radius:15px;background:var(--sentence-card)}
.sentence-focus__grammar-card p{margin:7px 0 0;color:var(--sentence-muted);font-size:13.5px;line-height:1.65}
.sentence-focus__grammar-structure{display:flex;flex-direction:column;align-items:flex-start}
.sentence-focus__grammar-tag{display:inline-block;padding:2px 7px;border-radius:5px;background:#ede4d2;color:var(--sentence-muted);font-size:9.5px;font-weight:700}
.sentence-focus__grammar-tag.is-accent{background:var(--sentence-rust-soft);color:var(--sentence-rust)}
.sentence-focus__grammar-structure>p{margin:4px 0 0;font-family:Georgia,'Source Serif 4',serif;font-size:15px;line-height:1.5}
.sentence-focus__grammar-structure>p mark{background:transparent;color:inherit;text-decoration:underline;text-decoration-color:#dcab85;text-decoration-thickness:2px;text-underline-offset:3px}
.sentence-focus__grammar-structure>small{margin:3px 0 9px;color:var(--sentence-muted);font-size:11.5px}
.sentence-focus__grammar-connector{width:100%;display:flex;align-items:center;gap:8px;margin:0 0 9px;color:var(--sentence-muted);font-size:11px}
.sentence-focus__grammar-connector::after{content:"";height:1px;flex:1;background:var(--sentence-line)}
.sentence-focus__grammar-points{display:grid;gap:10px;margin-top:10px;padding:12px 14px;border-radius:14px;background:#f7f1e6}
.sentence-focus__grammar-points>div{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start}
.sentence-focus__grammar-points span{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:var(--sentence-rust);color:#fff9ef;font-size:10px;font-weight:700}
.sentence-focus__grammar-points p{margin:0;color:var(--sentence-ink);font-size:12px;line-height:1.55}
.sentence-focus__grammar-simplified{margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--sentence-teach)}
.sentence-focus__grammar-simplified>span{color:var(--sentence-muted-light);font-size:10px;font-weight:700;letter-spacing:1px}
.sentence-focus__grammar-simplified p{margin:6px 0 5px;font-family:Georgia,'Source Serif 4',serif;font-size:14.5px;line-height:1.35}
.sentence-focus__grammar-simplified small{color:var(--sentence-muted);font-size:12px}
@media (min-width:960px){
  .reader-v2:has(.sentence-focus:not([hidden])) .reader-rail:has(.reader-wordcard:not([hidden])){position:fixed;z-index:75;right:0;top:0;bottom:0;width:330px;box-shadow:-18px 0 48px rgba(31,24,16,.2)}
}

@media (max-width:959px){
  .reader-v2__toolbar{padding-inline:12px}
  .reader-v2__source{max-width:120px}
  .reader-rail{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:72px;max-height:72px;border-left:0;border-top:1px solid var(--reader-line);border-radius:22px 22px 0 0;overflow:hidden;transition:height .24s ease,max-height .24s ease;box-shadow:0 -18px 48px rgba(31,24,16,.2)}
  .reader-rail:not(.is-open) .reader-rail__inner{display:none}
  .reader-rail.is-open{height:84dvh;max-height:84dvh;z-index:70}
  .reader-rail__inner{max-height:calc(84dvh - 72px)}
  .reader-sheet-handle{display:block}
  .reader-rail__eyebrow{display:none}
  .reader-v2__scroll{padding-bottom:126px}
  .reader-settings{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;height:min(518px,84dvh);max-height:84dvh;border-radius:22px 22px 0 0;padding-bottom:max(18px,env(safe-area-inset-bottom))}
}
@media (max-width:720px){
  .reader-v2__toolbar{height:58px}
  .reader-v2__source{max-width:88px}
  .reader-v2__toolbar-actions{gap:7px}
  .reader-icon-button{width:44px;height:44px;min-width:44px}
  .reader-v2__scroll{padding:28px 14px 124px}
  .reader-article__meta{margin-bottom:10px}
  .reader-paragraph{margin-bottom:22px}
  .reader-settings{padding-inline:20px}
  .sentence-focus__surface{width:100%}
}
@media (max-width:360px){
  .reader-v2__source,.reader-icon-button--sentence{display:none}
  .reader-v2__toolbar-actions{gap:4px}
  .reader-playbar{padding-inline:8px;gap:8px}
  .reader-playbar__speed{min-width:44px}
}
@media (prefers-reduced-motion:reduce){
  .reader-v2 *{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* 04-1 · 入页提示：4 秒后自己退场，不占正文的位置。 */
.reader-entry-notice{
  position:absolute;top:var(--reader-tools-top);right:78px;z-index:6;display:flex;align-items:center;gap:10px;
  background:var(--reader-raised);border:1px solid var(--reader-line);border-radius:99px;
  box-shadow:0 8px 22px rgba(90,65,30,.14);padding:7px 15px 7px 9px;
  font:12.5px/normal -apple-system,'PingFang SC',sans-serif;color:var(--reader-secondary);
}
.reader-entry-notice b{color:var(--reader-accent);font-weight:700}
.reader-entry-notice__check{width:20px;height:20px;border-radius:50%;background:oklch(0.55 0.13 145);display:flex;align-items:center;justify-content:center;flex:none}
@media(max-width:700px){.reader-entry-notice{right:12px;left:12px;top:auto;bottom:96px;justify-content:center}}

/* 04-1 · the floating tool rail: what the toolbar carries, kept within reach while the
   toolbar itself is away. */
.reader-tool-rail{position:absolute;right:18px;top:var(--reader-tools-top);z-index:5;display:flex;flex-direction:column;gap:8px}
.reader-tool{box-sizing:border-box;width:40px;height:40px;min-width:0;min-height:0;padding:0;border-radius:9px;background:var(--reader-raised);border:1px solid var(--reader-line);box-shadow:0 4px 12px rgba(90,65,30,.10);display:flex;align-items:center;justify-content:center;color:var(--reader-secondary)}
.reader-tool--aa{font:700 15px/1 Georgia,'Source Serif 4',serif}
.reader-tool--ai{flex-direction:column;gap:2px;background:color-mix(in srgb,var(--reader-accent) 14%,var(--reader-raised));border-color:color-mix(in srgb,var(--reader-accent) 38%,var(--reader-line))}
.reader-tool--ai>span:first-child{font:700 13px/1 Georgia,'Source Serif 4',serif;color:var(--reader-accent)}
.reader-tool__bars{display:flex;gap:1.2px}
.reader-tool__bars i{width:4px;height:1.2px;border-radius:99px;background:oklch(0.52 0.13 50)}
.reader-tool__bars i:nth-child(2){background:oklch(0.52 0.11 145)}
.reader-tool__bars i:nth-child(3){background:oklch(0.52 0.11 250)}
@media(max-width:900px){.reader-tool-rail{display:none}}

/* 04-2 · the toolbar floats in when the pointer reaches the top and slips away 1.5s
   after it leaves; T pins it. Floating means it leaves the flow, so 04-1's paper runs to
   the top of the window — with the 66px the design gives the text instead of the 42px it
   needs under a bar. 13-1 keeps the toolbar permanently visible below 900px. */
.reader-v2__toolbar{transition:transform .18s ease,opacity .18s ease;position:relative;z-index:9}
.reader-v2[data-toolbar="auto"] .reader-v2__toolbar{position:absolute;top:0;left:0;right:0}
.reader-v2[data-toolbar="auto"] .reader-v2__scroll{padding-top:var(--reader-auto-toolbar-space);scroll-padding-top:var(--reader-auto-toolbar-space)}
.reader-v2[data-toolbar="auto"][data-toolbar-visible="false"] .reader-v2__toolbar{
  transform:translateY(-100%);opacity:0;pointer-events:none;
}
@media(min-width:901px){
  .reader-v2[data-toolbar="auto"][data-toolbar-visible="false"]{--reader-tools-top:18px}
}
@media(max-width:900px){
  .reader-v2[data-toolbar="auto"] .reader-v2__toolbar{position:relative}
  .reader-v2[data-toolbar="auto"] .reader-v2__scroll{padding-top:28px}
  .reader-v2[data-toolbar="auto"][data-toolbar-visible="false"] .reader-v2__toolbar{transform:none;opacity:1;pointer-events:auto}
}

.reader-book-image { margin: 2rem 0; text-align: center; break-inside: avoid; }
.reader-book-image img { display: block; max-width: 100%; height: auto; max-height: 85vh; object-fit: contain; margin: auto; }
@media print { .reader-book-image img { max-height: 24cm; } }