/* Echo styles — extracted verbatim from index.html (Stage 2).
   Block A = main app CSS (was <style> in <head>).
   Block B = landing CSS (was <style id="echoLandingStyle"> in <body>).
   Order preserved (A before B) so the cascade is identical. */

/* ===== Block A: main app ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F8F6F2;--surface:#FEFDFB;--s2:#F1EEE8;
  --border:#DDD8CE;--border2:#C8C2B6;
  --ink:#18160F;--ink2:#5A5549;--ink3:#9A9388;
  --amber:#B8832A;--amber2:rgba(184,131,42,0.16);
  /* Text color that sits on top of an --ink / --amber filled element
     (active pills, play button glyph, primary buttons). Overridden per theme
     so "active" chrome stays legible in dark appearances. */
  --accent-ink:#ffffff;
  --r:5px;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Instrument Sans',-apple-system,sans-serif;
  --zh:'Songti SC','STSong','SimSun',serif;
  --tr:0.14s ease;
  /* Reader text sizes (px). Adjustable in Settings; persisted to localStorage.
     Defaults match the original design: original 17.6px (1.1rem), Chinese
     original 18.9px (1.18rem), translation 13.1px (0.82rem), pinyin 14.4px. */
  --original-font-size:17.6px;
  --original-zh-font-size:18.9px;
  --translation-font-size:14px;
  --pinyin-font-size:14.4px;
}
/* ── BEDTIME MODE ─────────────────────────────────────────
   Warm, low-glare palette for late-night reading. Charcoal (not pure black)
   background, soft off-white text, muted amber/gold accents. Curated, not an
   inversion. */
body[data-theme="bedtime"]{
  --bg:#151311;--surface:#1e1b17;--s2:#2a251f;
  --border:#5a4b38;--border2:#6b5942;
  --ink:#e8dfd0;--ink2:#b8aa98;--ink3:#8c8073;
  --amber:#c89a4d;--amber2:rgba(184,138,59,0.20);
  --accent-ink:#1a1714;
  --trans-bg:#2a251f;--trans-text:#d7cbb9;
}
/* ── TRUE DARK ────────────────────────────────────────────
   Near-black, cooler neutral dark for OLED / very dark rooms. Still curated
   (soft text, controlled contrast), not a raw invert. */
body[data-theme="dark"]{
  --bg:#0b0b0d;--surface:#16161a;--s2:#202026;
  --border:#34343c;--border2:#45454f;
  --ink:#ececf0;--ink2:#a8a8b2;--ink3:#74747e;
  --amber:#d2a14e;--amber2:rgba(210,161,78,0.18);
  --accent-ink:#111114;
  --trans-bg:#202026;--trans-text:#c4c4cc;
}
/* Dark-theme legibility overrides: anything that paired a literal white text
   with an --ink-filled background now uses --accent-ink so it stays readable
   on the light-on-dark "active" fills. */
body[data-theme="bedtime"] .pill.on,
body[data-theme="dark"] .pill.on,
body[data-theme="bedtime"] .cefr-pill.active,
body[data-theme="dark"] .cefr-pill.active,
body[data-theme="bedtime"] .ch-btn.active,
body[data-theme="dark"] .ch-btn.active,
body[data-theme="bedtime"] .vt-pill.on,
body[data-theme="dark"] .vt-pill.on,
body[data-theme="bedtime"] .exp-btn-save,
body[data-theme="dark"] .exp-btn-save{color:var(--accent-ink)}
body[data-theme="bedtime"] .btn-imp,
body[data-theme="dark"] .btn-imp{color:var(--accent-ink)}
body[data-theme="bedtime"] ruby.cursor,body[data-theme="dark"] ruby.cursor,
body[data-theme="bedtime"] .itw.cursor,body[data-theme="dark"] .itw.cursor{color:var(--accent-ink)}
/* The round play button is filled with --ink; keep its glyph contrasting. */
body[data-theme="bedtime"] .play-btn svg,body[data-theme="dark"] .play-btn svg{stroke:var(--accent-ink);fill:var(--accent-ink)}
/* overflow-x:clip prevents horizontal scroll WITHOUT making html/body a scroll
   container (plain overflow-x:hidden forces overflow-y:auto, which broke the sticky
   reader control bars on mobile — they scrolled away instead of pinning to the top).
   `hidden` is kept first as a fallback for browsers without `clip`. */
html{font-size:16px;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;max-width:100vw;position:relative}

.topbar{height:50px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:12px;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(24,22,15,.04)}
/* Reading mode (desktop): once you scroll into the text, the brand cluster (logo,
   language/text picker, ⋯ menu) steps aside so the reading controls (Pinyin /
   Translation / Play All / Read Speed) stay reachable. Returns at the top. */
