@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  --bg: #fdfcf8; --bg-soft: #f4f1ea; --text: #2a2a2a;
  --text-soft: #5c5c5c; --text-mute: #8a8a8a; --line: #e8e3d8;
  --accent: #1a4a8c; --accent-soft: #e8eef7;
  --shadow: 0 2px 12px rgba(0,0,0,.04); --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius: 12px; --max-w: 760px;
  --fs-sm: 15px; --fs-md: 17px; --fs-lg: 19px; --fs-xl: 22px;
}

[data-theme="sepia"] {
  --bg: #f4ecd8; --bg-soft: #e8dec0; --text: #3a2e1c;
  --text-soft: #5c4a30; --text-mute: #7a6a50; --line: #d6c8a4;
  --accent: #8b5a2b; --accent-soft: #ebe0c5;
  --shadow: 0 2px 12px rgba(139,90,43,.06);
  --shadow-lg: 0 8px 32px rgba(139,90,43,.15);
}
[data-theme="eink"] {
  --bg: #ececec; --bg-soft: #dedede; --text: #000;
  --text-soft: #2a2a2a; --text-mute: #555; --line: #b8b8b8;
  --accent: #000; --accent-soft: #c8c8c8;
  --shadow: 0 2px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);
}
[data-theme="dark"] {
  --bg: #1a1a1a; --bg-soft: #2a2a2a; --text: #e8e8e8;
  --text-soft: #b0b0b0; --text-mute: #808080; --line: #3a3a3a;
  --accent: #6b9bd8; --accent-soft: #1f2d3f;
  --shadow: 0 2px 12px rgba(0,0,0,.3); --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-md);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSongti-SC-Regular","STSong","SimSun","宋体",serif;background:var(--bg);color:var(--text);line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .25s ease,color .25s ease}
body.font-sm{font-size:var(--fs-sm)} body.font-md{font-size:var(--fs-md)}
body.font-lg{font-size:var(--fs-lg)} body.font-xl{font-size:var(--fs-xl)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}

[data-theme="eink"] .work-card-tag,
[data-theme="eink"] .work-tag,
[data-theme="eink"] .toc-num,
[data-theme="eink"] .topbar-btn,
[data-theme="eink"] .font-buttons button,
[data-theme="eink"] .chapter-nav a { filter: grayscale(1) contrast(1.1); }

.home-main{max-width:800px;margin:0 auto;padding:24px 16px 80px}
.home-header{text-align:center;padding:32px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.home-header h1{font-size:1.9rem;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:.02em}
.home-header .subtitle{color:var(--text-soft);font-size:.95rem;margin-bottom:4px}
.home-header .hint{color:var(--text-mute);font-size:.85rem;margin-top:12px}
.home-header .last-updated{color:var(--text-mute);font-size:.8rem;margin-top:8px}
.work-card-meta{font-size:.78rem;color:var(--text-mute);margin-top:4px}
.works-list{display:flex;flex-direction:column;gap:16px}
.work-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:all .2s;display:flex;gap:16px;align-items:flex-start;color:var(--text);box-shadow:var(--shadow)}
.work-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent);text-decoration:none}
[data-theme="dark"] .work-card,[data-theme="eink"] .work-card{background:var(--bg-soft)}
.work-card-icon{font-size:2rem;line-height:1;flex-shrink:0;width:48px;text-align:center}
.work-card-body{flex:1;min-width:0}
.work-card-tag{display:inline-block;font-size:.7rem;color:#fff;padding:2px 8px;border-radius:4px;margin-bottom:6px;font-weight:500}
[data-theme="eink"] .work-card-tag,[data-theme="eink"] .work-tag{background:#000 !important;color:#fff}
.work-card-title{font-size:1.05rem;font-weight:600;line-height:1.5;margin-bottom:4px;color:var(--text)}
.work-card-sub{font-size:.85rem;color:var(--text-mute);line-height:1.4}
.home-footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);text-align:center;color:var(--text-mute);font-size:.85rem}

