:root {
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --font-serif:"Noto Serif SC","Source Serif 4",Georgia,"Times New Roman",serif;
  --font-dyslexic:"OpenDyslexic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --font-base:var(--font-sans);
  --fs-base:18px;
  --fs-effective:var(--fs-base);
  --mobile-font-bump:2px;
  --lh-base:1.65;
  --c-bg:#ffffff;
  --c-fg:#222;
  --c-fg-soft:#555;
  --c-accent:#3366ff;
  --c-accent-rgb:51,102,255;
  --c-border:#e3e5e8;
  --c-surface:#f7f9fa;
  --c-danger:#d61f3a;
  --safe-top:env(safe-area-inset-top);
  --safe-bottom:env(safe-area-inset-bottom);
  --app-bar-height:54px;
  --tts-dock-height:94px;
  --shadow-level:0 4px 22px -6px rgba(0,0,0,.22);
  --shadow-small:0 2px 4px rgba(0,0,0,.06);
  --transition-fast:.25s;
}
html[data-font="serif"]{--font-base:var(--font-serif);}
html[data-font="dyslexic"]{--font-base:var(--font-dyslexic);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font-base);font-size:var(--fs-effective);
  line-height:var(--lh-base);background:var(--c-bg);color:var(--c-fg);
  padding:0 clamp(14px,4vw,42px) calc(var(--tts-dock-height) + 40px + var(--safe-bottom));
  max-width:820px;margin-inline:auto;word-break:break-word;
  transition:background .4s,color .4s;
}
@media (max-width:640px){
  :root { --fs-effective:calc(var(--fs-base) + var(--mobile-font-bump)); }
}
.app-bar-spacer{height:calc(var(--app-bar-height) + var(--safe-top));}
h1,h2,h3,h4,h5,h6{scroll-margin-top:calc(var(--app-bar-height) + 14px);font-weight:600;line-height:1.25;margin:2.2em 0 1em;}
h1{font-size:clamp(1.9rem,1.4rem + 1.2vw,2.6rem);}
h2{font-size:clamp(1.55rem,1.3rem + .8vw,2.1rem);}
h3{font-size:clamp(1.3rem,1.2rem + .4vw,1.7rem);}
p{margin:1.05em 0;text-align:justify;}
img,video{max-width:100%;display:block;margin:1.6rem auto;border-radius:10px;box-shadow:var(--shadow-small);}
a{color:var(--c-accent);text-decoration:none;}
a:hover{text-decoration:underline;}
code,pre{font-family:ui-monospace,Menlo,Consolas,"SF Mono","Roboto Mono",monospace;font-size:.9em;}
pre{background:var(--c-surface);padding:1rem 1.2rem;border-radius:10px;overflow-x:auto;box-shadow:var(--shadow-small);}
blockquote{margin:1.8rem 0;padding:1rem 1.2rem;background:linear-gradient(165deg,var(--c-surface),#fff);border-left:4px solid var(--c-accent);border-radius:0 8px 8px 0;position:relative;}
blockquote::before{content:"“";position:absolute;top:-10px;left:8px;font-size:3.5rem;line-height:1;color:rgba(var(--c-accent-rgb),.25);font-family:Georgia,serif;}
hr{border:none;height:1px;background:linear-gradient(to right,transparent,var(--c-border),transparent);margin:3rem 0;}
.app-bar{position:fixed;top:0;left:0;right:0;padding-top:var(--safe-top);background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.05);z-index:90;transform:translateY(0);transition:transform .4s,background .4s;}
html.dark .app-bar{background:rgba(28,30,34,.82);border-bottom-color:rgba(255,255,255,.08);}
.app-bar[data-hidden="true"]{transform:translateY(calc(-100% - 6px));}
.nav{max-width:980px;margin:0 auto;height:var(--app-bar-height);display:flex;align-items:center;justify-content:center;padding:0 clamp(14px,4vw,40px);position:relative;}
.nav-buttons{display:flex;align-items:center;gap:.6rem;}
.nav-settings{position:absolute;right:clamp(14px,4vw,40px);top:0;height:100%;display:flex;align-items:center;}
.nav-btn{background:var(--c-surface);border:1px solid var(--c-border);padding:.55rem .95rem;font-size:.85rem;border-radius:999px;color:var(--c-fg);cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:.25rem;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);}
.nav-btn.small{padding:.45rem .75rem;font-size:.75rem;}
.nav-btn:hover{background:#fff;border-color:var(--c-accent);color:var(--c-accent);}
.nav-btn.disabled{opacity:.35;pointer-events:none;}
.top-progress{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--c-accent),rgba(var(--c-accent-rgb),.35));width:0%;transition:width .12s linear;}
.settings-panel{position:fixed;top:0;right:0;height:100dvh;width:min(360px,90vw);background:var(--c-bg);border-left:1px solid var(--c-border);box-shadow:-4px 0 28px -8px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .45s cubic-bezier(.65,.05,.36,1);z-index:120;display:flex;flex-direction:column;}
.settings-panel[data-open="true"]{transform:translateX(0);}
.settings-inner{padding:calc(12px + var(--safe-top)) 20px 32px;overflow-y:auto;}
.settings-inner h2{margin:.2rem 0 1.4rem;font-size:1.1rem;letter-spacing:.4px;}
.setting{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.2rem;}
.setting label{font-size:.7rem;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--c-fg-soft);display:flex;justify-content:space-between;}
.setting input[type=range]{width:100%;appearance:none;height:6px;border-radius:4px;background:var(--c-surface);border:1px solid var(--c-border);}
.setting input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--c-accent);box-shadow:0 2px 8px -2px rgba(var(--c-accent-rgb),.7);cursor:pointer;border:2px solid #fff;}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;}
.chip{background:var(--c-surface);border:1px solid var(--c-border);padding:.55rem .85rem;font-size:.75rem;border-radius:999px;letter-spacing:.4px;cursor:pointer;color:var(--c-fg-soft);font-weight:500;transition:.25s;}
.chip:hover{border-color:var(--c-accent);color:var(--c-accent);}
.chip.active{background:var(--c-accent);color:#fff;border-color:var(--c-accent);box-shadow:0 4px 14px -4px rgba(var(--c-accent-rgb),.6);}
.chip.disabled{opacity:.45;pointer-events:none;}
.close-btn{width:100%;background:var(--c-accent);color:#fff;border:none;border-radius:10px;padding:.9rem 1.2rem;font-weight:600;margin-top:.4rem;cursor:pointer;letter-spacing:.5px;font-size:.85rem;box-shadow:var(--shadow-small);}
.fab-top{position:fixed;bottom:calc(var(--tts-dock-height) + 20px + var(--safe-bottom));right:clamp(16px,4vw,42px);width:56px;height:56px;border-radius:50%;background:var(--c-accent);color:#fff;display:none;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border:none;box-shadow:var(--shadow-level);z-index:60;transition:transform .4s;}
.fab-top:hover{transform:translateY(-4px);}
#back-top.show{display:flex;}
.tts-dock{position:fixed;left:0;right:0;bottom:0;padding:10px clamp(14px,4vw,48px) calc(6px + var(--safe-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(180%);border-top:1px solid var(--c-border);box-shadow:0 -8px 24px -10px rgba(0,0,0,.25);z-index:80;display:flex;flex-direction:column;gap:8px;transition:transform .4s,opacity .4s;}
html.dark .tts-dock{background:rgba(28,30,34,.9);}
.tts-dock[data-visible="false"]{transform:translateY(110%);opacity:0;pointer-events:none;}
.tts-dock-main{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;}
.dock-btn{background:var(--c-surface);border:1px solid var(--c-c_BORDER,#e3e5e8);border-radius:14px;padding:10px 16px;font-size:16px;cursor:pointer;color:var(--c-fg);display:inline-flex;align-items:center;justify-content:center;transition:.25s;min-width:46px;min-height:46px;box-shadow:var(--shadow-small);}
.dock-btn.play{background:linear-gradient(135deg,var(--c-accent),#5b8dff);color:#fff;border:none;}
.dock-btn:hover{filter:brightness(1.05);}
.dock-btn.small{padding:8px 12px;font-size:14px;min-width:auto;min-height:42px;}
.tts-progress-row{display:flex;align-items:center;gap:14px;}
.tts-progress-bar{position:relative;flex:1;height:10px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:6px;cursor:pointer;overflow:hidden;touch-action:none;}
.tts-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--c-accent),rgba(var(--c-accent-rgb),.55));transition:width .25s linear;}
.tts-progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--c-accent);box-shadow:0 3px 8px -2px rgba(var(--c-accent-rgb),.6);pointer-events:auto;}
.tts-progress-text{font-size:.7rem;font-weight:600;letter-spacing:.5px;color:var(--c-fg-soft);min-width:70px;text-align:right;}
.tts-sentence{transition:background .25s,border-radius .25s;}
.tts-active{background:rgba(var(--c-accent-rgb),.25);border-radius:4px;padding:2px 3px;}
.toc-list{list-style:none;padding:0;margin:1.8rem 0 4rem;display:grid;gap:.9rem;}
.toc-list li a{display:block;background:var(--c-surface);padding:.95rem 1.2rem;border-radius:10px;border:1px solid var(--c-border);font-weight:500;font-size:.9rem;transition:.3s;letter-spacing:.3px;}
.toc-list li a:hover{background:#fff;border-color:var(--c-accent);color:var(--c-accent);box-shadow:var(--shadow-small);}
.hint{font-size:.75rem;letter-spacing:.5px;color:var(--c-fg-soft);opacity:.75;margin-top:3rem;text-align:center;}
@media (max-width:640px){body{padding:0 18px calc(var(--tts-dock-height) + 34px + var(--safe-bottom));}h1{font-size:clamp(1.65rem,1.4rem + 1.6vw,2.15rem);} .dock-btn{min-width:42px;min-height:44px;padding:8px 14px;} .tts-progress-bar{height:8px;} .tts-progress-handle{width:16px;height:16px;} .fab-top{width:52px;height:52px;font-size:20px;}}
html.dark {--c-bg:#1c1f22; --c-fg:#e5e8ec; --c-fg-soft:#9aa0a7; --c-surface:#262b31; --c-border:#31363c; --c-accent:#5d8bff; --c-accent-rgb:93,139,255;}
html.reduce-motion *{animation:none !important;transition:none !important;}