@media(min-width:761px){
  body.reading.reading-scrolled .topbar .echo-logo,
  body.reading.reading-scrolled .topbar .tsep,
  body.reading.reading-scrolled .topbar .lang-dropdown,
  body.reading.reading-scrolled .topbar #chooseTextBtn,
  body.reading.reading-scrolled .topbar .top-more{display:none!important}
}
.echo-logo{letter-spacing:-.01em}
.echo-logo{font-family:var(--serif);font-size:1.58rem;font-weight:700;font-style:italic;color:var(--ink);display:flex;align-items:center;gap:7px;flex-shrink:0}
.logo-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0}
.tsep{width:1px;height:18px;background:var(--border);flex-shrink:0}
.lang-dropdown{position:relative;flex-shrink:0}
.lang-trigger{font-family:var(--sans);font-size:.72rem;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;-webkit-appearance:none;display:flex;align-items:center;transition:all var(--tr);min-width:115px;white-space:nowrap;flex-shrink:0;line-height:1;height:32px;box-sizing:border-box}
/* "Choose text" button: never wrap to two lines; swap to a short label on mobile. */
#chooseTextBtn{min-width:0;max-width:160px;justify-content:center}
#chooseTextBtn .ct-short{display:none}
.lang-trigger:hover{border-color:var(--ink2)}
.lang-trigger:focus{outline:none;border-color:var(--amber)}
.lang-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:150px;z-index:9999;display:none;overflow:hidden}
.lang-menu.show{display:block;animation:fadeUp .14s ease}
.lang-opt{display:block;width:100%;text-align:left;font-family:var(--sans);font-size:.72rem;padding:8px 14px;border:none;background:none;color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:background var(--tr)}
.lang-opt:hover{background:var(--s2);color:var(--ink)}
.lang-opt.on{background:var(--s2);color:var(--ink);font-weight:500}
.lang-opt.on::before{content:'• ';color:var(--amber)}
.top-pills{display:flex;gap:4px;flex-shrink:0}
.top-audio{display:inline-flex;gap:5px;align-items:center;flex-shrink:0;margin-left:2px}
.top-audio .pill{white-space:nowrap}
.top-audio .vox-sel{font-size:.67rem;max-width:130px;padding:5px 18px 5px 9px;border-radius:14px;height:auto}
.vs-short{display:none}
#btnPlayTop.on{background:var(--ink);color:var(--accent-ink);border-color:var(--ink)}
.pill{font-family:var(--sans);font-size:.67rem;padding:4px 10px;border-radius:14px;border:1px solid var(--border);background:none;color:var(--ink3);cursor:pointer;transition:all var(--tr);-webkit-appearance:none}
.pill:hover{border-color:var(--amber);color:var(--amber)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* Mobile sticky reading-control bar — hidden by default; shown only on small
   screens while a text is open (see the max-width:760px rule below). */
.mctrl{display:none}
.mctrl .mctrl-btn{flex:0 0 auto;padding:7px 11px;font-size:.74rem;white-space:nowrap}
/* Pronunciation Correction Room — owner-mode banner + a subtle "you are editing"
   strip under the top nav. Uses theme vars so it works in light/bedtime/dark. */
#pronRoomBar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:99990;display:flex;align-items:center;gap:11px;background:var(--ink);color:var(--accent-ink);border-radius:999px;padding:9px 12px 9px 16px;box-shadow:0 12px 34px rgba(0,0,0,.32);font-family:var(--sans);font-size:.8rem;max-width:94vw}
#pronRoomBar .prb-dot{width:8px;height:8px;border-radius:50%;background:var(--amber,#e0a92e);flex-shrink:0;box-shadow:0 0 0 4px rgba(224,169,46,.25)}
#pronRoomBar .prb-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
#pronRoomBar #prbExit{flex-shrink:0;background:var(--accent-ink);color:var(--ink);border:none;border-radius:999px;padding:7px 13px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:var(--sans)}
body.pron-room .topbar{box-shadow:inset 0 -2px 0 var(--amber,#e0a92e)}
body.pron-room .book-head{border-left:3px solid var(--amber,#e0a92e);padding-left:11px}
body.pron-room .sp-btn,body.pron-room .sp-result{display:none!important}   /* correction mode: no read-aloud recording, just text + translation */
.imp-btn{margin-left:auto;font-family:var(--sans);font-size:.67rem;padding:6px 12px;border-radius:999px;border:1px solid var(--border2);background:none;color:var(--ink2);cursor:pointer;-webkit-appearance:none;display:flex;align-items:center;gap:5px;flex-shrink:0;transition:border-color var(--tr),color var(--tr)}
.imp-btn:hover{border-color:var(--amber);color:var(--ink)}
.lang-trigger:hover{border-color:var(--amber)}
.pill:hover{border-color:var(--amber);color:var(--ink2)}
.imp-btn:hover{border-color:var(--amber);color:var(--amber)}

.shell{display:grid;grid-template-columns:var(--lib-w,240px) 1fr var(--dict-w,300px);height:calc(100vh - 50px);transition:grid-template-columns .22s ease}
/* Collapsed dictionary: the right column shrinks away; a floating "Dictionary"
   button (rendered in the reader) lets the user bring it back. */
body.dict-collapsed{--dict-w:0px}
body.dict-collapsed .dict-col{opacity:0;pointer-events:none;border-left:none;overflow:hidden}
/* Collapsed library: the left column shrinks away; a slim "Library" tab on the
   far-left edge (and the top-left toggle) bring it back. Desktop/tablet only. */
body.lib-collapsed{--lib-w:0px}
@media(min-width:761px){
  body.lib-collapsed .lib-col{opacity:0;pointer-events:none;border-right:none;overflow:hidden}
}
/* Tablet: trim the library + dictionary so the reader keeps room. */
@media(min-width:761px) and (max-width:1100px){
  .shell{grid-template-columns:var(--lib-w,200px) 1fr var(--dict-w,260px)}
}
/* Large desktop: allow an even more generous reader. */
@media(min-width:1500px){
  .shell{grid-template-columns:var(--lib-w,260px) 1fr var(--dict-w,340px)}
}
@media(max-width:760px){
  /* Offset content below the fixed topbar (50px) — and the fixed mctrl (+42px) while reading. */
  .shell{display:flex;flex-direction:column;height:auto;width:100%;max-width:100vw;overflow-x:hidden;padding-top:50px}
  body.reading .shell{padding-top:92px}
  .read-col{width:100%;max-width:100vw;min-width:0;overflow-x:hidden}
  .read-area{padding:18px 14px 46px!important;width:100%;max-width:100vw;overflow-x:hidden}
  .book-head{max-width:100vw;overflow-x:hidden}
  .ch-content{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
  /* Mobile library = full-height slide-in drawer (opened via ☰ in topbar).
     Uses translateX so the closed drawer never widens the page. */
  .lib-col{
    position:fixed!important;top:50px;left:0;bottom:0;width:84%;max-width:330px;
    height:auto!important;max-height:none!important;
    border-right:1px solid var(--border)!important;border-bottom:none!important;
    z-index:460;background:var(--surface);
    transform:translateX(-104%);
    transition:transform .26s cubic-bezier(.4,.0,.2,1);
    box-shadow:2px 0 24px rgba(0,0,0,.18);
    display:flex;flex-direction:column;
    will-change:transform;
  }
  body.lib-open .lib-col{transform:translateX(0)}
  .lib-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:3px 0 26px;max-width:100%}
  /* Larger tap targets on mobile */
  .auth-lbl{font-size:.74rem!important;padding:14px 18px 13px!important}
  .bk-btn{padding:13px 18px!important;max-width:100%}
  .bk-title{font-size:.92rem!important;line-height:1.3!important}
  .bk-meta{font-size:.72rem!important;margin-top:3px!important}
  .bk-lvl{top:12px!important;right:12px!important;font-size:.62rem!important;padding:3px 8px!important}
  .bk-del.always{top:12px!important;right:12px!important;width:26px!important;height:26px!important;font-size:15px!important}
  .cefr-pill{font-size:.72rem!important;padding:8px 8px!important}
  .cefr-filter{padding:10px 14px 8px!important;gap:6px!important;flex-wrap:wrap}
  .lib-backdrop{position:fixed;inset:0;top:50px;background:rgba(0,0,0,.32);z-index:455;opacity:0;pointer-events:none;transition:opacity .26s ease;display:block}
  body.lib-open .lib-backdrop{opacity:1;pointer-events:auto}
  .lib-head{position:relative}
  .lib-close{display:flex!important}
  /* The inline chapter-button row is HIDDEN on mobile. Chapters are reached via
     the "Chapters" button + a full-screen picker, so the reader opens straight
     at the chapter title/content. This also prevents a long button row from
     forcing horizontal page width. */
  .ch-nav{display:none!important}
  .ch-pick-btn{display:inline-flex!important}
  .lib-toggle{display:inline-flex!important}
  .audio-dock{padding:0 14px!important;height:auto!important;flex-wrap:wrap;gap:8px 10px!important;padding-top:10px!important;padding-bottom:10px!important;max-width:100vw;overflow-x:hidden}
  /* Responsive top bar: keep essentials, collapse the rest behind a … menu. */
  /* The reader has more controls than fit one phone row. Rather than clip them,
     let the bar WRAP onto a second row — every control stays full-size, visible
     and tappable, and the dropdown menus (which hang below the bar) are never
     clipped. Compact sizing keeps it to ~1–2 tidy rows. */
  /* FIXED (not sticky) so the bar can't scroll away on mobile browsers that don't
     support overflow:clip (they fall back to overflow-x:hidden, which breaks sticky).
     Single 50px row — the few visible controls (logo / language / Text / ⋯) fit. */
  .topbar{padding:0 10px!important;gap:6px;max-width:100vw;height:50px;min-height:50px;flex-wrap:nowrap;overflow:visible;position:fixed;top:0;left:0;right:0;width:100%}
  .topbar>*{flex-shrink:0}
  .echo-logo{font-size:1.15rem}
  .tsep{display:none}
  .lang-trigger{min-width:0!important;padding:6px 9px!important;font-size:.68rem!important;white-space:nowrap}
  .lang-trigger #langCurrent{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Compact "Text" label on mobile so the button never wraps or grows tall. */
  #chooseTextBtn{padding:6px 10px!important;height:32px}
  #chooseTextBtn .ct-full{display:none}
  #chooseTextBtn .ct-short{display:inline}
  /* Pinyin/Translation pills + Add Document text move into the overflow menu */
  .top-pills{display:none!important}
  /* Mobile top bar: keep only the two quick actions visible as icons — ▶ Play and
     📓 Notebook. Voice speed and Voice selection move into the ⋯ menu (Speed is
     there as a tappable item; voice uses the default). Pinyin/Translation are also
     in ⋯. This keeps the bar uncluttered and nothing gets clipped. */
  /* All reader controls are now reachable by scrolling the bar, so show them all
     compactly (Play ▶, Voice speed, Voice, Notebook). */
  .top-audio .ta-lbl{display:none}
  .top-audio .vs-full{display:none}
  .top-audio .vs-short{display:inline}
  .top-audio{gap:4px}
  .top-audio .pill{padding:6px 9px;font-size:.77rem}
  .top-audio .vox-sel{max-width:96px;font-size:.66rem;padding:4px 16px 4px 8px}
  /* Trim the language label a touch; the bar scrolls for anything beyond it. */
  #langCurrent{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
  .tsep{display:none}
  .imp-btn .imp-label{display:none}
  .imp-btn{margin-left:6px!important;padding:6px 8px!important}
  .imp-btn.imp-add{margin-left:6px!important}
  /* Declutter: collapse the secondary controls into the overflow menu so the
     mobile bar stays ONE clean row: Echo / language / Choose text / Play / more. */
  #btnPlayTop,#btnSpeedTop,#btnReadSpeed,#voiceSel,#btnNbTop{display:none!important}
  .imp-btn.imp-add,#libBrowseBtn,#acctBtn,#settingsBtn{display:none!important}
  .top-more{display:inline-flex!important;margin-left:auto}
  /* Sticky compact reading-control bar (mobile only, while a text is open):
     Pinyin | Translation | Play/Pause | Speed. Sits just below the top nav so it
     never scrolls out of reach. Pinyin button shows only for Chinese texts. */
  body.reading .mctrl{display:flex;gap:6px;align-items:center;position:fixed;top:50px;left:0;right:0;width:100%;z-index:99;padding:7px 10px;min-height:42px;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 2px 6px rgba(24,22,15,.05);overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100vw}

  /* Prevent any translation box / sentence row from exceeding the viewport */
  .line-it,.line-en,.sent-block,.sent-wrap{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
  .ch-translate-btn{max-width:100%;white-space:normal;text-align:left}
  .prog-sec{display:none!important}   /* phone already shows the in-reader section progress bar */
  .prog-row{flex-wrap:wrap;gap:7px 9px;max-width:100%}
  .find-bar{padding:8px 14px!important;flex-wrap:wrap;max-width:100vw}
  .find-bar input{min-width:0;flex:1}

  /* On mobile the right-side dictionary panel is hidden entirely; lookups
     show in a compact floating bubble (#wordBubble) near the tapped word. */
  .dict-col{display:none!important}
  .dict-backdrop{display:none!important}
}
/* The handle and X are mobile-only; hidden on desktop */
.dict-sheet-handle{display:none}
.dict-sheet-x{display:none}
.dict-backdrop{display:none}

/* ── Floating definition bubble (mobile only) ── */
.word-bubble{
  display:none;position:fixed;z-index:600;
  max-width:300px;min-width:190px;width:max-content;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 14px 40px rgba(24,22,15,.20);
  padding:14px 15px 12px;font-family:var(--sans);
  -webkit-overflow-scrolling:touch;max-height:54vh;overflow-y:auto;
}
.word-bubble.show{display:block}
.wb-arrow{position:absolute;width:12px;height:12px;background:var(--surface);border:1px solid var(--border2);transform:rotate(45deg);z-index:-1}
.wb-arrow.up{top:-7px;border-right:none;border-bottom:none}
.wb-arrow.down{bottom:-7px;border-left:none;border-top:none}
.wb-x{position:absolute;top:6px;right:7px;width:24px;height:24px;border:none;background:var(--s2);border-radius:50%;color:var(--ink2);font-size:1rem;line-height:1;cursor:pointer;-webkit-appearance:none;padding:0;display:flex;align-items:center;justify-content:center}
.wb-x:hover{background:var(--border);color:var(--ink)}
.wb-word{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--ink);line-height:1.2;padding-right:26px;margin-bottom:2px}
.wb-py{font-size:.8rem;font-style:italic;color:var(--amber);letter-spacing:.03em;margin-bottom:4px;display:none}
.wb-py.on{display:block}
.wb-base{font-size:.72rem;color:var(--ink2);margin-bottom:5px;padding:4px 7px;background:var(--s2);border-left:2px solid var(--amber);border-radius:3px;line-height:1.4;display:none}
.wb-base.on{display:block}
.wb-meaning{font-size:.86rem;color:var(--ink);line-height:1.45;font-weight:500;margin-bottom:4px}
.wb-eng{font-size:.72rem;color:var(--ink2);line-height:1.4;margin-bottom:5px;display:none}
.wb-eng.on{display:block}
.wb-phrase{font-size:.72rem;color:var(--ink2);line-height:1.45;margin-bottom:7px;padding:5px 7px;background:var(--s2);border-radius:4px;display:none}
.wb-phrase.on{display:block}
.wb-phrase .wbp-zh{color:var(--ink);font-weight:500}
.wb-grammar{font-size:.68rem;color:var(--ink3);font-style:italic;line-height:1.4;margin-bottom:7px;display:none}
.wb-grammar.on{display:block}
.wb-actions{display:flex;gap:6px;align-items:center}
.wb-hear,.wb-more{font-family:var(--sans);font-size:.68rem;padding:6px 10px;border-radius:13px;border:1px solid var(--border);background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:all var(--tr)}
.wb-hear:hover,.wb-more:hover{border-color:var(--amber);color:var(--amber)}
.wb-loading{font-size:.8rem;font-style:italic;color:var(--ink3)}
@media(max-width:760px){.dict-backdrop{display:block}}
/* Mobile library drawer toggle + backdrop — hidden on desktop */
/* Library toggle: hamburger in the top-left. On mobile it opens the drawer;
   on desktop it collapses/expands the left column. Visible in both layouts. */
.lib-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border2);background:none;color:var(--ink2);border-radius:var(--r);cursor:pointer;-webkit-appearance:none;flex-shrink:0;padding:0;transition:all var(--tr)}
.lib-toggle:hover{border-color:var(--amber);color:var(--amber)}
/* Slim "Library" tab on the far-left edge, shown only when the desktop library
   is collapsed, to bring it back. Hidden on mobile. */
.lib-show-tab{display:none;position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:120;writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--sans);font-size:.66rem;letter-spacing:.06em;padding:14px 7px;border:1px solid var(--border2);border-left:none;border-radius:0 10px 10px 0;background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;box-shadow:2px 0 12px rgba(0,0,0,.10);transition:all var(--tr)}
.lib-show-tab:hover{border-color:var(--amber);color:var(--amber)}
@media(min-width:761px){body.lib-collapsed .lib-show-tab{display:inline-flex}}
@media(max-width:760px){.lib-show-tab{display:none!important}}
.lib-toggle:hover{border-color:var(--amber);color:var(--amber)}
.lib-close{display:none;position:absolute;top:10px;right:10px;width:30px;height:30px;align-items:center;justify-content:center;border:none;background:var(--s2);border-radius:50%;color:var(--ink2);font-size:1.25rem;line-height:1;cursor:pointer;-webkit-appearance:none;padding:0;z-index:3}
.lib-close:hover{background:var(--border);color:var(--ink)}
.lib-backdrop{display:none}

/* ── Mobile "Chapters" button (in the book head) — hidden on desktop ── */
.ch-pick-btn{display:none;align-items:center;gap:6px;font-family:var(--sans);font-size:.78rem;padding:8px 14px;margin:10px 0 2px;border:1px solid var(--border2);border-radius:18px;background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;max-width:100%}
.ch-pick-btn:hover{border-color:var(--amber);color:var(--amber)}
.ch-pick-btn .cpb-count{color:var(--ink3);font-size:.7rem}

/* ── Chapter picker modal (mobile) ── */
.ch-picker-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:700;display:none;opacity:0;transition:opacity .2s ease}
.ch-picker-bg.show{display:block;opacity:1}
.ch-picker{position:fixed;left:0;right:0;bottom:0;z-index:701;background:var(--surface);border-radius:16px 16px 0 0;max-height:78vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 28px rgba(0,0,0,.22);padding-bottom:env(safe-area-inset-bottom,0)}
.ch-picker-bg.show .ch-picker{transform:translateY(0)}
.ch-picker-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative}
.ch-picker-handle{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:var(--border2);opacity:.7}
.ch-picker-title{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink);margin-top:4px}
.ch-picker-x{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:var(--s2);border-radius:50%;color:var(--ink2);font-size:1.25rem;line-height:1;cursor:pointer;-webkit-appearance:none;padding:0}
.ch-picker-x:hover{background:var(--border);color:var(--ink)}
.ch-picker-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 14px;flex:1}
.cp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:14px 18px;border:none;background:none;color:var(--ink2);cursor:pointer;-webkit-appearance:none;font-family:var(--sans);font-size:.92rem;line-height:1.35;border-bottom:1px solid var(--border)}
.cp-item:hover{background:var(--s2)}
.cp-lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-lbl-sub{font-size:.78rem;color:var(--ink3);line-height:1.34;font-weight:400}
.cp-item.active{background:var(--amber2);color:var(--ink);font-weight:500}
.cp-item.active .cp-num{color:var(--amber)}
.cp-num{flex-shrink:0;font-size:.72rem;color:var(--ink3);min-width:30px}
.cp-check{margin-left:auto;color:var(--amber);flex-shrink:0;display:none}
.cp-item.active .cp-check{display:inline}

