:root {
    --reader-font-size: 20px;
    --reader-serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
    --reader-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --reader-accent: #a9322d;
    --reader-bg: #eee8da;
    --reader-paper: #fffdf7;
    --reader-text: #312d28;
    --reader-muted: #837b70;
    --reader-line: rgba(70, 60, 49, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.reader-page { min-width: 0; margin: 0; color: var(--reader-text); background: var(--reader-bg); font-family: var(--reader-sans); -webkit-font-smoothing: antialiased; transition: color .2s, background .2s; }
body[data-reader-theme="green"] { --reader-bg: #dfe9df; --reader-paper: #f0f6ed; --reader-text: #263329; --reader-muted: #69776b; --reader-line: rgba(38,51,41,.14); }
body[data-reader-theme="night"] { --reader-bg: #181919; --reader-paper: #252726; --reader-text: #c8c6be; --reader-muted: #8e918b; --reader-line: rgba(255,255,255,.09); --reader-accent: #d76a62; }
body.drawer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.reader-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); color: var(--reader-muted); background: var(--reader-paper); border-bottom: 1px solid var(--reader-line); }
.reader-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--reader-text); font-family: var(--reader-serif); letter-spacing: .06em; }
.reader-brand img { border-radius: 8px; }
.reader-header nav { display: flex; gap: 22px; font-size: 13px; }
.reader-header a:hover { color: var(--reader-accent); }
.reader-shell { width: min(920px, calc(100% - 36px)); margin: 34px auto 80px; }
.reader-article { padding: clamp(34px, 7vw, 82px) clamp(24px, 8vw, 92px); background: var(--reader-paper); box-shadow: 0 22px 70px rgba(61,50,38,.09); }
.reader-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--reader-muted); font-size: 12px; }
.reader-breadcrumb a:hover { color: var(--reader-accent); }
.chapter-heading { margin: 36px 0 52px; padding-bottom: 28px; border-bottom: 1px solid var(--reader-line); }
.chapter-heading > p { margin: 0 0 10px; color: var(--reader-accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.chapter-heading h1 { margin: 0; font: 700 clamp(30px, 5vw, 45px)/1.25 var(--reader-serif); letter-spacing: .025em; }
.chapter-heading > div { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 16px; color: var(--reader-muted); font-size: 12px; }
.chapter-heading a:hover { color: var(--reader-accent); }
.chapter-content { font: 400 var(--reader-font-size)/2 var(--reader-serif); letter-spacing: .055em; overflow-wrap: anywhere; }
.chapter-content p { position: relative; margin: 0 0 1.55em; text-align: justify; text-indent: 2em; }
.chapter-content .content-wrap { white-space: pre-line; }
.chapter-content br { display: none; }
.chapter-content .review-count { margin-left: .6em; color: var(--reader-accent); font: 12px/1 var(--reader-sans); text-indent: 0; }
.chapter-content .review-count.hidden { display: none; }
.chapter-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 58px; padding-top: 26px; border-top: 1px solid var(--reader-line); }
.chapter-navigation a, .chapter-navigation button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; color: var(--reader-text); border: 1px solid var(--reader-line); background: transparent; cursor: pointer; }
.chapter-navigation a:last-child { justify-self: stretch; }
.chapter-navigation a:hover, .chapter-navigation button:hover { color: #fff; border-color: var(--reader-accent); background: var(--reader-accent); }
.reader-tool { position: fixed; z-index: 30; top: 40%; width: 58px; min-height: 64px; display: grid; place-content: center; gap: 3px; color: var(--reader-muted); border: 1px solid var(--reader-line); background: var(--reader-paper); box-shadow: 0 10px 28px rgba(55,45,35,.09); cursor: pointer; }
.reader-tool span:last-child { font-size: 11px; }
.reader-tool--catalog { left: max(14px, calc((100vw - 1060px) / 2)); }
.reader-tool--settings { right: max(14px, calc((100vw - 1060px) / 2)); }
.reader-tool:hover { color: var(--reader-accent); border-color: var(--reader-accent); }
.reader-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(18,17,15,.45); backdrop-filter: blur(3px); }
.catalog-drawer, .settings-drawer { position: fixed; z-index: 60; top: 0; bottom: 0; width: min(440px, 92vw); padding: 26px; color: var(--reader-text); background: var(--reader-paper); box-shadow: 0 0 60px rgba(0,0,0,.18); transition: transform .25s ease; }
.catalog-drawer { left: 0; transform: translateX(-104%); }
.settings-drawer { right: 0; transform: translateX(104%); }
.catalog-drawer[aria-hidden="false"], .settings-drawer[aria-hidden="false"] { transform: translateX(0); }
.drawer-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--reader-line); }
.drawer-heading p { margin: 0 0 4px; color: var(--reader-accent); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.drawer-heading h2 { margin: 0; font: 700 27px/1.2 var(--reader-serif); }
.drawer-heading button { width: 40px; height: 40px; color: var(--reader-muted); border: 0; background: transparent; cursor: pointer; font-size: 28px; }
.catalog-filter { display: block; margin: 20px 0 12px; }
.catalog-filter input { width: 100%; height: 42px; padding: 0 12px; color: var(--reader-text); border: 1px solid var(--reader-line); background: transparent; outline: none; }
.catalog-filter input:focus { border-color: var(--reader-accent); }
.catalog-edition { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; color: var(--reader-muted); font-size: 12px; }
.catalog-edition a { color: var(--reader-accent); }
.catalog-list { height: calc(100vh - 175px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.catalog-list a { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 13px 8px; border-bottom: 1px solid var(--reader-line); }
.catalog-list span { color: var(--reader-muted); font-size: 12px; }
.catalog-list strong { overflow: hidden; font: 500 14px/1.45 var(--reader-serif); white-space: nowrap; text-overflow: ellipsis; }
.catalog-list li.is-current a { color: var(--reader-accent); background: rgba(169,50,45,.07); }
.settings-drawer section { padding: 24px 0; border-bottom: 1px solid var(--reader-line); }
.settings-drawer h3 { margin: 0 0 14px; font-size: 14px; }
.setting-actions, .theme-actions { display: flex; gap: 10px; align-items: center; }
.setting-actions button, .theme-actions button { min-width: 70px; min-height: 40px; color: var(--reader-text); border: 1px solid var(--reader-line); background: transparent; cursor: pointer; }
.setting-actions output { min-width: 66px; text-align: center; color: var(--reader-muted); }
.gesture-note { margin-top: 24px; color: var(--reader-muted); font-size: 12px; }
.reader-ai { margin-top: 44px; padding: 26px; border-left: 3px solid var(--reader-accent); background: rgba(169,50,45,.045); }
.reader-ai > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.reader-ai p { margin: 0 0 5px; color: var(--reader-accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.reader-ai h2 { margin: 0; font: 700 22px/1.35 var(--reader-serif); }
.reader-ai__button { margin-top: 18px; min-height: 40px; padding: 0 16px; color: #fff; border: 0; background: var(--reader-accent); cursor: pointer; }
.reader-ai__button:disabled { opacity: .55; }
.reader-ai__result { margin-top: 16px; color: var(--reader-muted); font-size: 14px; line-height: 1.75; }
.reader-comments { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--reader-line); }
.reader-comments__heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.reader-comments h2 { margin: 0; font: 700 24px/1.3 var(--reader-serif); }
.reader-comments__heading span { color: var(--reader-muted); font-size: 12px; }
.reader-comment { padding: 16px 0; border-bottom: 1px solid var(--reader-line); }
.reader-comment strong { font-size: 14px; }
.reader-comment p { margin: 7px 0; line-height: 1.7; }
.reader-comment time { color: var(--reader-muted); font-size: 11px; }
.comment-form { display: grid; gap: 10px; margin-top: 24px; }
.comment-form label { font-weight: 700; }
.comment-form textarea { min-height: 110px; resize: vertical; padding: 12px; color: var(--reader-text); border: 1px solid var(--reader-line); background: transparent; outline: none; }
.comment-form textarea:focus { border-color: var(--reader-accent); }
.comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--reader-muted); font-size: 12px; }
.comment-form button { min-height: 40px; padding: 0 18px; color: #fff; border: 0; background: var(--reader-accent); cursor: pointer; }
.comment-login a { color: var(--reader-accent); }
@media (max-width: 1120px) {
    .reader-tool { top: auto; bottom: 18px; width: 54px; min-height: 54px; }
    .reader-tool--catalog { left: 18px; }
    .reader-tool--settings { right: 18px; }
}
@media (max-width: 680px) {
    .reader-header { min-height: 54px; padding: 0 14px; }
    .reader-brand strong { font-size: 15px; }
    .reader-header nav { gap: 13px; }
    .reader-header nav a:first-child { display: none; }
    .reader-shell { width: 100%; margin: 0 auto; }
    .reader-article { padding: 32px 20px 94px; box-shadow: none; }
    .chapter-heading { margin: 28px 0 36px; }
    .chapter-content { line-height: 1.85; letter-spacing: .035em; }
    .chapter-navigation { grid-template-columns: 1fr 1fr; }
    .chapter-navigation button { grid-column: 1 / -1; grid-row: 1; }
    .reader-ai { padding: 20px; }
    .catalog-drawer, .settings-drawer { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}