.toc-main{max-width:760px;margin:0 auto;padding:24px 18px 100px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:var(--text-mute);margin-bottom:16px}
.crumbs a{color:var(--accent)}
.work-section{font-size:.85rem;color:var(--accent);margin:0 0 6px}
.work-meta{font-size:.8rem;color:var(--text-mute);margin-top:6px}
.jump-wrap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:.85rem;color:var(--text-soft)}
.jump-wrap select{max-width:min(100%,420px);padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);color:var(--text);font-family:inherit;font-size:.85rem}
.toc-jump{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.toc-jump a{font-size:.8rem;padding:4px 10px;border-radius:999px;background:var(--bg-soft);color:var(--accent)}
.toc-section{font-size:1.05rem;margin:28px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.source-line{margin-top:28px;font-size:.85rem;color:var(--text-mute)}
.about-main .reading-content{margin-top:8px}
.reading-content .compact-list{list-style:none;margin-left:0}
.reading-content .compact-list li{padding:2px 0;border-bottom:1px dashed var(--line)}
.reading-content .chen-guang{font-style:normal}
.toc-list{list-style:none;padding:0;margin:8px 0 0}
.toc-list li{margin:0;padding:0;border-bottom:1px solid var(--line)}
.toc-list a{display:flex;gap:14px;padding:12px 4px;color:var(--text);transition:all .2s;align-items:baseline}
.toc-list a:hover{color:var(--accent);text-decoration:none;background:var(--bg-soft);padding-left:12px}
.toc-num{font-family:"SF Mono",Menlo,Consolas,monospace;color:var(--text-mute);font-size:.85rem;min-width:42px;flex-shrink:0}
.toc-title{flex:1;font-size:1rem;line-height:1.5}

.reading-page, .toc-page{background:var(--bg)}
.topbar{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:8px;min-height:52px;transition:transform .25s ease}
.back-btn{font-size:1.4rem;color:var(--accent);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.back-btn:hover{background:var(--accent-soft);text-decoration:none}
.topbar-title{flex:1;font-size:.95rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar-actions{display:flex;gap:4px;flex-shrink:0}
.topbar-btn{background:var(--bg-soft);border:none;width:36px;height:36px;border-radius:8px;color:var(--accent);font-weight:600;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit;line-height:1}
.topbar-btn:hover{background:var(--accent);color:#fff}
.topbar-btn.active{background:var(--accent);color:#fff}
[data-theme="eink"] .topbar-btn.active{color:#fff}
.font-panel{position:sticky;top:52px;z-index:99;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:12px}
.font-panel[hidden]{display:none}
.font-panel-label{font-size:.85rem;color:var(--text-soft);font-weight:500}
.font-buttons{display:flex;gap:6px}
.font-buttons button{background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:6px;font-size:.85rem;cursor:pointer;color:var(--text);transition:all .2s;font-family:inherit}
[data-theme="dark"] .font-buttons button,[data-theme="eink"] .font-buttons button{background:var(--bg-soft)}
.font-buttons button:hover{border-color:var(--accent);color:var(--accent)}
.font-buttons button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="eink"] .font-buttons button.active{color:#fff}

.reading-main{max-width:var(--max-w);margin:0 auto;padding:24px 18px 100px}
.work-header{text-align:center;padding:16px 0 24px;border-bottom:1px solid var(--line);margin-bottom:28px}
.work-tag{display:inline-block;font-size:.7rem;color:#fff;padding:3px 10px;border-radius:4px;margin-bottom:12px;font-weight:500}
.work-title{font-size:1.4rem;font-weight:700;line-height:1.4;color:var(--text);margin-bottom:8px}
.work-subtitle{font-size:.9rem;color:var(--text-mute)}
.reading-content{line-height:1.95;color:var(--text);word-wrap:break-word}
.reading-content p,.reading-content li{font-feature-settings:"palt"}
.reading-content h1,.reading-content h2,.reading-content h3,.reading-content h4,.reading-content h5{margin:1.6em 0 .7em;font-weight:700;color:var(--text);line-height:1.4}
.reading-content h1{font-size:1.6em}
.reading-content h2{font-size:1.35em;border-bottom:1px solid var(--line);padding-bottom:.3em}
.reading-content h3{font-size:1.15em}
.reading-content h4{font-size:1.05em}
.reading-content h5{font-size:1em}
.reading-content p{margin:0 0 1em;text-align:justify;text-justify:inter-ideograph}
.reading-content strong{font-weight:700;color:var(--text)}
.reading-content em{font-style:normal;color:var(--accent)}
.reading-content blockquote{margin:1em 0;padding:12px 18px;background:var(--bg-soft);border-left:3px solid var(--accent);color:var(--text-soft);font-style:italic;border-radius:0 6px 6px 0}
.reading-content ul,.reading-content ol{margin:0 0 1em 1.5em}
.reading-content li{margin:.4em 0}
.reading-content code{background:var(--bg-soft);padding:2px 6px;border-radius:3px;font-size:.9em;font-family:"SF Mono",Menlo,Consolas,monospace}
.reading-content pre{background:var(--bg-soft);padding:12px 16px;border-radius:6px;overflow-x:auto;margin:1em 0}
.reading-content pre code{background:none;padding:0}
.reading-content table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.95em}
.reading-content th,.reading-content td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.reading-content th{background:var(--bg-soft);font-weight:600}
.reading-content hr{border:none;border-top:1px solid var(--line);margin:2em 0}
.reading-content img{max-width:100%;height:auto;border-radius:6px;margin:1em 0}
.reading-content a{color:var(--accent);text-decoration:none;border-bottom:1px dashed var(--accent)}
.reading-content a:hover{background:var(--accent-soft);text-decoration:none;border-bottom-style:solid}
.chapter-nav{display:flex;justify-content:space-between;gap:12px;margin:32px 0 24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chapter-nav a{flex:1;padding:10px 14px;background:var(--bg-soft);border-radius:8px;color:var(--accent);font-size:.88rem;text-align:center;line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapter-nav a:hover{background:var(--accent-soft);text-decoration:none}
.chapter-nav .nav-prev{text-align:left}
.chapter-nav .nav-next{text-align:right}
.chapter-nav span{flex:1}
.work-footer{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.back-home{display:inline-block;padding:10px 20px;background:var(--accent-soft);color:var(--accent);border-radius:8px;font-size:.9rem;font-weight:500}
.back-home:hover{background:var(--accent);color:#fff;text-decoration:none}

.search-fab{position:fixed;bottom:20px;right:20px;width:52px;height:52px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;box-shadow:var(--shadow-lg);z-index:90;border:none;transition:transform .2s,opacity .2s}
.search-fab:hover{transform:scale(1.05)}
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 16px;animation:fadeIn .15s ease}
.search-overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.search-modal{background:#fff;border-radius:var(--radius);width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
[data-theme="dark"] .search-modal,[data-theme="eink"] .search-modal{background:var(--bg-soft)}
#searchInput{width:100%;border:none;padding:16px 20px;font-size:1rem;border-bottom:1px solid var(--line);outline:none;font-family:inherit;background:#fff}
[data-theme="dark"] #searchInput,[data-theme="eink"] #searchInput{background:var(--bg-soft);color:var(--text)}
.search-results{flex:1;overflow-y:auto;padding:8px 0}
.search-empty{padding:32px 20px;text-align:center;color:var(--text-mute);font-size:.9rem}
.search-result{padding:12px 20px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--text);display:block}
.search-result:hover{background:var(--bg-soft);text-decoration:none}
.search-result-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:.75rem;flex-wrap:wrap}
.search-result-icon{font-size:.95rem}
.search-result-tag{display:inline-block;font-size:.7rem;color:#fff;padding:1px 6px;border-radius:3px;font-weight:500}
.search-result-num{font-family:"SF Mono",Menlo,Consolas,monospace;color:var(--text-mute);font-size:.7rem}
.search-result-title{font-size:.85rem;color:var(--text-soft);margin-bottom:2px;font-weight:500}
.search-result-text{font-size:.9rem;color:var(--text);line-height:1.5}
.search-result-text mark{background:#fff3a0;color:var(--text);padding:0 2px;border-radius:2px;font-weight:600}
[data-theme="eink"] .search-result-text mark{background:#000;color:#fff;padding:0 4px}
[data-theme="sepia"] .search-result-text mark{background:#e8c560;color:#3a2e1c}

.fs-exit{position:fixed;top:16px;right:16px;z-index:200;background:rgba(0,0,0,.55);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:none;backdrop-filter:blur(8px);align-items:center;justify-content:center}
.fs-exit.show{display:flex}
body.is-fs .fs-exit,body.immersive .fs-exit{display:flex}
.immersive-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.6);color:#fff;padding:8px 16px;border-radius:8px;font-size:.85rem;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s;display:none}
.immersive-hint.show{opacity:1;display:block}

/* ============ 翻页模式 ============ */
body.book-mode{perspective:2200px;background:var(--bg)}
body.book-mode .reading-main{padding-top:20px;padding-bottom:60px}
body.book-mode .work-header{padding:8px 0 12px;margin-bottom:14px;border-bottom:1px dashed var(--line)}
body.book-mode .work-title{font-size:1.2rem}
body.book-mode .work-subtitle{font-size:.8rem}
body.book-mode .reading-content{background-color:var(--paper-bg,var(--bg));background-image:linear-gradient(to right,rgba(0,0,0,.05) 0%,transparent 3%,transparent 97%,rgba(0,0,0,.05) 100%),radial-gradient(circle at 18% 25%,rgba(180,150,100,.04) 0%,transparent 28%),radial-gradient(circle at 78% 65%,rgba(180,150,100,.035) 0%,transparent 35%);padding:48px 56px 76px;max-width:720px;margin:0 auto;box-shadow:0 6px 28px rgba(60,40,20,.1),0 1px 3px rgba(0,0,0,.04),-3px 0 12px rgba(60,40,20,.06);border-radius:2px 8px 8px 2px;min-height:75vh;position:relative;transform-style:preserve-3d;transform-origin:left center;transition:transform .6s cubic-bezier(.45,.05,.55,.95),box-shadow .6s ease}
body.book-mode .reading-content::before{content:"";position:absolute;top:10px;bottom:60px;left:34px;width:1px;background:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.05) 25%,rgba(0,0,0,.05) 75%,transparent 100%);z-index:1;pointer-events:none}
body.book-mode .reading-content::after{content:"";position:absolute;inset:0;background-color:var(--paper-bg,var(--bg));background-image:linear-gradient(to left,rgba(0,0,0,.05) 0%,transparent 3%,transparent 97%,rgba(0,0,0,.05) 100%),radial-gradient(circle at 82% 25%,rgba(180,150,100,.04) 0%,transparent 30%);transform:rotateY(180deg);backface-visibility:hidden;border-radius:8px 2px 2px 8px;z-index:-1;box-shadow:inset 4px 0 8px rgba(60,40,20,.04)}
body.book-mode .reading-content.flip-next{transform:perspective(2200px) rotateY(-175deg);box-shadow:0 16px 48px rgba(0,0,0,.16),inset -8px 0 16px rgba(0,0,0,.05)}
body.book-mode .reading-content.flip-prev{transform:perspective(2200px) rotateY(175deg);transform-origin:right center;box-shadow:0 16px 48px rgba(0,0,0,.16),inset 8px 0 16px rgba(0,0,0,.05)}
body.book-mode .reading-content.flip-in{animation:pageFlipIn .55s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes pageFlipIn{0%{transform:perspective(2200px) rotateY(180deg);opacity:0}100%{transform:perspective(2200px) rotateY(0);opacity:1}}
body.book-mode .page-number{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:.85rem;color:var(--text-mute,#8a7a60);font-family:"Noto Serif SC",serif;letter-spacing:.15em;z-index:3;user-select:none;pointer-events:none}
body.book-mode .chapter-nav{padding:14px 0;margin:24px 0 18px}
body.book-mode .chapter-nav a{padding:12px 16px;background:transparent;border:1px solid var(--line);font-weight:500}
body.book-mode .chapter-nav a:hover{background:var(--accent-soft);border-color:var(--accent)}
body[data-theme="sepia"] .reading-content,body[data-theme="sepia"] .reading-content::after{--paper-bg:#f4ecd8}
body[data-theme="eink"] .reading-content,body[data-theme="eink"] .reading-content::after{--paper-bg:#ececec}
body[data-theme="dark"] .reading-content,body[data-theme="dark"] .reading-content::after{--paper-bg:#2a2a2a}
body:not([data-theme]) .reading-content,body:not([data-theme]) .reading-content::after{--paper-bg:#fdfcf8}

:fullscreen .topbar,:fullscreen .search-fab,:fullscreen .chapter-nav,:fullscreen .work-footer,
:-webkit-full-screen .topbar,:-webkit-full-screen .search-fab,
.immersive .topbar,.immersive .search-fab,.immersive .chapter-nav,.immersive .work-footer{display:none}
:fullscreen .reading-main,:-webkit-full-screen .reading-main,.immersive .reading-main{padding-top:8px;max-width:780px}

@media (max-width:640px){
  .home-main{padding:16px 12px 60px}
  .home-header{padding:20px 0}
  .home-header h1{font-size:1.5rem}
  .work-card{padding:14px 16px;gap:12px}
  .work-card-icon{font-size:1.6rem;width:40px}
  .work-card-title{font-size:.98rem}
  .work-card-sub{font-size:.8rem}
  .reading-main, .toc-main{padding:16px 14px 80px}
  .work-title{font-size:1.2rem}
  .work-subtitle{font-size:.85rem}
  .topbar{padding:8px 10px;gap:6px;min-height:48px}
  .topbar-title{font-size:.85rem}
  .topbar-btn{width:32px;height:32px;font-size:.85rem}
  .back-btn{width:28px;height:28px;font-size:1.2rem}
  .search-fab{width:48px;height:48px;bottom:16px;right:16px;font-size:1.2rem}
  .search-overlay{padding:40px 12px 12px}
  .reading-content h1{font-size:1.4em}
  .reading-content h2{font-size:1.2em}
  .reading-content h3{font-size:1.08em}
  .toc-list a{padding:10px 4px;gap:10px}
  .toc-num{min-width:36px;font-size:.78rem}
  .toc-title{font-size:.92rem}
  .chapter-nav{flex-direction:column;gap:8px}
  .chapter-nav a{text-align:center;padding:8px 12px;font-size:.85rem}
  .chapter-nav .nav-prev, .chapter-nav .nav-next{text-align:center}
}
@media (max-width:380px){.work-card{flex-direction:column;gap:8px}.work-card-icon{width:auto}}
@media (prefers-color-scheme:dark){
  :root{--bg:#1a1a1a;--bg-soft:#2a2a2a;--text:#e8e8e8;--text-soft:#b0b0b0;--text-mute:#808080;--line:#3a3a3a;--accent:#6b9bd8;--accent-soft:#1f2d3f;--shadow:0 2px 12px rgba(0,0,0,.3);--shadow-lg:0 8px 32px rgba(0,0,0,.5)}
  .topbar{background:rgba(26,26,26,.92)}
  .font-panel{background:rgba(26,26,26,.95)}
  .search-result:hover{background:#333}
}