/* ── Top overflow menu (mobile … button) — hidden on desktop ── */
.top-more{display:none;position:relative;flex-shrink:0}
.top-more-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border2);background:none;color:var(--ink2);border-radius:var(--r);cursor:pointer;-webkit-appearance:none;padding:0}
.top-more-btn:hover{border-color:var(--amber);color:var(--amber)}
.top-more-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);min-width:170px;z-index:160;display:none;overflow:hidden;padding:4px}
.top-more-menu.show{display:block;animation:fadeUp .14s ease}
.tmm-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;font-family:var(--sans);font-size:.8rem;padding:10px 12px;border:none;background:none;color:var(--ink2);cursor:pointer;-webkit-appearance:none;border-radius:6px}
.tmm-item:hover{background:var(--s2);color:var(--ink)}
.tmm-item .tmm-state{font-size:.66rem;color:var(--ink3)}
.tmm-item.on .tmm-state{color:var(--amber)}
/* Assign-reading text cards: clear, theme-amber click affordance + selected state. */
.asg-book-card{position:relative;-webkit-appearance:none;appearance:none}
.asg-book-card:hover{border-color:var(--amber)!important;box-shadow:0 3px 12px rgba(184,131,42,.14)}
.asg-book-card:active{transform:scale(.99)}
.asg-book-card.sel::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--amber)}

.lib-col{border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;position:sticky;top:0;height:calc(100vh - 50px);display:flex;flex-direction:column;min-width:0}
.lib-head{padding:18px 16px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2;flex-shrink:0}
.lib-title{font-family:var(--serif);font-size:1.12rem;font-weight:700;font-style:italic;letter-spacing:-.01em;color:var(--ink)}
.lib-sub{font-size:.6rem;color:var(--ink3);letter-spacing:.07em;text-transform:uppercase;margin-top:2px}
.lib-scroll{flex:1;overflow-y:auto;padding:3px 0 18px}
.auth-sec{padding:11px 0 0}
.auth-lbl{font-size:.59rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:7px 15px 6px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:color var(--tr);background:none;border:none;width:100%;text-align:left;font-family:var(--sans)}
.auth-lbl:hover{color:var(--ink)}
.auth-lbl .auth-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-lbl .auth-count{font-size:.55rem;color:var(--ink3);font-weight:400;margin-left:6px;letter-spacing:.05em}
.auth-lbl .auth-chev{display:inline-block;width:10px;height:10px;margin-left:8px;flex:none;position:relative}
.auth-lbl .auth-chev::before{content:'';position:absolute;left:1px;top:2px;width:6px;height:6px;border-right:1.5px solid var(--ink3);border-bottom:1.5px solid var(--ink3);transform:rotate(45deg);transition:transform var(--tr)}
.auth-sec.collapsed .auth-lbl .auth-chev::before{transform:rotate(-45deg);top:4px}
.auth-sec.collapsed .auth-list{display:none}
.auth-list{display:block}
/* Subtle sub-grouping inside a category (e.g. "Echo Originals" → "Everyday Chinese"). */
.auth-subhead{font-size:.55rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);opacity:.8;padding:11px 15px 3px 22px}
.auth-list>.auth-subhead:first-child{padding-top:4px}
.bk-btn{display:block;text-align:left;background:var(--surface);border:1px solid transparent;cursor:pointer;padding:11px 13px;margin:5px 9px;border-radius:13px;transition:background var(--tr),border-color var(--tr),box-shadow var(--tr);position:relative}
.bk-btn.bk-draggable{cursor:grab}
.bk-btn.bk-draggable:active{cursor:grabbing}
.bk-btn.bk-dragging{opacity:.4}
.bk-folder{position:absolute;bottom:8px;right:10px;background:none;border:none;color:var(--ink3);opacity:.45;cursor:pointer;padding:3px;border-radius:7px;line-height:0;transition:opacity var(--tr),color var(--tr),background var(--tr)}
.bk-btn:hover .bk-folder{opacity:.85}
.bk-folder:hover{opacity:1;color:var(--amber);background:var(--s2)}
.lib-newfolder{display:block;width:calc(100% - 18px);margin:8px 9px 4px;padding:9px;border:1px dashed var(--border);background:none;border-radius:10px;color:var(--ink3);font:600 .72rem/1 var(--sans);cursor:pointer;transition:border-color var(--tr),color var(--tr)}
.lib-newfolder:hover{border-color:var(--amber);color:var(--amber)}
.auth-sec.drop-hot{outline:2px dashed var(--amber,#B8832A);outline-offset:-3px;border-radius:10px;background:rgba(184,131,42,.07)}
.bk-btn::before{display:none}
.bk-btn:hover{background:var(--s2);border-color:var(--border)}
.bk-btn.active{background:var(--amber2);border-color:rgba(184,131,42,.45);box-shadow:0 3px 12px rgba(184,131,42,.11)}
.bk-del{position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.04);border:none;cursor:pointer;color:var(--ink3);font-size:11px;line-height:1;display:none;align-items:center;justify-content:center;-webkit-appearance:none;padding:0;transition:all var(--tr);font-family:var(--sans)}
.bk-btn:hover .bk-del,.bk-btn .bk-del.always{display:flex}
.bk-del:hover{background:#c0392b;color:#fff}
.ch-translate-btn{display:inline-flex;align-items:center;font-family:var(--sans);font-size:.66rem;padding:5px 10px;margin-left:14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:all var(--tr);vertical-align:middle}
.ch-translate-btn:hover{border-color:var(--amber);color:var(--amber)}
.ch-translate-btn:disabled{opacity:.5;cursor:not-allowed}
.bk-title{font-size:.84rem;color:var(--ink);line-height:1.32;display:block;font-family:var(--serif);padding-right:50px}
.bk-meta{font-size:.63rem;color:var(--ink3);display:block;margin-top:3px;font-style:italic;padding-right:50px}
.bk-btn.active .bk-title{font-weight:600}
.bk-prog{margin-top:3px;height:2px;background:var(--border);border-radius:1px;overflow:hidden}
.bk-prog-fill{height:100%;background:var(--amber);border-radius:1px;transition:width .4s}
.bk-imp{font-size:.55rem;color:var(--amber);letter-spacing:.05em;text-transform:uppercase;margin-top:1px;display:block}
.bk-lvl{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:999px;border:1px solid transparent;background:var(--s2);color:var(--ink3);white-space:nowrap}
.bk-lvl.lvl-low{background:#edf2ea;color:#5d7257;border-color:#dbe6d4}
.bk-lvl.lvl-mid{background:var(--amber2);color:#8a6320;border-color:rgba(184,131,42,.32)}
.bk-lvl.lvl-high{background:#f3e8e2;color:#8a4d36;border-color:#e7d4ca}
.cefr-filter{display:flex;gap:4px;padding:8px 12px 6px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface)}
.lib-mode-tabs{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface)}
.lib-mode-tab{flex:1;padding:8px 6px;border:1px solid var(--border);background:transparent;border-radius:999px;font:700 .62rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);cursor:pointer;transition:all var(--tr)}
.lib-mode-tab:hover{border-color:var(--amber);color:var(--amber)}
.lib-mode-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lib-asg{padding:10px 12px 8px;border-bottom:1px solid var(--border);background:var(--amber2,rgba(184,131,42,.06))}
.lib-asg-h{font-family:var(--sans);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin:0 2px 8px}
.lib-asg-item{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin-bottom:7px;cursor:pointer;font-family:var(--sans);transition:border-color var(--tr)}
.lib-asg-item:hover{border-color:var(--amber)}
.lib-asg-t{display:block;font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.3}
.lib-asg-m{display:block;font-size:.66rem;color:var(--ink3);margin-top:3px;line-height:1.35}
.lib-asg-pill{display:inline-block;margin-top:6px;font-size:.56rem;font-weight:700;color:#fff;text-transform:capitalize;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.cefr-pill{font-family:var(--sans);font-size:.6rem;padding:3px 8px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--ink3);cursor:pointer;-webkit-appearance:none;transition:all var(--tr);letter-spacing:.02em;flex:1;min-width:0;text-align:center;white-space:nowrap}
.cefr-pill:hover{border-color:var(--amber);color:var(--amber)}
.cefr-pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.exp-btn{font-family:var(--sans);font-size:.66rem;padding:5px 11px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:all var(--tr);letter-spacing:.02em}
.exp-btn:hover{border-color:var(--amber);color:var(--amber)}
.exp-btn-save{background:var(--ink);border-color:var(--ink);color:#fff}
.exp-btn-save:hover{background:var(--amber);border-color:var(--amber);color:#fff}
.exp-btn-ok{background:#e8f5e9;border-color:#a5d6a7;color:#2e7d32}
.exp-btn-clear:hover{border-color:#c0392b;color:#c0392b}
.sent-wrap.pstart{margin-top:20px}
.sent-wrap.heading-wrap{margin-top:28px;margin-bottom:14px;text-align:left}
.line-heading{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink);font-weight:500;line-height:1.4;padding:4px 0}
.line-heading.lh-h1{font-size:1.3rem;font-weight:600;font-style:normal;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:6px}
.line-heading.lh-h2{font-size:1.15rem;font-weight:500}
.line-heading.lh-h3{font-size:1.05rem;font-weight:500;font-style:italic}
.epub-dbg{margin-top:10px;padding:10px 12px;background:var(--s2);border:1px solid var(--border);border-radius:5px;font-family:'SF Mono','Menlo',Consolas,monospace;font-size:.66rem;line-height:1.5;white-space:pre;max-height:340px;overflow:auto;color:var(--ink)}

.read-col{background:var(--bg);display:flex;flex-direction:column;min-width:0;min-height:calc(100vh - 50px)}
.book-head{background:var(--surface);border-bottom:1px solid var(--border);padding:18px 28px 16px;flex-shrink:0;display:none;box-shadow:0 1px 3px rgba(24,22,15,.03)}
.bh-title{font-family:var(--serif);font-size:1.6rem;font-weight:700;font-style:italic;letter-spacing:-.01em;color:var(--ink);line-height:1.18}
.bh-meta{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
/* Assignment card — lives in the reader under the book header (NOT in the dictionary
   sidebar). Compact, collapsible; styled like the reader's own chrome, not a warning box. */
.asg-card{background:var(--s2);border-bottom:1px solid var(--border);padding:9px 28px 11px;flex-shrink:0;font-family:var(--sans)}
.asg-card-head{display:flex;align-items:center;gap:9px}
.asg-card-title{flex:1;min-width:0;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3)}
.asg-card-btn{background:none;border:1px solid var(--border);border-radius:999px;color:var(--ink2);font-size:.68rem;padding:3px 11px;cursor:pointer;white-space:nowrap;font-family:var(--sans)}
.asg-card-btn:hover{color:var(--ink);border-color:var(--ink3)}
.asg-card-x{background:none;border:none;color:var(--ink3);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.asg-card-x:hover{color:var(--ink)}
.asg-card-strip{margin-top:6px;font-size:.78rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.45}
.asg-card-details{margin-top:9px;border-top:1px solid var(--border);padding-top:9px}
.asg-card-do{font-size:.82rem;line-height:1.5}
.asg-card-meta{margin-top:10px;border-top:1px solid var(--border);padding-top:5px}
@media(max-width:760px){.asg-card{padding:8px 14px 10px}}
.ch-nav{background:var(--s2);border-bottom:1px solid var(--border);padding:7px 20px;display:none;overflow-x:auto;flex-shrink:0;gap:5px;-webkit-overflow-scrolling:touch}
.ch-nav.show{display:flex}
.ch-btn{font-family:var(--sans);font-size:.67rem;padding:4px 10px;border-radius:13px;border:1px solid var(--border);background:var(--surface);color:var(--ink2);cursor:pointer;white-space:nowrap;flex-shrink:0;-webkit-appearance:none;transition:all var(--tr)}
.ch-btn:hover{border-color:var(--amber);color:var(--amber)}
.ch-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.prog-sec{background:var(--surface);border-bottom:1px solid var(--border);padding:11px 28px;flex-shrink:0;display:none}
.prog-sec.show{display:block}
.prog-row{display:flex;align-items:center;gap:11px}
.prog-lbl{font-size:.64rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);min-width:72px}
.prog-track{flex:1;height:6px;background:var(--s2);border-radius:999px;overflow:hidden}
.prog-fill{height:100%;background:var(--amber);border-radius:999px;transition:width .5s}
.prog-pct{font-size:.64rem;font-weight:600;color:var(--ink2);min-width:2.6rem;text-align:right}
.prog-tog{font-size:.58rem;color:var(--ink3);cursor:pointer;padding:2px 7px;border:1px solid var(--border);border-radius:9px;background:none;-webkit-appearance:none;flex-shrink:0}
.prog-tog:hover{border-color:var(--amber);color:var(--amber)}
.find-bar{display:flex;align-items:center;gap:8px;padding:8px 18px;background:var(--surface);border-bottom:1px solid var(--border);font-family:var(--sans)}
.find-input{flex:1;font-family:var(--sans);font-size:.75rem;padding:6px 12px;border:1px solid var(--border);border-radius:14px;background:var(--s2);color:var(--ink);outline:none;-webkit-appearance:none;min-width:0}
.find-input:focus{border-color:var(--amber)}
.find-count{font-size:.62rem;color:var(--ink3);min-width:55px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.find-nav{font-size:.85rem;line-height:1;color:var(--ink3);cursor:pointer;padding:4px 9px;border:1px solid var(--border);border-radius:9px;background:none;-webkit-appearance:none;flex-shrink:0}
.find-nav:hover{border-color:var(--amber);color:var(--amber)}
.find-close{font-size:1.1rem;line-height:1;color:var(--ink3);cursor:pointer;padding:2px 8px;border:none;background:none;-webkit-appearance:none;flex-shrink:0}
.find-close:hover{color:var(--ink)}
.find-hit{background:#fff3a8;border-radius:2px;padding:0 1px}
.find-hit-cur{background:#ff8c00;color:#fff;border-radius:2px;padding:0 1px}

.read-area{flex:1;max-width:1240px;width:100%;margin:0 auto;padding:34px 36px 64px;overflow-y:auto;position:relative;background:var(--bg)}
/* the text floats on a warm "page" — wide, designed reading canvas; text stays calm */
#textBody{max-width:none;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 6px 30px rgba(24,22,15,.07);padding:44px 56px}
@media (max-width:700px){.read-area{padding:18px 12px 56px}#textBody{padding:24px 20px;border-radius:14px}}
/* Hide the browser's native scrollbar wherever the reader content scrolls.
   We have our own .progress-rail showing the same information — keeping the
   native bar visible too creates the appearance of two duplicate right-side
   progress indicators. Scrolling continues to work; only the visible track
   is hidden. Firefox uses `scrollbar-width:none`; WebKit/Chromium uses the
   ::-webkit-scrollbar pseudo. */
.read-area{scrollbar-width:none}
.read-area::-webkit-scrollbar{width:0;height:0;display:none}
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
/* Sticky section-progress bar pinned to the top of the scrolling reader.
   Always shows progress through the CURRENT chapter (not the whole book),
   driven by readArea.scrollTop. Slim, subtle; visible on mobile and desktop. */
.sec-prog{display:none}   /* removed: redundant with the top "This chapter / Whole book" bar (desktop) and the vertical rail (mobile) */
.sec-prog-lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:.02em;color:var(--ink3);white-space:nowrap;flex-shrink:0}
.sec-prog-track{flex:1;height:2px;background:var(--border);border-radius:1px;overflow:hidden;min-width:0}
.sec-prog-fill{height:100%;width:0%;background:var(--amber);border-radius:1px;transition:width .15s linear}
/* ── VERTICAL READING-PROGRESS RAIL ───────────────────
   Thin gold line fixed to the right edge of the viewport. Shows how far the
   reader has scrolled through the CURRENT CHAPTER (not the whole book). High
   z-index so nothing covers it on desktop or mobile. Native scrollbars are
   hidden above so this rail is the only vertical progress indicator on the
   right side. The fill height is updated from scrollTop / (scrollHeight -
   clientHeight) of whichever element actually scrolls (the .read-area on
   desktop, the window on mobile). */
.progress-rail{position:fixed;right:6px;top:120px;bottom:90px;width:3px;background:rgba(0,0,0,0.12);border-radius:999px;z-index:9999;pointer-events:none;transition:opacity .18s ease}
.progress-fill{width:100%;height:0%;background:#b08a3c;border-radius:999px;transition:height 80ms linear}
.progress-rail.progress-hidden{opacity:0}
/* Never let the reader's scroll rail bleed over the public landing page (they share
   z-index 9999, and the rail sits later in the DOM). */
body.echo-landing-open .progress-rail{display:none!important}
/* Desktop: nudge the rail in a touch so it sits at the panel's outside edge,
   not on top of it. (Still on the right edge of the viewport, just clear of
   the panel border.) When the panel is collapsed, --dict-w=0 and the rail
   sits at 6px from the edge. */
@media(min-width:761px){
  /* Desktop shows only the top "This chapter / Whole book" bar; hide the vertical rail. */
  .progress-rail{display:none!important;right:calc(var(--dict-w,300px) + 6px);top:90px;bottom:110px}
}
/* Bedtime / True Dark — keep the track + fill visible against dark surfaces. */
body[data-theme="bedtime"] .progress-rail{background:rgba(255,255,255,.14)}
body[data-theme="bedtime"] .progress-fill{background:#c89a4d}
body[data-theme="dark"] .progress-rail{background:rgba(255,255,255,.14)}
body[data-theme="dark"] .progress-fill{background:#d2a14e}
@media(max-width:760px){
  .sec-prog{margin:-18px -14px 14px;padding:7px 14px;top:-18px}
  .sec-prog-lbl{font-size:.6rem}
}
/* When the dictionary is collapsed the reader has more room — let it breathe a
   touch wider so the page never feels empty. */
body.dict-collapsed .read-area{max-width:1320px}
body.lib-collapsed .read-area{max-width:1320px}
body.lib-collapsed.dict-collapsed .read-area{max-width:1400px}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ch-content{animation:fadeUp .26s ease both}
/* End-of-chapter navigation bar */
.ch-bottom-nav{display:flex;align-items:stretch;gap:8px;margin-top:38px;padding-top:18px;border-top:1px solid var(--border)}
.cbn-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sans);font-size:.78rem;padding:11px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:all var(--tr);min-height:44px;line-height:1.2}
.cbn-btn:hover:not(.cbn-disabled){border-color:var(--amber);color:var(--amber)}
.cbn-top{flex:0 0 auto;min-width:74px}
.cbn-arrow{font-size:1rem;line-height:1}
.cbn-disabled{opacity:.4;cursor:default}
.cbn-end{font-style:italic;color:var(--ink3)}
@media(max-width:760px){
  .ch-bottom-nav{gap:6px;margin-top:30px}
  .cbn-btn{font-size:.82rem;padding:13px 8px;min-height:48px}
  .cbn-lbl{font-size:.82rem}
  .cbn-top{min-width:62px}
}
.ch-title-el{font-family:var(--serif);font-size:1.18rem;font-style:italic;color:var(--ink);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);line-height:1.3}
.ch-sub{font-family:var(--sans);font-size:.7rem;color:var(--ink3);display:block;margin-top:3px;font-style:normal}
.ch-title-tr{font-family:var(--sans);font-size:.85rem;font-style:normal;color:var(--ink2);display:block;margin-top:6px;line-height:1.35}
.ch-title-tr.tr-zh{font-family:var(--zh),var(--sans);font-size:1rem}
/* "About this text" blurb shown once at the top of a book's first chapter.
   Discreet, in the reader's L1; sits between the title and the first sentence. */
.about-blurb{margin:0 0 24px;padding:14px 16px;background:var(--s2);border-left:3px solid var(--amber);border-radius:var(--r);font-family:var(--sans);font-size:.78rem;line-height:1.65;color:var(--ink2)}
.about-blurb-label{display:block;font-style:italic;color:var(--ink3);font-size:.7rem;margin-bottom:6px;letter-spacing:.02em}
.about-blurb.l1-zh,.about-blurb.l1-zh .about-blurb-label{font-family:var(--zh),var(--sans)}
.about-blurb.l1-zh{font-size:.85rem;line-height:1.7}
/* Old English audio warning banner — appears under the about-blurb on any
   book with subLang:'ang' (Beowulf). Communicates that audio is off because
   the browser voice would mispronounce Old English, and offers an opt-in. */
.oe-banner{margin:-12px 0 24px;padding:12px 14px;background:var(--s2);border:1px solid var(--amber);border-radius:var(--r);font-family:var(--sans);font-size:.76rem;line-height:1.6;color:var(--ink2)}
.oe-banner-title{font-weight:600;color:var(--ink);font-size:.8rem;margin-bottom:5px;letter-spacing:.01em}
.oe-banner-body{margin-bottom:9px}
.oe-banner-credit{margin:5px 0 0;font-size:.7rem;color:var(--ink3);line-height:1.5}
.oe-banner-credit a{color:var(--accent);text-decoration:none}
.oe-banner-credit a:hover{text-decoration:underline}
.oe-banner-actions{display:flex;gap:8px;margin-top:10px}
.oe-banner-btn{appearance:none;border:1px solid var(--amber);background:transparent;color:var(--ink);padding:6px 12px;border-radius:var(--r);font-family:var(--sans);font-size:.74rem;cursor:pointer;transition:background .12s}
.oe-banner-btn:hover{background:var(--amber);color:var(--bg)}
.line-heading-tr{font-family:var(--sans);font-size:.78rem;font-style:normal;color:var(--ink3);margin-top:4px;line-height:1.4}
.line-heading-tr.tr-zh{font-family:var(--zh),var(--sans);font-size:.9rem}

/* Inline reader "View" toggles near the chapter title (pinyin / translation).
   Visual-only display switches — they never alter the underlying text data. */
.view-toggles{display:flex;align-items:center;gap:7px;margin-top:13px;flex-wrap:wrap}
.vt-label{font-family:var(--sans);font-size:.6rem;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-right:1px}
.vt-pill{font-family:var(--sans);font-size:.72rem;font-style:normal;padding:5px 12px 5px 10px;border-radius:14px;border:1px solid var(--border2);background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:all var(--tr);display:inline-flex;align-items:center;gap:5px;line-height:1.1}
.vt-pill:hover{border-color:var(--amber);color:var(--amber)}
.vt-pill .vt-check{width:13px;height:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity var(--tr)}
.vt-pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vt-pill.on .vt-check{opacity:1}
.vt-pill.on:hover{color:#fff;border-color:var(--ink)}

.sent-wrap{margin-bottom:14px}
.sent-block{display:block;border-radius:9px;padding:6px 9px;transition:background var(--tr);cursor:pointer;-webkit-tap-highlight-color:transparent;margin:2px -3px}
.sent-block:hover{background:rgba(24,22,15,.05)}
.sent-block.sel{background:rgba(24,22,15,.08)}
.sent-block.speaking{background:var(--amber2)!important}
/* Karaoke-style word highlighting during TTS playback.
   .cursor   = the word currently being spoken (bright amber, white text)
   .passed   = words that have been spoken already (faded amber underline)
   Combined, the reader sees a clear left-to-right reading position with
   visual evidence of what's been read so far, even when boundary events
   skip individual words. */
ruby.passed,.itw.passed{background:rgba(184,131,42,0.18);border-radius:3px;transition:background 120ms ease}
ruby.cursor,.itw.cursor{background:var(--amber);color:#fff;border-radius:3px;transition:background 90ms ease,color 90ms ease;box-shadow:0 0 0 1px var(--amber)}
ruby.cursor rt{color:#fff!important}

/* Warm, on-brand text selection. INSIDE the reading text the native selection is
   hidden and a soft, rounded overlay is drawn instead (_nbDrawOverlay), so a
   highlighted phrase never looks blocky. Elsewhere, a gentle warm tint. */
::selection{background:rgba(184,131,42,.20)}
::-moz-selection{background:rgba(184,131,42,.20)}
.line-zh ::selection,.line-it ::selection,.line-en ::selection,.line-zh::selection,.line-it::selection,.line-en::selection{background:transparent}
.line-zh ::-moz-selection,.line-it ::-moz-selection,.line-en ::-moz-selection{background:transparent}
.line-zh{font-family:var(--zh);font-size:var(--original-zh-font-size);color:var(--ink);display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 6px;padding-top:14px;padding-bottom:6px;user-select:text;-webkit-user-select:text}
ruby{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:3px;padding:2px 1px 0;transition:background var(--tr);line-height:1}
ruby rt{font-family:var(--sans);font-size:var(--pinyin-font-size);color:var(--amber);line-height:1.1;display:block;text-align:center;white-space:nowrap;order:-1;min-height:1rem;letter-spacing:.01em;margin-bottom:3px;font-weight:400}
ruby rb{font-family:var(--zh);font-size:var(--original-zh-font-size);display:block;line-height:1.1}
ruby:hover{background:rgba(24,22,15,.08)}
ruby.rsel{background:rgba(24,22,15,.1)}
.punct{display:inline-flex;align-items:flex-end;font-family:var(--zh);font-size:var(--original-zh-font-size);color:var(--ink2);line-height:1;padding-top:calc(var(--pinyin-font-size) * 1.1 + 3px + 2px);padding-bottom:0}
/* Pinyin OFF: keep each ruby's vertical space RESERVED but hide the pinyin text, so a
   per-sentence Pinyin tap reveals it in place WITHOUT reflowing the line or shifting the
   button row below it. (visibility, not display:none — the box keeps its height.) */
.pinyin-off ruby rt{visibility:hidden}

.line-it{font-family:var(--serif);font-size:var(--original-font-size);color:var(--ink);line-height:1.82;letter-spacing:.01em;user-select:text;-webkit-user-select:text;padding:3px 0}
.itw{display:inline;cursor:pointer;border-radius:2px;padding:0 1px;transition:background var(--tr)}
.itw:hover{background:rgba(24,22,15,.07)}
.itw.isel{background:rgba(24,22,15,.09)}
.itw.phrase-sel{background:rgba(184,131,42,0.22);box-shadow:0 0 0 1px rgba(184,131,42,0.4)}

.line-en{font-size:var(--translation-font-size);font-style:italic;color:var(--trans-text,var(--ink2));line-height:1.65;margin-top:9px;padding:13px 17px;background:var(--trans-bg,var(--s2));border:1px solid var(--border);border-radius:13px;display:none;font-family:var(--sans);font-weight:300;cursor:pointer;transition:background var(--tr),border-color var(--tr),box-shadow var(--tr)}
.line-en:hover{border-color:var(--amber);box-shadow:0 2px 10px rgba(24,22,15,.05)}
/* grammar note — piggybacks the .line-en translation toggle, but styled as a calm hint */
.gram-note{font-family:var(--sans)!important;font-style:normal!important;font-weight:500!important;font-size:.82rem!important;color:var(--ink2)!important;background:var(--amber2,rgba(184,131,42,.07))!important;border:1px solid rgba(184,131,42,.28)!important;line-height:1.5!important;padding:9px 14px!important;margin-top:6px!important;cursor:default!important}
.gram-note:hover{box-shadow:none!important}
/* assignment learning-support gates: hide translation/grammar or audio for this text */
#textBody.asg-no-trans .line-en{display:none!important}
#textBody.asg-no-audio .sent-play{display:none!important}
.orig-row{display:flex;align-items:flex-start;gap:12px}
.orig-row>.line-it,.orig-row>.line-zh{flex:1;min-width:0}
/* Sentence-level control row: Listen | Hold to speak | Translate (sits under the line) */
.sent-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
.sent-ctrls .sp-btn{margin-top:0}
.sent-ctrl{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;font:600 .64rem/1 var(--sans);letter-spacing:.02em;color:var(--ink2);background:var(--surface);border:1px solid var(--border);border-radius:999px;cursor:pointer;-webkit-appearance:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;white-space:nowrap;transition:border-color var(--tr),color var(--tr),background var(--tr)}
.sent-ctrl:hover{border-color:var(--amber);color:var(--amber)}
.sent-ctrl .sci{display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;flex:none}
.sent-ctrl .sci svg{width:11px;height:11px;fill:currentColor}
.sent-ctrl .sct-ico{font-weight:800;font-size:.78rem;line-height:1}
.sent-play.playing{border-color:var(--amber);background:var(--amber);color:#fff}
.sent-translate{display:none}
body.gtrans-off .sent-translate{display:inline-flex}
.sent-translate.revealed{border-color:rgba(184,131,42,.55);color:var(--ink);background:var(--amber2)}
body[data-theme="bedtime"] .line-en:hover{background:#352e25}
body[data-theme="dark"] .line-en:hover{background:#2a2a31}
.line-en.on{display:block}
.line-speaker{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-top:16px;margin-bottom:1px}
.sd-line{border-left:2px solid var(--border);padding-left:11px;margin:7px 0}
.sd-line .line-it{font-style:italic;color:var(--ink3)}
.ep-head{margin:0 0 16px}
.ep-intro{font-family:var(--sans);font-size:.92rem;line-height:1.6;color:var(--ink2);background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-bottom:11px}
.ep-art-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;font:600 .8rem/1 var(--sans);color:#fff;background:var(--amber);border:none;border-radius:999px;cursor:pointer}
.ep-art-btn:hover{filter:brightness(1.06)}
.ep-art-n{background:rgba(255,255,255,.28);border-radius:999px;padding:1px 7px;font-size:.72rem}
.echo-art-ov{position:fixed;inset:0;z-index:10001;background:rgba(16,14,10,.93);display:none;align-items:center;justify-content:center;padding:24px}
.echo-art-ov.show{display:flex}
.echo-art-ov .eao-stage{max-width:1100px;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.echo-art-ov .eao-img{max-width:100%;max-height:74vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5);background:#222}
.echo-art-ov .eao-meta{color:#eee;text-align:center;font-family:var(--sans);max-width:760px}
.echo-art-ov .eao-title{font-size:1.02rem;font-weight:700;color:#fff}
.echo-art-ov .eao-art{font-size:.85rem;color:#cfc8bb;margin-top:2px}
.echo-art-ov .eao-moment{font-size:.8rem;color:var(--amber);margin-top:6px;font-style:italic}
.echo-art-ov .eao-cap{font-size:.82rem;color:#d8d2c6;margin-top:6px;line-height:1.5}
.echo-art-ov .eao-src{font-size:.72rem;color:#a89e8c;margin-top:7px}
.echo-art-ov .eao-src a{color:#cda96a}
.echo-art-ov .eao-rights{font-size:.68rem;color:#8a8170;margin-top:3px}
.echo-art-ov .eao-close{position:absolute;top:16px;right:20px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer;z-index:2}
.echo-art-ov .eao-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;cursor:pointer;z-index:2}
.echo-art-ov .eao-prev{left:16px}
.echo-art-ov .eao-next{right:16px}
/* Sentence pronunciation practice — deliberately subtle, sits under the
   translation. Not big or chunky. */
.sp-btn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 12px;font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.02em;color:var(--ink2);background:var(--surface);border:1px solid var(--border);border-radius:999px;cursor:pointer;-webkit-appearance:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;white-space:nowrap;transition:all var(--tr)}
.sp-btn:hover{border-color:var(--amber);color:var(--amber)}
.sp-btn.recording{background:#c0392b;border-color:#c0392b;color:#fff}
/* ── Phase: reader-control polish (recording pulse, per-sentence rate, per-sentence pinyin) ── */
@keyframes spRecPulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}70%{box-shadow:0 0 0 7px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
.sp-btn.recording{animation:spRecPulse 1.25s ease-out infinite}
.sent-rate{position:relative}
.sent-rate .scl{font-variant-numeric:tabular-nums}
.sent-rate-menu{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:2px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:0 6px 22px rgba(24,22,15,.16)}
.sent-rate-menu.srm-down{top:calc(100% + 6px);bottom:auto}
.sent-rate-menu.srm-fixed{position:fixed;bottom:auto;transform:none;z-index:1200}
.sent-rate-menu .srm-opt{min-width:58px;padding:7px 14px;font:600 .66rem/1 var(--sans);color:var(--ink2);background:none;border:none;border-radius:8px;cursor:pointer;text-align:center;font-variant-numeric:tabular-nums}
.sent-rate-menu .srm-opt:hover{background:var(--s2);color:var(--ink)}
.sent-rate-menu .srm-opt.on{background:var(--amber);color:#fff}
.sent-pinyin{display:none}
#textBody.pinyin-off .sent-pinyin{display:inline-flex}
.sent-pinyin.revealed,.sent-translate.revealed{border-color:rgba(184,131,42,.55);color:var(--ink);background:var(--amber2)}
#textBody.pinyin-off .sent-block.sp-show-py ruby rt{visibility:visible}   /* reveal in the already-reserved space → no reflow, buttons stay put */
.sp-btn .sp-ic{width:11px;height:11px;flex-shrink:0}
/* Phones: compact the sentence controls so Listen · 1x · See · (Pinyin ·) Speak fit one
   row. flex-wrap stays on as a clean fallback for very narrow screens; the rate popup is
   position:absolute so it is never clipped. Heights stay consistent across all buttons. */
@media (max-width:600px){
  .sent-ctrls{gap:5px;margin-top:7px}
  .sent-ctrl,.sent-ctrls .sp-btn{padding:5px 9px;font-size:.6rem;gap:4px}
  .sent-ctrl .sci,.sent-ctrl .sci svg,.sp-btn .sp-ic{width:10px;height:10px}
}
.sp-result{position:relative;margin-top:8px;padding:10px 16px 11px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:12px;box-shadow:0 1px 3px rgba(24,22,15,.04);font-family:var(--sans);font-size:.66rem;line-height:1.5;color:var(--ink2)}
.sp-result .sp-pct{font-weight:600;color:var(--ink);font-size:.8rem}
.sp-result .sp-row{margin-top:3px}
.sp-result .sp-lab{color:var(--ink3);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;margin-right:5px}
.sp-result .sp-val{color:var(--ink)}
.sp-result .sp-miss{color:#c0392b}
/* Clean, noticeable accuracy pill for students (shown only when a score exists). */
.sp-result .sp-acc-chip{display:inline-flex;align-items:baseline;gap:7px;font:600 .74rem/1 var(--sans);padding:6px 13px;border-radius:999px;margin-bottom:0;border:1px solid;flex-shrink:0}
.sp-result .sp-acc-chip b{font-size:1.05rem;font-weight:800}
.sp-result .sp-acc-good{background:rgba(58,167,109,.14);border-color:rgba(58,167,109,.35);color:#2e7d52}
.sp-result .sp-acc-mid{background:rgba(184,131,42,.14);border-color:rgba(184,131,42,.38);color:#9a6a16}
.sp-result .sp-acc-low{background:var(--s2);border-color:var(--border);color:var(--ink2)}
.sp-result .sp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;padding-right:18px}
.sp-result .sp-saved-slot{font-size:.62rem;color:var(--ink3);text-align:right;line-height:1.4}
.sp-result .sp-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.sp-result .sp-grid .sp-lab{margin-right:0}
.sp-result .sp-foot{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
.sp-result .sp-foot .sp-details{margin-top:0}
.sp-result .sp-foot .sp-btn{margin-top:0}
.line-translit{font-size:.74rem;color:var(--ink3);font-style:italic;margin:3px 0 0;line-height:1.45;-webkit-user-select:text;user-select:text}
.line-notes{font-size:.72rem;margin-top:4px}
.line-notes details{margin-top:3px}
.line-notes summary{cursor:pointer;color:var(--ink3);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;list-style:none;outline:none}
.line-notes summary::-webkit-details-marker{display:none}
.line-notes summary::before{content:'\25B8  ';color:var(--ink3)}
.line-notes details[open] summary::before{content:'\25BE  '}
.line-notes .ln-b{margin-top:3px;color:var(--ink2);line-height:1.55;padding-left:2px;font-family:var(--sans)}
.sp-result .sp-bar{height:5px;border-radius:3px;background:var(--border);margin-top:5px;overflow:hidden}
.sp-result .sp-bar-fill{height:100%;background:var(--amber);border-radius:3px;transition:width .4s ease}
.sp-result .sp-close{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--ink3);opacity:.55;font-size:.9rem;border:none;background:none;padding:2px 4px;line-height:1}
.sp-result .sp-close:hover{opacity:1}
.sp-result .sp-en{color:var(--ink2)}
.sp-result .sp-note{color:var(--ink2);font-weight:600;font-size:.7rem}
.sp-result .sp-details{margin-top:8px}
.sp-result .sp-details summary{cursor:pointer;color:var(--ink3);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;list-style:none;outline:none}
.sp-result .sp-details summary::-webkit-details-marker{display:none}
.sp-result .sp-details summary::before{content:'▸ ';color:var(--ink3)}
.sp-result .sp-details[open] summary::before{content:'▾ '}
.sp-result .sp-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:6px}
.sp-result .sp-chip{font-size:.62rem;padding:2px 7px;border-radius:999px;line-height:1.5}
.sp-result .sp-chip-hit{background:rgba(58,167,109,.14);color:#2e7d52;border:1px solid rgba(58,167,109,.3)}
.sp-result .sp-chip-miss{background:rgba(184,131,42,.14);color:#9a6a16;border:1px solid rgba(184,131,42,.32)}
/* Appearance selector */
.appe-row{display:flex;gap:8px;margin-top:8px}
.appe-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--ink2);font-family:var(--sans);font-size:.72rem;cursor:pointer;-webkit-appearance:none;transition:all var(--tr)}
.appe-btn.active{border-color:var(--amber);color:var(--ink);box-shadow:0 0 0 1px var(--amber)}
.appe-sw{width:100%;height:26px;border-radius:6px;border:1px solid var(--border)}
.appe-sw-light{background:linear-gradient(135deg,#F8F6F2 0%,#F8F6F2 60%,#B8832A 60%,#B8832A 100%)}
.appe-sw-bed{background:linear-gradient(135deg,#151311 0%,#151311 60%,#c89a4d 60%,#c89a4d 100%)}
.appe-sw-dark{background:linear-gradient(135deg,#0b0b0d 0%,#0b0b0d 60%,#d2a14e 60%,#d2a14e 100%)}
/* Microphone diagnostic output */
.mic-diag{margin-top:10px;padding:10px 12px;background:var(--s2);border-radius:var(--r);font-family:var(--sans);font-size:.7rem;line-height:1.6;color:var(--ink2);border-left:3px solid var(--amber)}
.mic-diag .md-ok{color:#3a9a5a}
.mic-diag .md-bad{color:#c0392b}
.mic-diag .md-stage{display:block}
.mic-diag .md-pending{color:var(--ink3)}
.mic-diag .md-help{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:.66rem;line-height:1.7;color:var(--ink2)}
.mic-diag .md-help code{display:inline-block;font-family:Menlo,Monaco,monospace;font-size:.66rem;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 6px;margin:2px 0;color:var(--ink)}

/* ── Reader font-size controls (Settings) ── */
.fz-section{background:var(--s2);border-radius:var(--r);padding:12px 13px;margin-bottom:16px;border-left:2px solid var(--amber)}
.fz-section-title{font-family:var(--serif);font-style:italic;font-size:.95rem;margin-bottom:3px;color:var(--ink)}
.fz-section-sub{font-size:.68rem;color:var(--ink2);line-height:1.5;margin-bottom:11px}
.fz-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.fz-row:last-of-type{margin-bottom:0}
.fz-label{font-size:.78rem;color:var(--ink);flex:1;min-width:0}
.fz-label.primary{font-weight:600}
.fz-val{font-size:.66rem;color:var(--ink3);margin-left:5px;font-weight:400}
.fz-ctrls{display:flex;align-items:center;gap:5px;flex-shrink:0}
.fz-btn{width:34px;height:34px;border:1px solid var(--border2);background:var(--surface);color:var(--ink);border-radius:8px;cursor:pointer;-webkit-appearance:none;font-family:var(--serif);display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:all var(--tr)}
.fz-btn:hover{border-color:var(--amber);color:var(--amber)}
.fz-btn:active{background:var(--s2)}
.fz-btn.minus{font-size:.8rem}
.fz-btn.mid{font-size:.95rem}
.fz-btn.plus{font-size:1.15rem}
.fz-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
.fz-preset{font-family:var(--sans);font-size:.72rem;padding:7px 12px;border:1px solid var(--border2);background:var(--surface);color:var(--ink2);border-radius:16px;cursor:pointer;-webkit-appearance:none;transition:all var(--tr)}
.fz-preset:hover{border-color:var(--amber);color:var(--amber)}
.fz-presets-lbl{font-size:.66rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;width:100%;margin-bottom:1px}

/* Bottom audio bar removed: Play, Voice speed and Voice now live in the top reader
   controls. The element stays in the DOM (its play-icon / progress nodes back the
   play-state machine), but it's hidden so it no longer takes reading space. */
.audio-dock{display:none!important;background:var(--surface);border-top:1px solid var(--border);padding:0 20px;height:58px;align-items:center;gap:12px;position:sticky;bottom:0;z-index:10;flex-shrink:0;box-shadow:0 -2px 10px rgba(24,22,15,.05)}
.play-btn{width:40px;height:40px;border-radius:50%;background:var(--ink);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--tr);-webkit-appearance:none;box-shadow:0 4px 14px rgba(24,22,15,.22)}
.play-btn:hover{background:#000;transform:scale(1.06);box-shadow:0 6px 18px rgba(24,22,15,.28)}
.play-btn:active{transform:scale(.96)}
.play-btn svg{fill:white}
.aud-bar{flex:1;height:3px;background:var(--border);border-radius:999px;overflow:hidden;min-width:20px}
.aud-fill{height:100%;background:var(--amber);width:0%;transition:width .3s linear}
.from-badge{font-size:.59rem;color:var(--amber);white-space:nowrap;font-style:italic;max-width:86px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.spd-g{display:flex;align-items:center;gap:6px;flex-shrink:0}
.spd-l{font-size:.62rem;color:var(--ink3)}
.spd-v{font-size:.63rem;color:var(--ink);font-weight:500;min-width:2.3rem;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;height:2px;background:var(--border2);border-radius:1px;cursor:pointer;width:74px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);cursor:pointer;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border2)}
.vox-g{display:flex;align-items:center;gap:5px;flex-shrink:0}
.vox-l{font-size:.62rem;color:var(--ink3)}
select.vox-sel{font-family:var(--sans);font-size:.66rem;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 17px 4px 7px;cursor:pointer;max-width:128px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239A9388'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background var(--tr)}
.sdot.on{background:var(--amber)}
.statusbar{font-size:.62rem;color:var(--ink3);padding:0 20px;height:25px;display:flex;align-items:center;background:var(--s2);border-top:1px solid var(--border);flex-shrink:0;letter-spacing:.015em}

.dict-col{border-left:1px solid var(--border);background:var(--surface);position:sticky;top:0;height:calc(100vh - 50px);overflow-y:auto;display:flex;flex-direction:column;min-width:0;transition:opacity .18s ease}
.dict-head{padding:14px 15px 11px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.dict-head-title{font-family:var(--serif);font-size:1.12rem;font-weight:700;font-style:italic;letter-spacing:-.01em;color:var(--ink)}
.dict-head-sub{font-size:.61rem;color:var(--ink3);margin-top:2px}
/* Desktop collapse control inside the dictionary header. */
.dict-collapse-btn{position:absolute;top:12px;right:12px;width:24px;height:24px;border:1px solid var(--border);background:var(--surface);color:var(--ink3);border-radius:6px;cursor:pointer;-webkit-appearance:none;display:none;align-items:center;justify-content:center;padding:0;font-size:.9rem;line-height:1}
@media(min-width:761px){.dict-collapse-btn{display:flex}}
.dict-collapse-btn:hover{border-color:var(--amber);color:var(--amber)}
/* Floating "Dictionary" button shown in the reader when the panel is collapsed
   (desktop/tablet only). */
.dict-show-btn{display:none;position:fixed;right:16px;bottom:64px;z-index:120;align-items:center;gap:6px;font-family:var(--sans);font-size:.72rem;padding:8px 14px;border:1px solid var(--border2);border-radius:20px;background:var(--surface);color:var(--ink2);cursor:pointer;-webkit-appearance:none;box-shadow:0 4px 16px rgba(0,0,0,.12);transition:all var(--tr)}
.dict-show-btn:hover{border-color:var(--amber);color:var(--amber)}
@media(min-width:761px){body.dict-collapsed .dict-show-btn{display:inline-flex}}
@media(max-width:760px){.dict-collapse-btn,.dict-show-btn{display:none!important}}
/* Slim, centered empty state when nothing is selected. */
.dict-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink3);padding:30px 18px;gap:8px}
.dict-empty .de-ic{width:30px;height:30px;opacity:.5}
.dict-empty .de-txt{font-size:.72rem;line-height:1.5;max-width:180px}
.dict-body{padding:18px 15px 15px;flex:1}
.d-char{font-family:var(--zh);font-size:3.4rem;font-weight:300;color:var(--ink);line-height:1;margin-bottom:5px;min-height:54px;display:flex;align-items:center}
.d-char.itw-d{font-family:var(--serif);font-size:1.6rem;font-weight:400;min-height:38px;font-style:italic}
.d-char.ph{font-family:var(--sans);font-size:.82rem;color:var(--border2);font-weight:300;font-style:italic;min-height:22px}
.d-py{font-family:var(--sans);font-size:.9rem;font-style:italic;color:var(--amber);letter-spacing:.05em;min-height:1.3rem;margin-bottom:3px}
.d-pos{font-size:.59rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.d-div{height:1px;background:var(--border);margin:10px 0}
.d-def{font-size:.81rem;line-height:1.63;color:var(--ink);font-weight:300}
.def-r{margin-bottom:4px}
.d-ex{margin-top:13px;padding:9px 11px;background:var(--s2);border-radius:var(--r);border-left:2px solid var(--border2)}
.d-ex.on{border-left-color:var(--amber)}
.ex-n{font-family:var(--zh);font-size:.83rem;color:var(--ink);margin-bottom:3px;line-height:1.45}
.ex-n.it{font-family:var(--serif);font-size:.85rem;font-style:italic}
.ex-e{font-size:.73rem;font-style:italic;color:var(--ink3);font-weight:300}
.hear-btn{margin-top:13px;width:100%;padding:8px 11px;background:none;border:1px solid var(--border);border-radius:var(--r);color:var(--ink2);font-family:var(--sans);font-size:.71rem;cursor:pointer;display:none;align-items:center;justify-content:center;gap:5px;-webkit-appearance:none}
.hear-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--s2)}

.mbg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:200;display:none;align-items:center;justify-content:center;padding:18px}
.mbg.show{display:flex}
.modal{background:var(--surface);border-radius:18px;box-shadow:0 24px 70px rgba(24,22,15,.26);width:100%;max-width:520px;max-height:88vh;overflow-y:auto}
.mhead{padding:20px 22px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.m-title{font-family:var(--serif);font-size:1.35rem;font-weight:700;font-style:italic;letter-spacing:-.01em;color:var(--ink)}
.m-close{background:none;border:none;cursor:pointer;font-size:1.3rem;color:var(--ink3);line-height:1;-webkit-appearance:none}
.mbody{padding:16px 20px 20px}
.fl{font-size:.7rem;color:var(--ink2);margin-bottom:4px;display:block;font-weight:500}
.fhint{font-size:.64rem;color:var(--ink3);margin-bottom:7px;display:block;font-style:italic}
input.fi,select.fi,textarea.fi{width:100%;font-family:var(--sans);font-size:.8rem;color:var(--ink);background:var(--s2);border:1px solid var(--border2);border-radius:var(--r);padding:7px 9px;outline:none;margin-bottom:12px;-webkit-appearance:none}
input.fi:focus,select.fi:focus,textarea.fi:focus{border-color:var(--amber)}
textarea.fi{resize:vertical;min-height:120px;font-size:.78rem;line-height:1.5}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%239A9388'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;padding-right:24px}
.mactions{display:flex;gap:7px;justify-content:flex-end;margin-top:4px;flex-wrap:wrap}
.btn-c{font-family:var(--sans);font-size:.76rem;padding:7px 14px;border:1px solid var(--border2);border-radius:999px;background:none;color:var(--ink2);cursor:pointer;-webkit-appearance:none;transition:border-color .14s ease,color .14s ease,background .14s ease}
.btn-c:hover{border-color:var(--amber);color:var(--ink)}
.btn-c:hover{border-color:var(--ink2)}
.btn-imp{font-family:var(--sans);font-size:.76rem;padding:7px 16px;border:none;border-radius:var(--r);background:var(--ink);color:var(--accent-ink);cursor:pointer;-webkit-appearance:none}
.btn-imp:hover{background:#2c2c28}
.file-drop{border:2px dashed var(--border2);border-radius:var(--r);padding:16px;text-align:center;margin-bottom:12px;cursor:pointer;transition:border-color var(--tr)}
.file-drop:hover,.file-drop.drag{border-color:var(--amber)}
.file-drop input{display:none}
.file-drop-txt{font-size:.76rem;color:var(--ink3)}
.file-drop-txt strong{color:var(--amber)}
.file-name{font-size:.72rem;color:var(--amber);margin-top:4px}
.imp-row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--border)}
.imp-row:last-child{border-bottom:none}
.imp-row-t{font-size:.76rem;color:var(--ink);flex:1}
.imp-row-del{font-size:.66rem;color:var(--ink3);background:none;border:1px solid var(--border);border-radius:var(--r);padding:2px 7px;cursor:pointer;-webkit-appearance:none}
.imp-row-del:hover{border-color:#c0392b;color:#c0392b}

::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ============ Blake illustrated module ============ */
html.blake-noscroll{overflow:hidden}
.bk-btn.bk-illus{padding-left:56px!important;min-height:60px}   /* !important so the mobile .bk-btn padding override can't slide the title under the cover */
.bk-cover{position:absolute;left:11px;top:11px;width:36px;height:52px;object-fit:cover;border-radius:4px;box-shadow:0 2px 7px rgba(24,22,15,.30);background:var(--s2)}
.blake-badge{display:inline-block;margin-left:6px;font:600 .54rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#9a6a1e;background:rgba(184,131,42,.13);border:1px solid rgba(184,131,42,.32);border-radius:999px;padding:3px 6px;vertical-align:1px}
.blake-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));z-index:640;display:none;align-items:center;gap:8px;padding:11px 15px;border:none;border-radius:999px;cursor:pointer;font:600 .8rem/1 var(--sans);color:#fff;background:linear-gradient(135deg,#7a4f8a,#9c5b3b);box-shadow:0 8px 24px rgba(40,22,60,.34);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;transition:transform .12s ease,box-shadow .12s ease}
.blake-fab:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(40,22,60,.42)}
.blake-fab:active{transform:scale(.95)}
.blake-fab svg{width:17px;height:17px;flex:none}
.blake-fab.show{display:inline-flex}
.blake-study-btn{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 62px);z-index:640;display:none;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font:600 .73rem/1 var(--sans);color:var(--ink);background:var(--surface);box-shadow:0 5px 16px rgba(24,22,15,.16)}
.blake-study-btn svg{width:14px;height:14px}
@media(min-width:861px){.blake-study-btn.show{display:inline-flex}}
.blake-ov{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;background:rgba(12,8,16,.84);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:20px}
.blake-ov.show{display:flex;animation:blakeFade .16s ease}
@keyframes blakeFade{from{opacity:0}to{opacity:1}}
.blake-ov-inner{position:relative;display:flex;flex-direction:column;align-items:center;max-width:96vw;max-height:96vh}
.blake-ov-img{max-width:96vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#efe9da;-webkit-user-select:none;user-select:none}
.blake-ov-cap{margin-top:10px;color:rgba(255,255,255,.92);font:600 .82rem/1.4 var(--sans);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5);max-width:90vw}
.blake-ov-cap small{display:block;font-weight:400;font-size:.62rem;color:rgba(255,255,255,.62);margin-top:4px}
.blake-ov-close{position:fixed;top:14px;right:16px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:3}
.blake-ov-close:hover{background:rgba(255,255,255,.30)}
.blake-ov-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;z-index:3}
.blake-ov-nav:hover{background:rgba(255,255,255,.28)}
.blake-ov-prev{left:14px}.blake-ov-next{right:14px}
.blake-ov-text{display:none}
.blake-ov.study .blake-ov-inner{flex-direction:row;align-items:stretch;gap:20px;width:96vw;max-width:96vw;max-height:92vh}
.blake-ov.study .blake-ov-img{max-width:50vw;max-height:92vh}
.blake-ov.study .blake-ov-cap{display:none}
.blake-ov.study .blake-ov-text{display:block;overflow-y:auto;background:var(--surface);border-radius:10px;padding:22px 24px;max-width:46vw;color:var(--ink);font-family:var(--serif)}
.blake-ov-text h3{font-family:var(--serif);font-size:1.15rem;margin:0 0 3px}
.blake-ov-text .bsec{font:600 .64rem/1 var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:14px}
.blake-ov-text .bln{margin:0 0 9px;line-height:1.5}
.blake-ov-text .ben{display:block;font-family:var(--zh),var(--sans);font-size:.82rem;color:var(--ink2);margin-top:2px}
@media(max-width:860px){.blake-ov.study .blake-ov-inner{flex-direction:column}.blake-ov.study .blake-ov-img{max-width:96vw;max-height:54vh}.blake-ov.study .blake-ov-text{max-width:96vw}}
.blake-symbols{margin:24px auto 6px;max-width:680px;border:1px solid var(--border);border-radius:12px;background:var(--s2);overflow:hidden}
.blake-symbols summary{cursor:pointer;list-style:none;padding:11px 15px;font:600 .76rem/1 var(--sans);color:var(--amber);display:flex;align-items:center;gap:7px}
.blake-symbols summary::-webkit-details-marker{display:none}
.blake-symbols summary::before{content:'\2726';font-size:.78rem}
.blake-symbols .bs-body{padding:2px 15px 13px;font-size:.82rem;line-height:1.62;color:var(--ink2)}
.blake-symbols .bs-zh{font-family:var(--zh),var(--sans);margin-top:6px;color:var(--ink3)}
.blake-cmp-btn{display:inline-flex;align-items:center;gap:7px;margin:16px auto 8px;padding:9px 15px;border:1px solid rgba(184,131,42,.4);border-radius:999px;background:var(--amber2);color:var(--ink);font:600 .76rem/1 var(--sans);cursor:pointer}
.blake-cmp-ov{position:fixed;inset:0;z-index:1210;display:none;background:rgba(20,14,24,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto}
.blake-cmp-ov.show{display:block}
.blake-cmp-sheet{background:var(--surface);min-height:100%;max-width:1040px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.34)}
.blake-cmp-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border)}
.blake-cmp-top h2{font-family:var(--serif);font-size:1.04rem;margin:0;color:var(--ink)}
.blake-cmp-x{border:none;background:var(--s2);border-radius:50%;width:34px;height:34px;font-size:1.2rem;cursor:pointer;color:var(--ink2)}
.blake-cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.blake-cmp-card{text-align:left;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:15px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.blake-cmp-card:hover{border-color:rgba(184,131,42,.5);box-shadow:0 6px 18px rgba(24,22,15,.1)}
.blake-cmp-card .cc-h{font-family:var(--serif);font-size:1rem;color:var(--ink);margin-bottom:5px}
.blake-cmp-card .cc-s{font:.7rem/1.4 var(--sans);color:var(--ink3)}
.blake-cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px}
.blake-cmp-col{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:18px 18px 22px}
.blake-cmp-col h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 2px;color:var(--ink)}
.blake-cmp-col .bsec{font:600 .63rem/1 var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:12px}
.blake-cmp-col .bln{margin:0 0 9px;font-family:var(--serif);color:var(--ink);line-height:1.5}
.blake-cmp-col .ben{display:block;font-family:var(--zh),var(--sans);font-size:.8rem;color:var(--ink2);margin-top:2px}
.blake-cmp-plate{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--s2);font:600 .72rem/1 var(--sans);color:var(--ink);cursor:pointer}
.blake-cmp-plate svg{width:14px;height:14px}
.blake-cmp-back{margin:14px 0 0 18px;border:none;background:none;color:var(--amber);font:600 .76rem/1 var(--sans);cursor:pointer}
@media(max-width:680px){.blake-cmp-grid,.blake-cmp-cols{grid-template-columns:1fr}}
.cp-section{padding:13px 16px 5px;font:700 .64rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.cp-section:first-child{padding-top:4px}

/* ============ Dante — Inferno (terza rima edition) ============ */
.dante-text .line-it{white-space:pre-line}                 /* keep each tercet as 3 verse lines */
.dante-text .sent-block.dante-tercet{position:relative;padding-left:2.7em}
.dante-lineno{position:absolute;left:0;top:.34em;width:2.0em;text-align:right;font:600 .66rem/1 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
.dante-text .sent-wrap{margin-bottom:.5em}
/* line-range jump chips (replace the old "Tercets N-M" buttons) */
.dante-jumps{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:9px 0 3px;margin-top:8px;scrollbar-width:none}
.dante-jumps::-webkit-scrollbar{display:none}
.dante-jumps-lbl{flex:none;align-self:center;font:600 .58rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-right:3px}
.dante-jump{flex:none;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 11px;font:600 .72rem/1 var(--sans);color:var(--ink2);cursor:pointer;white-space:nowrap}
.dante-jump:hover{border-color:var(--amber);color:var(--ink)}
/* nested canto list in the sidebar: Dante Alighieri -> Inferno -> Canto I..XXXIV */
.canto-list{display:none;margin:1px 0 9px 15px;padding-left:7px;border-left:2px solid var(--border)}
.canto-list.expanded{display:block}
.canto-item{display:block;width:calc(100% - 7px);text-align:left;background:none;border:none;cursor:pointer;font:500 .76rem/1.3 var(--serif);color:var(--ink2);padding:5px 9px;border-radius:7px;margin:1px 0}
.canto-item:hover{background:var(--s2);color:var(--ink)}
.canto-item.active{background:var(--amber2);color:var(--ink);font-weight:600}

/* ===== Block B: landing (echoLandingStyle) ===== */
/* The public landing always renders in its warm light palette (it has a fixed
   cream background), regardless of the app's theme. Pin the colour variables to
   their light-mode values so dark/bedtime mode never washes out the landing text
   or makes its buttons white-on-white. */
#echoLanding{--bg:#F8F6F2;--surface:#FEFDFB;--s2:#F1EEE8;--border:#DDD8CE;--border2:#C8C2B6;--ink:#18160F;--ink2:#5A5549;--ink3:#9A9388;--amber:#B8832A;--amber2:rgba(184,131,42,0.16);--accent-ink:#ffffff}
/* z-index sits ABOVE the reader's scroll rail (9999) so that thin line can never
   bleed over the landing, but BELOW the auth/onboarding overlays (99998+) which
   must still appear over the landing. */
#echoLanding{position:fixed;inset:0;z-index:10000;background:var(--bg,#F8F6F2);color:var(--ink,#18160F);font-family:var(--sans,'Instrument Sans',sans-serif);overflow:hidden;-webkit-font-smoothing:antialiased}
#echoLanding.echo-landing-hidden{display:none}
#echoLanding .el-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;background:radial-gradient(120% 70% at 50% -10%,rgba(184,131,42,0.10),transparent 60%),linear-gradient(180deg,#FAF8F4 0%,#F3EFE7 100%)}
#echoLanding .el-skip{position:fixed;top:18px;right:20px;z-index:2;background:rgba(255,255,255,.72);border:1px solid var(--border,#DDD8CE);color:var(--ink2,#5A5549);font:600 .82rem/1 var(--sans,'Instrument Sans',sans-serif);padding:9px 15px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .15s,border-color .15s}
#echoLanding .el-skip:hover{color:var(--ink,#18160F);border-color:var(--amber,#B8832A)}
#echoLanding .el-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px 44px;position:relative}
/* First screen: the dream. Full height, vertically centred, left-aligned with the
   gold rule — the first thing a visitor sees, before the brand. */
#echoLanding .el-dream{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1040px;margin:0 auto;padding:12vh 28px;position:relative}
#echoLanding .el-dream .el-h{max-width:18ch}
#echoLanding .el-dream .el-p{margin-top:1.6rem}
#echoLanding .el-eyebrow{font:700 clamp(.85rem,2.4vw,1.1rem)/1 var(--sans,'Instrument Sans',sans-serif);text-transform:uppercase;letter-spacing:.5em;color:var(--amber,#B8832A);padding-left:.5em;margin-bottom:.7em}
#echoLanding .el-word,#echoLanding .el-ghost{font-family:var(--serif,'Playfair Display','Cormorant Garamond',Georgia,serif);font-weight:500;font-size:clamp(4.4rem,20vw,15rem);line-height:.98;letter-spacing:.05em;margin:0}
#echoLanding .el-word{color:var(--ink,#18160F);text-shadow:0 2px 22px rgba(184,131,42,.10),0 1px 1px rgba(24,22,15,.04)}
#echoLanding .el-word .el-ltr{display:inline-block;will-change:transform,opacity}
/* entrance: letters drop in with a gentle stagger and a tiny soft settle */
@keyframes elDrop{0%{opacity:0;transform:translateY(-.85em)}68%{opacity:1;transform:translateY(.05em)}100%{opacity:1;transform:translateY(0)}}
#echoLanding .el-word.el-drop .el-ltr{animation:elDrop var(--dd,.9s) cubic-bezier(.22,.9,.3,1) both}
/* echo hero: a stable, readable word. Ghost copies are HIDDEN at rest; one
   elegant sound-wave passes through (g0→g1→g2, fading outward) when the cursor
   enters the word's zone, then settles. No constant motion. */
#echoLanding .el-stage{position:relative;display:inline-block}
#echoLanding .el-stage .el-word{position:relative;z-index:2}
#echoLanding .el-ghost{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transform-origin:50% 50%;will-change:transform,opacity;transition:opacity .45s ease}
#echoLanding .el-ghost.g0{color:rgba(184,131,42,.32)}
#echoLanding .el-ghost.g1{color:rgba(24,22,15,.18)}
#echoLanding .el-ghost.g2{color:rgba(184,131,42,.11)}
/* one-shot resonance: each ghost layer swells faintly then drifts outward and
   fades slowly, like sound dissipating through space. Plays once on .el-pulse. */
@keyframes elWave{0%{opacity:0;transform:scale(1)}18%{opacity:var(--o,.3)}100%{opacity:0;transform:scale(var(--s,1.4))}}
#echoLanding .el-stage.el-pulse .el-ghost{animation:elWave var(--d,1.4s) cubic-bezier(.2,.7,.3,1) 1 both}
#echoLanding .el-stage .el-ghost.g0{--o:.30;--s:1.18}
#echoLanding .el-stage .el-ghost.g1{--o:.18;--s:1.34;animation-delay:.18s}
#echoLanding .el-stage .el-ghost.g2{--o:.11;--s:1.52;animation-delay:.38s}
@media (prefers-reduced-motion:reduce){
  #echoLanding .el-ghost{display:none!important;animation:none!important}
  #echoLanding .el-word.el-drop .el-ltr,#echoLanding .el-ltr{animation:none!important;transform:none!important;opacity:1!important}
  #echoLanding .el-scrollcue{animation:none!important;opacity:.8;transform:translateX(-50%)}
}
#echoLanding .el-sub{max-width:34ch;margin:1.7rem auto 0;font-size:clamp(.95rem,1.7vw,1.12rem);line-height:1.6;letter-spacing:.01em;color:var(--ink2,#5A5549)}
#echoLanding .el-cta{margin-top:2.6rem;background:var(--ink,#18160F);color:var(--accent-ink,#fff);border:none;border-radius:999px;padding:19px 46px;font:700 1.12rem/1 var(--sans,'Instrument Sans',sans-serif);letter-spacing:.01em;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 10px 30px rgba(24,22,15,.22)}
#echoLanding .el-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(24,22,15,.22);background:#000}
#echoLanding .el-cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:2.6rem}
#echoLanding .el-cta-row .el-cta{margin-top:0}
#echoLanding .el-cta2{background:var(--surface,#FEFDFB);color:var(--ink,#18160F);border:1px solid var(--border,#DDD8CE);box-shadow:0 4px 16px rgba(24,22,15,.08)}
#echoLanding .el-cta2:hover{background:var(--s2,#F1EEE8);color:var(--ink,#18160F);border-color:var(--amber,#B8832A)}
#echoLanding .el-scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font:600 .64rem/1 var(--sans,'Instrument Sans',sans-serif);text-transform:uppercase;letter-spacing:.26em;color:var(--ink3,#9A9388);display:flex;align-items:center;gap:7px;opacity:0;animation:elCueIn .9s ease 1.5s forwards}
#echoLanding .el-arr{font-size:.95rem;line-height:1;letter-spacing:0;opacity:.85}
@keyframes elCueIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:.8;transform:translateX(-50%) translateY(0)}}
#echoLanding .el-sec{max-width:1040px;margin:0 auto;padding:14vh 28px}
#echoLanding .el-rule{width:60px;height:4px;background:var(--amber,#B8832A);border-radius:2px;margin-bottom:34px}
#echoLanding .el-h{font-family:var(--serif,'Playfair Display',Georgia,serif);font-weight:800;font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.04;letter-spacing:-.015em;margin:0;color:var(--ink,#18160F)}
#echoLanding .el-h-big{font-size:clamp(2.4rem,8vw,4.6rem)}
#echoLanding .el-p{max-width:42ch;margin:1.2rem 0 0;font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.55;color:var(--ink2,#5A5549)}
#echoLanding .el-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-top:44px}
#echoLanding .el-cards-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#echoLanding .el-card{background:var(--surface,#FEFDFB);border:1px solid var(--border,#DDD8CE);border-radius:18px;padding:26px 24px;box-shadow:0 2px 12px rgba(24,22,15,.05);transition:transform .16s,border-color .16s,box-shadow .16s}
#echoLanding .el-card:hover{transform:translateY(-4px);border-color:var(--amber,#B8832A);box-shadow:0 16px 38px rgba(24,22,15,.13)}
#echoLanding .el-card-k{font-family:var(--serif,'Playfair Display',Georgia,serif);font-weight:700;font-size:1.32rem;color:var(--ink,#18160F);margin-bottom:9px;line-height:1.15}
#echoLanding .el-card-t{font-size:.92rem;line-height:1.45;color:var(--ink2,#5A5549)}
#echoLanding .el-soon{display:inline-block;font:700 .56rem/1 var(--sans,'Instrument Sans',sans-serif);text-transform:uppercase;letter-spacing:.06em;color:var(--amber,#B8832A);border:1px solid rgba(184,131,42,.4);border-radius:999px;padding:3px 7px;margin-left:7px;vertical-align:middle}
#echoLanding .el-p-sm{font-size:clamp(.82rem,1.5vw,.95rem);color:var(--ink3,#9A9388);margin-top:22px;max-width:54ch}
#echoLanding .el-final{text-align:center;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
#echoLanding .el-foot{margin-top:3.5rem;font:700 .8rem/1 var(--sans,'Instrument Sans',sans-serif);text-transform:uppercase;letter-spacing:.3em;color:var(--ink3,#9A9388)}
#echoLanding .el-micro{margin-top:1.5rem;min-height:1.3em;font:600 clamp(.8rem,2vw,.96rem)/1.4 var(--sans,'Instrument Sans',sans-serif);color:var(--ink3,#9A9388);letter-spacing:.01em;transition:opacity .42s ease}
#echoLanding .el-micro.fade{opacity:0}
body.echo-landing-open{overflow:hidden}
@media (max-width:600px){
  #echoLanding .el-sec{padding:9vh 20px}
  #echoLanding .el-dream{padding:9vh 22px}
  /* The corner "Try Echo" duplicates the hero button on phones → hide it. */
  /* The corner button is "Log in" (the only login path) — keep it visible on
     phones, just nudged in slightly. */
  #echoLanding .el-skip{top:12px;right:12px;padding:8px 14px;font-size:.8rem}
  #echoLanding .el-hero{min-height:100svh;padding:46px 22px 40px}
  /* Title: solid, intentional, legible — never ghosted/washed out on mobile. */
  #echoLanding .el-word{font-size:clamp(5rem,27vw,8.5rem);font-weight:600;letter-spacing:.03em;color:var(--ink,#18160F);opacity:1;text-shadow:0 1px 2px rgba(24,22,15,.07)}
  #echoLanding .el-word .el-ltr{opacity:1}
  #echoLanding .el-eyebrow{letter-spacing:.36em;font-size:.8rem}
  #echoLanding .el-sub{font-size:1rem;max-width:26ch;margin-top:1.3rem}
  /* Balanced, full-width, consistent buttons (same hierarchy as desktop). */
  #echoLanding .el-cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:300px;margin:2rem auto 0;gap:10px}
  #echoLanding .el-cta-row .el-cta{width:100%;margin:0;padding:16px 24px;font-size:1.04rem}
  #echoLanding .el-scrollcue{bottom:18px}
}
@media (prefers-reduced-motion:reduce){#echoLanding .el-scroll{scroll-behavior:auto}#echoLanding .el-cta,#echoLanding .el-card{transition:none}}
